一、介紹
- ligerUI是一個輕量級的前端開發框架。簡單的說，就是能夠幫助開發快速搭建網頁，並且不需要更多的寫前端代碼，能夠在最短的時間內開發出一套美觀，優雅的前端界面。
- 需要掌握的技術有html，css，js，jquery，json，還有一些后端代碼能力，不然就不能開發出自己想要的功能咯。
- 首先進入官網下載一個ligerUI的demo，下載好之后的效果如下
- 其中重要的是第1和第三個文件夾，第一個文件夾中裝了各種代碼實例，想要用的時候直接查看代碼拷貝到自己的界面中便可。
- 第三個中放置了重要的js文件，在使用的時候需要按照case示例導入對應的文件。
- 並且把其中的lib目錄導入到你的項目文件夾中，
- case：比如說我們要構建這么一個頁面
- 那么只需要把對應的查看對應的網頁源代碼，然后復制到自己的對應的模塊中，然后保存便可，但是需要修改對應的代碼，並且需要正確的引入你自己的js相關文件的路徑。
- 具體代碼我都寫有相關注釋。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> 引入相關的js文件 <link href="../../lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" /> <link href="../../lib/ligerUI/skins/ligerui-icons.css" rel="stylesheet" type="text/css" /> <script src="../../lib/jquery/jquery-1.5.2.min.js" type="text/javascript"></script> <script src="../../lib/ligerUI/js/core/base.js" type="text/javascript"></script> <script src="../../lib/ligerUI/js/plugins/ligerMenu.js" type="text/javascript"></script> <script src="../../lib/ligerUI/js/plugins/ligerMenuBar.js" type="text/javascript"></script> <script src="../../lib/ligerUI/js/plugins/ligerToolBar.js" type="text/javascript"></script> 把下方的js文件復制進去 <script type="text/javascript"> var menu1 = { width: 120, items: [ { text: '保存', click: itemclick }, //點擊然后執行的函數 { text: '列存為', click: itemclick }, { line: true }, { text: '關閉', click: itemclick } ] }; var menu2 = { width: 120, items: [ { text: '文件', children: [ { text: 'Excel', click: itemclick }, //點擊然后執行的函數 { text: 'Word', click: itemclick }, { text: 'PDF', click: itemclick }, { text: 'TXT', click: itemclick }, { line: true }, { text: 'XML', click: itemclick } ] }, ] }; function itemclick(item) { alert(item.text); } $(function () { $("#topmenu").ligerMenuBar({ items: [ { text: '文件', menu: menu1 }, { text: '導出', menu: menu2 } ] }); $("#toptoolbar").ligerToolBar({ items: [ { text: '增加', click: itemclick, icon: 'add' }, //設置圖標 { line: true }, { text: '修改', click: itemclick }, { line: true }, { text: '刪除', click: itemclick } ] }); }); </script> <style type="text/css"> #menu1, .l-menu-shadow { top: 30px; left: 50px; //設置屬性距離上和左的距離 } #menu1 { width: 200px; } </style> </head> <body style="padding:0px; overflow:hidden; "> <div id="topmenu"></div> <div id="toptoolbar"></div> </body> </html>
嗯，就這么多吧。