easyui(一) 初始easyui
分享使我快樂。哈哈~
--WZY
一、什么是easyui？
學(xué)習(xí)一個東西，最重要的是知道它的定位(是干嘛的，基本的用法是什么，快速入門)，其實easyui也非常簡單，不要覺得很難。
easyui就是一個前端框架，JQuery EasyUI是一組基于jQuery的UI插件集合體,而jQuery EasyUI的目標(biāo)就是幫助web開發(fā)者更輕松的打造出功能豐富并且美觀的UI界面.開發(fā)者不需要編寫復(fù)雜的javascript,也不需要對css樣式有深入的了解,開發(fā)者需要了解的只有一些簡單的html標(biāo)簽，一大段廢話，通俗一點，就是簡化開發(fā)，它是一個框架，和jQuery只是一個js類庫，
?
easyui框架提供了哪些東西讓我們用？
看一下easyui的api文檔就知道了給我們提供了哪些東西？是如何的方便
看標(biāo)記的內(nèi)容，是我們比較常見的，按鈕(easyui做的肯定比我們普通按鈕什么都沒有的更好)、日歷、對話框窗口等等，并且對于每一個組件，easyui都會給出我們例子，供我們參考，所以，自學(xué)也完全沒有問題。哈哈~
?? 為什么后臺發(fā)開人員還需要用easyui這種前端框架？不是有前端開發(fā)人員嗎？
如果公司里只有“美工”，沒有前端人員，所以一般是程序員兼職前端，所以一 般會找一個好用且功能全的js UI框架（當(dāng)然，還有免費），這樣頁面基本就不用花費太多功夫了，與其同名的前端框架還有一個bootstrap，在學(xué)習(xí)玩easyui之后就可以正式學(xué)習(xí)一下了。
?
二、如何使用easyui?
soeasy~ ? 通過實現(xiàn)resizable組件效果來講解(教會如何看文檔和例子)
第一步：將下載的整個easyui文件賦值到項目下。
解壓之后復(fù)制
查看easyui的目錄結(jié)構(gòu)
?
第二步：現(xiàn)在就可以使用easyui了。感覺無從下手，那就查看文檔
查看resizable文檔內(nèi)容。
還是不懂，在easyui/demo/resizable/basic.html中查看內(nèi)容(看easyui給出的例子，怎么用，在對照文檔就懂了)
給出的例子，重點就兩個，6-10行，導(dǎo)入了js類庫和一些css。 16行關(guān)鍵代碼就是文檔中第一個使用案例。還是不懂，沒關(guān)系，下面就解釋給你聽。
?
2.1、簡單實現(xiàn)resizable組件的效果的兩種方式
方式一：html方式
原理：頁面加載完畢之后,EASYUI的文件在頁面上尋找那些標(biāo)簽的class名字為easyui-開頭,找到之后,將eayui-”name”,name拿到,拿到之后將這些標(biāo)簽處理為(渲染為)可以
拖動改變大小的效果.
<!--resizable實現(xiàn)的第一種方式：html實現(xiàn)原理:class：easyui-resizable頁面加載完畢之后,easyui的主文件會掃描頁面上所有的HTML標(biāo)簽,看那些標(biāo)簽的class的值以easyui-開頭,截取easyui-之后的部分"resizable",那么easyui的主文件就將當(dāng)前的這個標(biāo)簽處理為"resizable"效果.將當(dāng)前的標(biāo)簽渲染為resizable組件data-options：該resizable組件的屬性。具體看文檔，后面詳細講解style:div的一些屬性width:200px 該div寬度占200像素height:150px ...高度占150像素border:1px ...邊框粗度占1像素solid:red ...邊框顏色是紅色--><div class="easyui-resizable" data-options="minWidth:50,minHeight:50" style="width:200px;height:150px;border:1px solid red;"></div> html實現(xiàn)resizable
方式二：html+js方式
原理：頁面加載完畢之后,獲取頁面上id為rr的元素,easyui的resizable函數(shù)將其處理為(渲染為)可以拖動改變大小的效果
2.2、使用resizable組件的屬性的兩種方式
方式一：html方式
<!--resizable實現(xiàn)的屬性信息講解(HTML)data-options：該resizable組件的屬性。結(jié)合文檔的注釋disabled:表示是否禁用大小調(diào)整功能，true：禁用 false:不禁用(默認)handles:申明調(diào)整大小的方向，n, e, s, w, ne, se, sw, nw, alln:north 北部 e:east 東部 w:west 西部 s:south 南部ne:東北，也就是右上角 se、sw、nw類似 all:任意，全部edge:邊框邊緣大小，這個看注釋不好理解，就是設(shè)置能顯示拉大小的那個箭頭的范圍，默認是5。maxWidth:當(dāng)調(diào)整大小時候的最大寬度 默認10000maxHeight：當(dāng)調(diào)整大小時候的最大高度 默認10000minWidth：當(dāng)調(diào)整大小時候的最小寬度 默認10minHeight：當(dāng)調(diào)整大小時候的最小高度 默認10style:div的一些屬性--><div class="easyui-resizable"data-options="disabled:false,handles:'all',edge:30,maxWidth:400,maxHeight:400,minWidth:40,minHeight:40" style="width:200px;height:150px;border:1px solid red;"></div> html實現(xiàn)resizable的屬性
方式二：html+js方式調(diào)用屬性
<script type="text/javascript">$(function(){$("#rr").resizable({//設(shè)置resizable組件的屬性,格式看文檔中disabled:false,handles:'all',edge:30,maxWidth:400,maxHeight:400,minWidth:40,minHeight:40 });});</script> </head> <body><!--resizable實現(xiàn)的屬性信息講解(js+html)data-options：該resizable組件的屬性。結(jié)合文檔的注釋disabled:表示是否禁用大小調(diào)整功能，true：禁用 false:不禁用(默認)handles:申明調(diào)整大小的方向，n, e, s, w, ne, se, sw, nw, alln:north 北部 e:east 東部 w:west 西部 s:south 南部ne:北和東 se、sw、nw類似 all:任意，全部edge:邊框邊緣大小，這個看注釋不好理解，就是設(shè)置能顯示拉大小的那個箭頭的范圍，默認是5。maxWidth:當(dāng)調(diào)整大小時候的最大寬度 默認10000maxHeight：當(dāng)調(diào)整大小時候的最大高度 默認10000minWidth：當(dāng)調(diào)整大小時候的最小寬度 默認10minHeight：當(dāng)調(diào)整大小時候的最小高度 默認10style:div的一些屬性--><div id="rr" style="width:200px;height:150px;border:1px solid red;"></div> </body> html+js實現(xiàn)resizable屬性
?
?
2.3、resizable組件對事件的使用
只有一種方式，就是使用html+js
<script type="text/javascript">$(function(){$("#rr").resizable({onStartResize:function(){$("#dv1").html("在開始改變大小的時候觸發(fā)"); },onResize:function(){$("#dv2").html("我是開始拖動期間觸發(fā)的事件");},onStopResize:function(){$("#dv3").html("在停止改變大小的時候觸發(fā)");}});});</script> </head> <body><!--resizable實現(xiàn)的事件信息講解(HTML)onStartResize：在開始改變大小的時候觸發(fā)。onResize：在調(diào)整大小期間觸發(fā)。當(dāng)返回false的時候，不會實際改變DOM元素大小。onStopResize：在停止改變大小的時候觸發(fā)--><divid="rr"class="easyui-resizable" data-options="disabled:false,handles:'all',edge:30,maxWidth:400,maxHeight:400,minWidth:40,minHeight:40" style="width:200px;height:150px;border:1px solid red;"></div><div id="dv1"></div><div id="dv2"></div><div id="dv3"></div> </body> htm+js實現(xiàn)resizable事件的使用
?
2.4、resizable組件對方法的使用
只有一種方式：html+js
<script type="text/javascript">$(function(){ //等待頁面加載完在執(zhí)行以下代碼 $("#bt1").click(function(){ $("#rr").resizable("enable"); //enable方法啟用調(diào)整大小功能。 });$("#bt2").click(function(){$("#rr").resizable("disable"); //disable方法禁用調(diào)整大小功能。 });$("#bt3").click(function(){var obj = $("#rr").resizable("options");//options方法，返回調(diào)整大小屬性$("#dv1").html("最大寬:" + obj.maxWidth+"最大高:"+obj.maxHeight+"最小寬:"+obj.minWidth+"最小高:"+obj.minHeight+"邊緣大小:"+obj.edge+"是否不可用:"+obj.disabled+"調(diào)整方位:"+obj.handles);});});</script> </head> <body><!--resizable實現(xiàn)的組件調(diào)用方法講解(HTML+js)options 返回調(diào)整大小屬性。 enable 啟用調(diào)整大小功能。 disable 禁用調(diào)整大小功能。 --><divid="rr"class="easyui-resizable" data-options="disabled:false,handles:'all',edge:30,maxWidth:400,maxHeight:400,minWidth:40,minHeight:40" style="width:200px;height:150px;border:1px solid red;"></div><input type="button" id="bt1" value="啟用調(diào)整大小功能"/><input type="button" id="bt2" value="禁用調(diào)整大小功能"/><input type="button" id="bt3" value="返回調(diào)整大小屬性"/><div id="dv1"></div> </body> htm+js實現(xiàn)resizable的方法功能
?
效果如下
三、總結(jié)
算是對easyui的入門把。其他的組件大都類似這樣使用。不會的話就使用文檔+例子進行查看。也非常的簡單，一點都不難，只要有耐心即可。
?
轉(zhuǎn)載于:https://www.cnblogs.com/whgk/p/7106567.html
總結(jié)
以上是生活随笔為你收集整理的easyui(一) 初始easyui的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 高清晰卫星图片：东京、法兰克福机场、华盛
- 下一篇： HALCON示例程序inner_rect