jquery easyUI第一篇【介紹、入門、使用經常使用的組件】
tags: web前端庫javascript
什麼是easyUI
咱們能夠看官方對easyUI的介紹：css
easyUI就是一個在Jquery的基礎上封裝了一些組件....咱們在編寫頁面的時候，就能夠直接使用這些組件...很是方便...easyUI多用於在後臺的頁面上...html
在學習easyUI以前，我已經學過了bootstrap這麼一個前端的框架了...所以學習easyUI並不困難....大多狀況下，咱們只要查詢文檔就能夠找到對應的答案了。前端
easyUI快速入門
首先咱們得去下載easyUI的資料...java
而後在咱們把對應的文件導入進去項目中，以下圖：jquery
在html文件的body標籤內，寫上以下的代碼：web
<!-- 第一：寫一個普通div標籤 第二：提倡爲div標籤取一個id屬性，未來用jquery好定位 第三：爲普通div標籤添加easyui組件的樣式 全部的easyui組件的樣式均按以下格式設置： easyui-組件名 第四：若是要用easyui組件自身的屬性時，必須在普通標籤上書寫data-options屬性名, 內容爲，key:value,key:value,若是value是string類型加引號，外面雙引號， 則裏面單引號 注意：要在普通標籤中書寫data-options屬性的前提是：在普通標籤上加class="easyui-組件名" 屬性值大小寫都可 -->
<div id="xx" class="easyui-panel" style="width:500px;height:300px;padding:15px" title="個人面板" data-options="iconCls:'icon-save',collapsible:true,minimizable:false,maximizable:true">
這是個人第一個EasyUI程序
</div>
複製代碼
效果：json
關於樣式的屬性咱們都會在data-options這個屬性上設置的。bootstrap
除了指定 class="easyui-panel"這樣的方式來使用easyUI的組件，咱們還可使用javascript的方式來動態生成...代碼以下所示：瀏覽器
<div id="p2" style="padding:10px;">
<p>panel content.</p>
</div>
<script type="text/javascript"> $('#p2').panel({ width: 500, height: 150, title: 'My Panel', border: true, collapsible: true }); </script>
複製代碼
在使用easyUI的組件的時候，默認的是英文格式的。若是咱們想要變成是中文格式，能夠到如下的目錄找到對應的JS，在項目中導入進去就好了！
語法
layout佈局
layout可以幫助咱們佈局..
<!-- 佈局 -->
<div id="layoutID" style="width:700px;height:500px" class="easyui-layout" data-options="fit:true">
<!-- 區域面板--北邊 -->
<div data-options="region:'north',title:'北邊',split:true,border:true,iconCls:'icon-remove',collapsible:true" style="height:100px;"></div>
<!-- 區域面板--南邊 -->
<div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>
<!-- 區域面板--東邊 -->
<div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>
<!-- 區域面板--西邊 -->
<div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
<!-- 區域面板--中間 -->
<div data-options="region:'center',title:'中間',href:'/js-day05/images/mm.html'" style="padding:5px;background:#eee;"></div>
</div>
<script type="text/javascript"> //easyui調用方法的語法以下：$('selector').組件名('method',parameter); //瀏覽器加載jsp頁面時觸發 $(function(){ //將北邊摺疊 $('#layoutID').layout('collapse','north'); //休息3秒 window.setTimeout(function(){ //將南邊摺疊 $("#layoutID").layout("collapse","south"); //將北邊展開 $('#layoutID').layout('expand','north'); window.setTimeout(function(){ //將南邊展開 $("#layoutID").layout("expand","south"); },3000); },3000); }); </script>
複製代碼
嵌套
固然了，咱們的頁面不可能只有5個模塊，可能還有不少子模塊。咱們是能夠嵌套的。如如下的代碼：
<div id="layoutID" class="easyui-layout" data-options="fit:true">
<!-- 北 -->
<div data-options="region:'north'" style="height:100px"></div>
<!-- 中 -->
<div data-options="region:'center'">
<div class="easyui-layout" data-options="fit:true">
<!-- 西 -->
<div data-options="region:'west'" style="width:200px"></div>
<!-- 中 -->
<div data-options="region:'center'">
<div class="easyui-layout" data-options="fit:true">
<!-- 北 -->
<div data-options="region:'north'" style="height:100px"></div>
<!-- 中 -->
<div data-options="region:'center'"></div>
</div>
</div>
</div>
</div>
</div>
複製代碼
accordion分類
<!-- 容器 -->
<div id="accordionID" class="easyui-accordion" data-options="fit:false,border:true,animate:true,multiple:false,selected:-1" style="width:300px;height:400px;">
<!-- 面板 -->
<div title="標題1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">
北京
</div>
<div title="標題2" data-options="iconCls:'icon-reload'" style="padding:10px;">
上海
</div>
<div title="標題3">
廣州
</div>
<div title="標題4" data-options="collapsible:true">
深圳
</div>
</div>
<script type="text/javascript"> //當瀏覽器加載web頁面時觸發 $(function(){ //增長一個面板 //$('selector').plugin('method', parameter); $("#accordionID").accordion("add",{ "title" : "標題5", "iconCls" : "icon-add", "content" : "武漢", "selected" : false }); //休息3秒 window.setTimeout(function(){ //移除標題1面板 $("#accordionID").accordion("remove",0); //取消面板2選中 $("#accordionID").accordion("unselect",0); //面板3選中 $("#accordionID").accordion("select",1); },3000); }); </script>
複製代碼
有格式的按鈕linkbutton
<a id="btn_add" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'">增長部門</a><p>
<a id="btn_find" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">查詢部門</a><p>
<a id="btn_update" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit'">修改部門</a><p>
<a id="btn_delete" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">刪除部門</a><p>
<script type="text/javascript"> //定位4個按鈕 $("a").click(function(){ //獲取你所單擊的按鈕的標題 var title = $(this).text(); //去空格 title = $.trim(title); //顯示 alert(title); }); </script>
複製代碼
選項卡tabs
<!-- 容器 -->
<div id="tabsID" class="easyui-tabs" style="width:500px;height:250px;" data-options="plain:false,fit:false,border:true,tools:[ { iconCls:'icon-add', handler:function(){ alert('添加') } }, { iconCls:'icon-save', handler:function(){ alert('保存') } } ],selected:-1">
<!-- 選項卡 -->
<div title="標題1" style="padding:20px">
tab1<br/>
</div>
<div title="標題2" data-options="closable:true" style="overflow:auto;padding:20px;">
tab2
</div>
<div title="標題3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;">
tab3
</div>
</div>
複製代碼
分頁pagination
<!-- 靜態方式建立pagination <div id="paginationID" class="easyui-pagination" data-options="total:2000,pageSize:10" style="background:#efefef;border:1px solid #ccc;"></div> -->
<div id="paginationID" style="background:#efefef;border:1px solid #ccc;width:800px">
</div>
<script type="text/javascript"> //total表示總記錄數 //pageSize表示每頁顯示多少條記錄 //pageNumber表示當前頁號 //pageList表示可供選擇的每頁顯示多少條記錄，pageSize變量的值必須屬性pageList集合中的值之一 $("#paginationID").pagination({ "total" : 100, "pageSize" : 10, "pageNumber" : 1, "pageList" : [10,20], "layout" : ['list','sep','first','prev','manual','next','last','links'] }); </script>
<script type="text/javascript"> $("#paginationID").pagination({ "onSelectPage" : function(pageNumber,b){ alert("pageNumber=" + pageNumber); alert("pageSize=" + b); } }); </script>
複製代碼
提示框validatebox
<div style="margin:200px"></div>
姓名：<input id="nameID"/><p/>
<script type="text/javascript"> $("#nameID").validatebox({ required : true, validType : ['length[1,6]','zhongwen'] }); </script>
<script type="text/javascript"> //自定義規則:zhongwen $.extend($.fn.validatebox.defaults.rules, { //zhongwen規則名 zhongwen: { //validator驗證體 //value表示用戶在文本框中輸入的內容 validator: function(value){ //若是符合中文規則 if(/^[\u3220-\uFA29]*$/.test(value)){ return true; } }, //若是不符合中文規則，如下就是提示信息 message: '姓名必須爲中文' } }); </script>
郵箱：<input id="emailID"/><p/>
<script type="text/javascript"> $("#emailID").validatebox({ required : true, validType : ['length[1,30]','email'] }); </script>
密碼：<input id="passwordID"/><p/>
<script type="text/javascript"> $("#passwordID").validatebox({ required : true, validType : ['length[6,6]','english'] }); </script>
<script type="text/javascript"> $.extend($.fn.validatebox.defaults.rules, { english: { validator: function(value){ if(/^[a-zA-Z]*$/.test(value)){ return true; } }, message: '密碼必須爲英文' } }); </script>
複製代碼
ComboBox下拉列表框
<!-- 城市： <select id="cityID" class="easyui-combobox" name="city" style="width:200px;"> <option>aitem1</option> <option>bitem2</option> <option>bitem3</option> <option>citem4</option> <option>citem5</option> <option>citem4</option> <option>ditem5</option> <option>ditem4</option> <option>ditem5</option> <option>ditem4</option> <option>ditem5</option> <option>eitem4</option> <option>eitem5</option> </select> -->
城市：
<input id="cityID" name="city"/>
<script type="text/javascript"> //url表示請求的路徑 //valueField表示傳到服務器的值，看不見的 //textField表示頁面中顯示的值，看得見 $("#cityID").combobox({ url : "../json/city.json", valueField :"id", textField : "name" }); </script>
<script type="text/javascript"> $(function(){ //爲下拉組合框設置值 $("#cityID").combobox("setValue","長沙"); }); </script>
複製代碼
咱們的json須要的格式也能夠在文檔中找到，咱們只要對照着來寫就好了。
[
{
"id":1,
"name":"北京"
},
{
"id":2,
"name":"上海"
},
{
"id":3,
"name":"廣州"
},
{
"id":4,
"name":"深圳"
},
{
"id":5,
"name":"武漢"
}
]
複製代碼
DateBox日期輸入框
入職時間：
<input id="dd" type="text"/>
<script type="text/javascript"> $("#dd").datebox({ required : true }); </script>
<script type="text/javascript"> $("#dd").datebox({ onSelect : function(mydate){ var year = mydate.getFullYear(); var month = mydate.getMonth() + 1; var date = mydate.getDate(); alert(year+ "年" + month + "月" + date + "日"); } }); </script>
複製代碼
NumberSpinner數字微調
商品數量:
<input id="ss" style="width:80px;">
<script type="text/javascript"> $("#ss").numberspinner({ min : 1, max : 100, value : 1 }); </script>
<p/>
你一共購買了<span id="num">1</span>個商品
<script type="text/javascript"> $("#ss").numberspinner({ onSpinUp : function(){ //獲取數字微調的當前值 var value = $("#ss").numberspinner("getValue"); //將當前值設置到span標籤中 $("#num").text(value).css("color","red"); }, onSpinDown : function(){ //獲取數字微調的當前值 var value = $("#ss").numberspinner("getValue"); //將當前值設置到span標籤中 $("#num").text(value).css("color","red"); } }); </script>
<script type="text/javascript"> $("#ss").keyup(function(xxx){ //將瀏覽器產生的事件對象設置到myevent變量中 var myevent = xxx; //獲取按鍵的unicode編碼 var code = myevent.keyCode; //若是按鈕是回車 if(code == 13){ //獲取數字微調的當前值，由於$(this)此時表示的是文本框，直接獲取value屬性值便可 var value = $(this).val(); //將當前值設置到span標籤中 $("#num").text(value).css("color","red"); } }); </script>
複製代碼
Slider滑動條
<div style="margin:100px">
身高：<span id="tip"></span>
<p/>
<div id="ss" style="height:400px;width:600px"></div>
</div>
<script type="text/javascript"> $("#ss").slider({ mode : "v", min : 150, max : 190, rule : [ 150,'|',160,'|',170,'|',180,'|',190 ], showTip : true, value : 150 }); </script>
<script type="text/javascript"> $("#ss").slider({ onChange : function(newValue){ if(newValue == 160){ $("#tip").text("合格").css("color","blue"); }else if(newValue == 170){ $("#tip").text("良好").css("color","green"); }else if(newValue == 180){ $("#tip").text("優秀").css("color","pink"); }else if(newValue == 190){ $("#tip").text("卓越").css("color","red"); } } }); </script>
複製代碼
ProgressBar進度條
<div id="p" style="width:400px;"></div>
<script type="text/javascript"> $("#p").progressbar({ width : 1300, height : 100, value : 0 }); </script>
<input id="startID" type="button" value="動起來" style="width:111px;height:111px;font-size:33px"/>
<script type="text/javascript"> //獲取1到9之間的隨機數，包含1和9 function getNum(){ return Math.floor(Math.random()*9)+1; } </script>
<script type="text/javascript"> var timeID = null; //函數 function update(){ //獲取隨機值,例如：3 var num = getNum(); //獲取進度條當前值，例如：99 var value = $("#p").progressbar("getValue"); //判斷 if(value + num > 100){ //強行設置進度條的當前值爲100 $("#p").progressbar("setValue",100); //中止定時器 window.clearInterval(timeID); //按鈕正效 $("#startID").removeAttr("disabled"); }else{ //設置進度條的當前值爲num+value的和 $("#p").progressbar("setValue",(value+num)); } } //定拉按鈕，同時提供單擊事件 $("#startID").click(function(){ //每隔300毫秒執行update方法 timeID = window.setInterval("update()",300); //按鈕失效 $(this).attr("disabled","disabled"); }); </script>
複製代碼
Window窗口
<input type="button" value="打開窗口1" id="open1"/>
<input type="button" value="關閉窗口1" id="close1"/>
<div style="margin:600px"></div>
<div id="window1"></div>
<script type="text/javascript"> //定位打開窗口1按鈕，同時添加單擊事件 $("#open1").click(function(){ //打開窗口1 $("#window1").window({ title : "窗口1", width : 840, height : 150, left : 200, top : 100, minimizable : false, maximizable : false, collapsible : false, closable : false, draggable : false, resizable : true, href : "/js-day06/empList.jsp" }); }); </script>
<script type="text/javascript"> //定位關閉窗口1按鈕，同時添加單擊事件 $("#close1").click(function(){ //關閉窗口1 $("#window1").window("close"); }); </script>
複製代碼
Dialog對話框窗口
<input type="button" value="打開對話框" id="open"/>
<div style="margin:600px"></div>
<div id="dd"></div>
<script type="text/javascript"> $("#open").click(function(){ $("#dd").dialog({ title : "對話框", width : 300, height : 400, left : 200, top : 100, minimizable : false, maximizable : false, collapsible : false, closable : false, draggable : false, resizable : true, toolbar : [ { text:'編輯', iconCls:'icon-edit', handler:function(){alert('edit')} }, { text:'幫助', iconCls:'icon-help', handler:function(){alert('help')} } ], buttons : [ { text:'提交', handler:function(){alert("提交");} }, { text:'關閉', handler:function(){ //關閉對話框 $("#dd").dialog("close"); } } ], href : "/js-day06/easyui/10_form.html" }); }); </script>
複製代碼
Messager消息窗口
<input type="button" value="警告框"/><br/>
<input type="button" value="確認框"/><br/>
<input type="button" value="輸入框"/><br/>
<input type="button" value="顯示框"/><br/>
<div style="margin:100px"></div>
<script type="text/javascript"> //定位全部的button按鈕，同時提供單擊事件 $(":button").click(function(){ //獲取value屬性值 var tip = $(this).val(); //去空格 tip = $.trim(tip); //若是警告框的話 if("警告框" == tip){ $.messager.alert("警告框","繼續努力","warning",function(){ alert("關閉"); }); }else if("確認框" == tip){ $.messager.confirm("確認框","你確認要關閉該確認框嗎?",function(value){ alert(value); }); }else if("輸入框" == tip){ $.messager.prompt("輸入框","你期希的月薪是多少?",function(sal){ if(sal == undefined){ alert("請輸入月薪"); }else{ if(sal<6000){ alert("你的謙虛了"); }else if(sal < 7000){ alert("你加點油了"); }else{ alert("你很不錯了"); } } }); }else if("顯示框" == tip){ $.messager.show({ showType : "slide", showSpeed : 500, width : 300, height : 300, title : "顯示框", msg : "這是內容", timeout : 5000 }); } }); </script>
複製代碼
Tree樹
<ul id="treeID"></ul>
<script type="text/javascript"> $("#treeID").tree({ url : "/js-day06/json/pro.json" }); </script>
複製代碼
既然咱們用到了JSON，那麼咱們能夠在手冊看它須要的格式是什麼：
[
{
"id":1,
"text":"廣東",
"state":"closed",
"children":[
{
"id":11,
"text":"廣州" ,
"state":"closed",
"children":[
{
"id":111,
"text":"天河"
},
{
"id":112,
"text":"越秀"
}
]
},
{
"id":12,
"text":"深圳"
}
]
},
{
"id":2,
"text":"湖南"
}
]
複製代碼
若是您以爲這篇文章幫助到了您，能夠給做者一點鼓勵
相關文章
- 1. jquery-easyUI第一篇【介紹、入門、使用常用的組件】
- 2. jQuery經常使用插件介紹
- 3. EasyUI經常使用組件（基礎）
- 4. EasyUI組件使用
- 5. Spring Cloud快速開發入門第一篇---SpringCloud前言及其經常使用組件介紹概覽
- 6. Jmeter使用入門篇--Jmeter介紹
- 7. 開發經常使用經常使用插件介紹
- 8. 一、jQuery的使用入門
- 9. 第五篇、經常使用的SQL語句和函數介紹
- 10. Easyui入門**** 第11集---Window的使用
- 更多相關文章...
- • TortoiseSVN 使用教程 - SVN 教程
- • Docker 容器使用 - Docker教程
- • Java Agent入門實戰（一）-Instrumentation介紹與使用
- • Java Agent入門實戰（三）-JVM Attach原理與使用
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
