（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 TabFSR命名空间下的工作空间组件 $(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>