（6）js ui库

最新推荐文章于 2024-05-24 11:22:41 发布

qq_36705963

最新推荐文章于 2024-05-24 11:22:41 发布

阅读量527

点赞数

分类专栏：实习

本文链接：https://blog.csdn.net/qq_36705963/article/details/108948224

版权

实习专栏收录该内容

11 篇文章 0 订阅

订阅专栏

（6）熟悉js ui库中的Dialog、Workbench Tab、PopupMenu等常用js类及UI组件的js API

Dialog
FSR命名空间下的对话框组件.用于弹出对话框

<script type="text/javascript">

        function openCustomDialog() {
                FSR.show({
                        title : "自定义信息对话框",
                        icon : "/icons/question48.png",
                        message : "该操作有风险，您确认继续吗？",
                        buttonAlign : "center",
                        buttons : [ {
                                text : '确定',
                                width : 80,
                                click : function(event) {
                                        FSR.tips("您点击了确定！");
                                        return true;
                                }
                        }, {
                                text : '下一步',
                                width : 80,
                                buttonClose : false,
                                click : function(event) {
                                        FSR.tips("您点击了下一步！");
                                        return true;
                                }
                        }, {
                                text : '取消',
                                width : 80,
                                click : function(event) {
                                        FSR.tips("您点击了取消！");
                                        return true;
                                }
                        } ]
                });
        }

        function confirmDialog() {
                FSR.confirm("操作不可恢复，您确定要删除所选的数据行吗？", function() {
                        FSR.tips("您选择了确定");
                }, function() {
                        FSR.tips("您选择了取消");
                });
        }

        function alertDialog() {
                FSR.alert("你的操作存在风险！");
        }

        function tipsDialog() {
                FSR.tips("数据已保存成功！",function(){
                        FSR.tips("ok");
                });
        }
        
        function successDialog() {
                FSR.success("数据保存成功！");
        }

        function errorDialog() {
                FSR.error("操作失败，你无权进行此操作！");
        }

        function loadingDialog() {
                FSR.loading("数据正在载入中，请您耐心等候...");
        }

        function openBaseDialog() {
                var dialog = new FSR.Dialog("我的对话框",450);
                dialog.setBodyHtml("<div class='p20' style='font-size:20px;text-align:center'>hello world！</div>");
                var saveBtn = dialog.addButton({
                        text : '保存',
                        width : 80
                });
                
                saveBtn.setDisabled(true);
                
                dialog.addButton({
                        text : '关闭',
                        width : 80
                });
                
                dialog.open();
        }

        function openEditDialog() {
                var dialog = new FSR.Dialog("编辑对话框",600);
                dialog.setBodyUrl("edit_content.jsp");
                dialog.open();
        }
        
        function openListDialog() {
                var dialog = new FSR.Dialog("列表对话框",600,300);
                dialog.setBodyUrl("dialog_list_content.jsp");
                dialog.open();
        }
</script>
</head>
<body>

        <div class="p10">
                <f:ButtonBar styleClass="fsr-btn-bar">
                        <f:Button text="基本对话框" onclick="openBaseDialog()" />
                        <f:Button text="确认对话框" onclick="confirmDialog()" />
                        <f:Button text="警告对话框" onclick="alertDialog()" />
                        <f:Button text="信息提示框" onclick="tipsDialog()" />
                        <f:Button text="成功信息对话框" onclick="successDialog()" />
                        <f:Button text="错误信息对话框" onclick="errorDialog()" />
                        <f:Button text="加载中对话框" onclick="loadingDialog()" />
                        <f:Button text="自定义对话框" onclick="openCustomDialog()" />
                        <f:Button text="编辑对话框" onclick="openEditDialog()" />
                        <f:Button text="列表对话框" onclick="openListDialog()" />
                </f:ButtonBar>
        </div>

</body>

在这里插入图片描述

Workbench Tab
FSR命名空间下的工作空间组件

$(function() {
		if (!USER) {
			FSR.error("您尚未登录", function() {
				location.href = "login.jsp";
			});
		}

		window.WB_INST = new FSR.Workbench();
		window.WB_INST.initialize();
		window.WB_INST.openTab({
			text : '首页',
			url : "index/",
			closeable : false
		});
	});

在这里插入图片描述

PopupMenu
FSR命名空间下的菜单组件

<script type="text/javascript">
        $(function() {
                var menu = new FSR.PopUpMenu({
                        items : [ {
                                text : '菜单1',
                                icon : '/icons/autologin.png',
                                onselect : function() {
                                        FSR.tips("hello world!");
                                }
                        }, {
                                text : '菜单2',
                                icon : '/icons/complete.png'
                        }, {
                                text : '菜单3'
                        }, {
                                separator : true,
                                text : '菜单4',
                                icon : '/icons/design.png',
                                children : [ {
                                        text : '菜单41'
                                }, {
                                        text : '菜单42'
                                }, {
                                        text : '菜单43'
                                }, ]
                        } ]
                });
                menu.bindContextmenu("#oDiv");

                menu.onselect = function(item) {
                        FSR.tips("您选择了菜单“" + item.text + "”");
                };
        });
</script>
<style type="text/css">
.box {
        width: 300px;
        height: 300px;
        border: 1px solid #ccc;
        text-align: center;
        vertical-align: middle;
        display: table-cell;
}
</style>
</head>
<body>
        <div class="p10">
                <div id="oDiv" class="box">右键打开菜单</div>
        </div>
</body>

在这里插入图片描述