easy_ui之创建菜单(五)

1、首先，需要学会创建链接按钮（linkbutton）

从标记创建链接按钮（linkbutton）更容易。

    < a id = "btn" href = "#" class = "easyui-linkbutton" data-options = "iconCls:'icon-search'" > easyui </ a >  

效果如下：

编程创建链接按钮（linkbutton）也是允许的。

< a id = "btn2" href = "#" > easyui2 </ a >

$( function () {

      $( '#btn2' ).linkbutton({

          iconCls: 'icon-search'

      });

   });

2、处理链接按钮（linkbutton）上的点击。

实现页面的跳转；

链接按钮（linkbutton）上的点击将把用户引导到其他页面。

< a href = " ${ctp} /myjsp" class = "easyui-linkbutton" data-options = "iconCls:'icon-search'" > easyui3 </ a >

下面的实例将警告一个消息。

< a href = "#" class = "easyui-linkbutton" data-options = "iconCls:'icon-search'"

         onclick = "javascript:alert('easyui')" > easyui4 </ a >

3、结合前面文档的内容，有如下的界面：

easy_ui之搭建框架（一） 点击打开链接

easy_ui之创建树（二）点击打开链接

easy_ui之创建异步树（三）点击打开链接

easy_ui之异步树加载动态图标（四）点击打开链接

菜单部分的代码如下：是加在north部分的，至于north部分的设置，请参看以上链接：

<div region="north" style="padding:20px; background-color: #1D5D9C">
		<!-- <a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">easyui</a> --> 
		<!-- <a id="btn2" href="#">easyui2</a> -->
		<!-- <a href="${ctp}/myjsp" class="easyui-linkbutton" data-options="iconCls:'icon-search'">easyui3</a> -->
		<!-- <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'"
		   οnclick="javascript:alert('easyui')">easyui4</a> -->
		<a href="javascript:void(0)" id="mbFile" class="easyui-menubutton"
		style="color:#FFFFFF" data-options="menu:'#mmFile'">文件(F)</a>
		<a href="javascript:void(0)" id="mbNavi" class="easyui-menubutton"
		style="color:#FFFFFF" data-options="menu:'#mmNavi'">导航(N)</a>
		<a href="javascript:void(0)" id="mbObj" class="easyui-menubutton"
		style="color:#FFFFFF" data-options="menu:'#mmObj'">对象(O)</a>
		<a href="javascript:void(0)" id="mbInst" class="easyui-menubutton"
		style="color:#FFFFFF" data-options="menu:'#mmInst'">工具(I)</a>
		<a href="javascript:void(0)" id="mbHelp" class="easyui-menubutton"
		style="color:#FFFFFF" data-options="menu:'#mmHelp'">帮助(H)</a>
		<div id="mmFile" style="width:150px; font-color:#E8FCFF">
		    <div data-options="">新建实例</div>
		    <div data-options="">修改此实例</div>
		    <div data-options="">删除此实例</div>
		    <div class="menu-sep">退出</div>
		</div>
		<div id="mmNavi" style="width:150px; font-color:#E8FCFF">
		    <div data-options="">链接到实例</div>
		    <div data-options="">断开链接</div>
		    <div data-options="">更改用户</div>
		    <div data-options="">测试链接</div>
		</div>
		<div id="mmObj" style="width:150px; font-color:#E8FCFF">
		    <div data-options="">
		    	<span>数据库</span>
		    	<div style="width:150px;">
		    		<div>创建数据库</div>
		    		<div>删除此数据库</div> 
		    	</div>
		    	
		    </div>
		    <div data-options="">模式</div>
		    <div data-options="">表</div>
		    <div data-options="">视图</div>
		    <div data-options="">序列值</div>
		    <div data-options="">包</div>
		    <div data-options="">储存过程或函数</div>
		    <div data-options="">触发器</div>
		    <div data-options="">索引</div>
		    <div data-options="">表空间</div>
		    <div data-options="">数据库间链接</div>
		    <div data-options="">数据同步</div>
		    <div data-options="">任务</div>
		    <div data-options="">用户</div>
		    <div data-options="">角色</div>
		</div>
		<div id="mmInst" style="width:150px; font-color:#E8FCFF">
		    <div data-options="">查询分析器</div>
		    <div data-options="">数据库物理备份</div>
		    <div data-options="">数据库物理恢复</div>
		    <div class="menu-sep">导出</div>
		    <div class="menu-sep">导入</div>
		</div>
		<div id="mmHelp" style="width:150px; font-color:#E8FCFF">
		    <div data-options="">昆仑 帮助</div>
		    <div data-options="">欢迎界面</div>
		    <div data-options="">关于昆仑数据库</div>
		</div>
		
     </div>

其中需要注意的是：设置菜单栏的button都是垂直居中，就把button外层的div的height去掉，然后，button会自动居中。