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'"
onclick="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会自动居中。