easyui主界面生成分析2

上回说主界面的整体布局已经完成，但是主界面的内容还没有进行。

关于上部分的点击设置出现个人密码修改功能，以及点击个人密码修改的弹出框，这个如何实现呢？

个人密码修改这实际上是一个菜单按扭，而密码修改框则是一个弹出框。由于点击用户管理时，这几个界面都是不显示出来的，所以它是被隐藏起来的。

此外，右键点击用户管理时，出现的功能，这个实际上也是一个菜单按钮。它也是被隐藏的。

故其代码如下

<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的。