easy_ui之创建菜单(五)

135 阅读3分钟
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'"




  • >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会自动居中。

更多免费技术资料可关注:annalin1203