上回说主界面的整体布局已经完成,但是主界面的内容还没有进行。
关于上部分的点击设置出现个人密码修改功能,以及点击个人密码修改的弹出框,这个如何实现呢?
个人密码修改这实际上是一个菜单按扭,而密码修改框则是一个弹出框。由于点击用户管理时,这几个界面都是不显示出来的,所以它是被隐藏起来的。
此外,右键点击用户管理时,出现的功能,这个实际上也是一个菜单按钮。它也是被隐藏的。
故其代码如下
<div style="display:none;">
// 下面的是右键点击时出现的菜单
<div id="mm" class="easyui-menu" style="width:150px;">
<div id="mm-tabclose">关闭选项卡"</div>
<div id="mm-tabcloseother">关闭其它选项卡</div>
<div id="mm-tabcloseall">关闭全部选项卡</div>
<div class="menu-sep"></div>
<div id="mm-tabupdate">刷新</div>
</div>
// 下面是个人密码修改的菜单
<div id="mm-set" class="easyui-menu" style="width:150px;">
<div iconCls="icon-edit" id="mm-set-upadtepwd">个人密码修改</div?
</div>
// 下面是密码修改弹出框
<div id="updatepwdDlg" class="easyui-dailog" iconCls="icon-edit" modal="true" title="密码修改" style="width:380px;height:170px;background:#fafafa;"
buttons="#update-dlg-buttons" closed="true">
<div style="padding:10px;">
<div id="updatepwdForm" />
</div>
<div id="update-dlg-buttons" style="text-align:center;">
<a class="easyui-linkbutton“ iconCls="icon_ok" href="javascript:void(0)" οnclick="doUpdatepwd()">确定</a>
<a class="easyui-linkbutton" iconCls="icon-cancel" href="javascript:void(0)" οnclick="doDlgClose('#updatepwdDlg')">取消</a>
</div>
</div>
// 下面是密码修改表单
<form id="jform" method="post">
<table border="0" cellspacing="0">
<tr>
<td width="130" align="rigth" valign="top">原密码:</td>
<td align="left">
<input class="easyui-validatebox" type="password" id="userpwd" name="userpwd"
require="true" maxlength="16" validType="length[4,16] missingMessage="原密码,长度4~16位"/>
</td>
</tr>
<tr>
<td width="130" align="right" valign="top">新密码:</td>
<td align="left"><input class="easyui-validatebox" type="password" id="userpwd2" name="userpwd2" required="true" maxlength="16"validType="length[4,16]" missingMessage="新密码,长度4~16"/>
</td>
</tr>
<tr>
<td width="130" align="right" valign="top">确认密码:</td>
<td align="left"><input class="easyui-validatebox" type="password" id="userpwd2" name="userpwd2" required="true" maxlength="16" validType="length[4,16]" missingMessage="新密码,长度4~16"/>
</td>
</tr>
</table>
</form>
// 而对于安全退出,其代码如下
<form name="jformlogout" action="/admin" method="post">
<input type="hidden" name="logout"/>
</form>
</div>
这样我们就已经把上部分的所需要的界面给定义出来了。那点击时,如何让这些界面联动起来呢?这个众所周知的,当然是靠js了。
同样的分析,首先要把tab右键菜单绑定到tab上去。
function openTabRgihtMenu(){
$(".tabs-inner").bind('contextmenu',function(e){
$('#mm').menu('show',{
left::e.pageX,
top: e.pageY
});
// 下面的代码是为了关闭tab用的
var subTitle = $(this).children("span").text();
$('#mm').data("currtab",subTitle);
return false;
}
}
绑定上面右键菜单中的功能事件
function tabCloseEvent(){
//思路,首先要取到当前的tab,然后判断是否是主页,如果不是主页,那么取到它的url值,最后采用tabs控件的update方法进行更新
$("#mm-tabupdate").click(function(){
var currTab = $("#tabs").tabs('getSelected');
var t = currTab.pannel('options').tab.text();
if(t != "主页"){
var url = ¥(currTab.panel(('optons').content).attr('src')
$('#tabs').tabs('update',{
tab:currTab,
options:{
content:createFrame(url)
}
}
}
});
}
function createFrame(url) {
var s = '<iframe scrolling="auto" frameborder="0" src="' + url
+ '" style="width:100%;height:100%;"></iframe>';
return s;
}
对于上面的方法,除了以下一点要注意下,其它的按正常分析就可以了。那就是绑定时,它是使用了tabs-inner,这个是easyui的。