EasyUI环境搭建与入门基础语法
生活随笔
收集整理的這篇文章主要介紹了
EasyUI环境搭建与入门基础语法
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
場景
EasyUI中文網：
http://www.jeasyui.net/
下載：
http://www.jeasyui.net/download/jquery.html
選擇免費版下載，下載后解壓：
實現
打開IDEA-new Project-Maven--勾選Create from archetype--選擇webapp
設置自己的Maven倉庫等。
建成之后
在webapp下新建easyui文件夾，并將上面下載的easyui的文件復制過來
然后在此文件夾下新建test.html
添加兩個li菜單
<ul><li><span>菜單1</span></li><li><span>菜單2</span></li> </ul>運行項目，打開瀏覽器查看效果
關于IDEA中運行Web項目參照：
https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/90745189
引入EasyUI
在webapp下新建test.html
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"><script type="text/javascript" src="easyui/jquery.min.js"></script><script type="text/javascript" src="easyui/jquery.easyui.min.js"></script> </head> <body> <ul class="easyui-tree"><li><span>菜單1</span></li><li><span>菜單2</span></li> </ul> </body> </html>運行結果
創建層級菜單
修改test.html
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"><script type="text/javascript" src="easyui/jquery.min.js"></script><script type="text/javascript" src="easyui/jquery.easyui.min.js"></script> </head> <body> <ul class="easyui-tree"><li><span>菜單1</span></li><li><span>菜單2</span><ul><li><span>菜單2-1</span></li><li><span>菜單2-2</span></li></ul></li> </ul> </body> </html>效果
引用EasyUI的另一種方式
除了添加class之外，還可以通過js來實現。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"><script type="text/javascript" src="easyui/jquery.min.js"></script><script type="text/javascript" src="easyui/jquery.easyui.min.js"></script> </head> <body> <ul id="tree"><li><span>菜單1</span></li><li><span>菜單2</span><ul><li><span>菜單2-1</span></li><li><span>菜單2-2</span></li></ul></li> </ul> <script type="text/javascript">$(function () {$("#tree").tree();}) </script> </body> </html>設置控件的屬性
方式一：在標簽上直接添加
比如設置樹形結構的多選屬性。
<ul class="easyui-tree" checkbox="true"><li><span>菜單0</span></li> </ul>方式二：通過data-options屬性
<ul class="easyui-tree" data-options="checkbox:true"><li><span>菜單00</span></li> </ul>方式三：通過js實現
<script type="text/javascript">$(function () {$("#tree").tree({checkbox:true});}) </script>效果
總結
以上是生活随笔為你收集整理的EasyUI环境搭建与入门基础语法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Web项目中引进EasyUI的路径问题
- 下一篇： Jquery中获取选中的select的值