easyui是一种基于jQuery的用户界面插件集合, 为创建现代化,互动,JavaScript应用程序,提供必要的功能。使用easyui你不需要写很多代码,你只需要通过编写一些简单HTML标记,就可以定义用户界面。easyui可以完美支持HTML5网页的完整框架。节省网页开发的时间和规模。easyui很简单但功能非常强大。
1, Menu菜单
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="package/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="package/themes/icon.css"> <script type="text/javascript" src="package/jquery.min.js"></script> <script type="text/javascript" src="package/jquery.easyui.min.js"></script> <script type="text/javascript"> $(function(){ $(document).bind(‘contextmenu‘,function(e){ $(‘#mm‘).menu(‘show‘, { //菜单出现的位置 left: e.pageX, top: e.pageY }); return false; }); }); function showmenu(){ //调用函数显示菜单 $(‘#mm‘).menu(‘show‘, { left: 200, top: 100 }); } </script> </head> <body> <div>Click <a href="#" onclick="showmenu()">here</a> to show the menu.</div> <div id="mm" class="easyui-menu" style="width:120px;"> <div onclick="javascript:alert(‘new‘)">New</div> <div> <span>Open</span> <div style="width:150px;"> <div><b>Word</b></div> <div>Excel</div> <div>PowerPoint</div> </div> </div> <div icon="icon-save">Save</div> <div class="menu-sep"></div> <div>Exit</div> </div> </body> </html>
2,
原文:http://www.cnblogs.com/wgbs25673578/p/5072897.html