easy_ui之创建菜单(五) 纯洁的代码 2020-05-04 135 阅读3分钟 1、首先,需要学会创建链接按钮(linkbutton)从标记创建链接按钮(linkbutton)更容易。 <aid="btn"href="#"class="easyui-linkbutton"data-options="iconCls:'icon-search'">easyui</a> 效果如下:编程创建链接按钮(linkbutton)也是允许的。<aid="btn2"href="#">easyui2</a>$(function() { $('#btn2').linkbutton({ iconCls:'icon-search' }); });2、处理链接按钮(linkbutton)上的点击。实现页面的跳转;链接按钮(linkbutton)上的点击将把用户引导到其他页面。<ahref="${ctp}/myjsp"class="easyui-linkbutton"data-options="iconCls:'icon-search'">easyui3</a>下面的实例将警告一个消息。<ahref="#"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