Archive


Category: EasyUI

  • [EasyUI] EasyUI功能模組介紹–視窗拖動Draggable

    本文介紹EasyUI的視窗拖動功能Draggable 第一種方法 使用class方式載入功能,加入下面橘色區塊 <div id=”box” class=”easyui-draggable” style=”width:400px;height:200px;background:cyan”>                 dialog content. </div> 第二種方法 使用js方式載入功能 js檔加入 $(function()     $(‘#box’).draggable(); }); html檔要有id box的區塊 <div id=”box” style=”width:400px;height:200px;background:cyan”>                 dialog content. </div> 下面介紹Draggable的屬性 draggable({ revert : true }); //拖放後放開會回到原地 draggable({ cursor : text }); //設定拖放時的滑鼠指標樣式 draggable ({ handle : ‘#id’ }); //設定可以提供拖放的區域 draggable ({ […]

  • [EasyUI] EasyUI加載功能模組控制

    本文主要是針對EasyUI使用js呼叫操作時,關掉自動加載,改成手動加載,增加對程式的控制 所以我們會在index.js加上 $.parser.auto = false; 這樣就關掉了EasyUI的自動加載,僅能透過在程式裡加入功能加載指令來啟用 $.parser.auto = false; $(function(){     $.parser.parse(); }); 像上例第一行關掉自動加載後,透過 $.parser.parse(); 來加載所有的功能模組. 若是只要加載特定的功能模組時 $.parser.auto = false; $(function(){     $.parser.parse(‘#box‘); }); 這樣就會加載id為box的下功能模組,但要注意得是這個id必須是功能模組父類的id <div id=”box”>             <div class=”easyui-dialog” style=”width:400px;height:200px”                 data-options=”title:’My Dialog’,collapsible:true,iconCls:’icon-ok’,onOpen:function(){}”>                     dialog content.             </div> </div> 而在控制方面EasyUI還有提供了一個 $.parser.onComplete 來執行功能模組載入完成後再執行的方法 […]

  • [EasyUI] EasyUI加載功能模組的方法

    當你將EasyUI的檔案放到WEB的root後 http://charleslin74.pixnet.net/blog/post/456534926 並且在檔頭加入了必要的js及css載入 http://charleslin74.pixnet.net/blog/post/456544466-%5beasyui%5d-easyui%E4%BD%BF%E7%94%A8%E6%99%82%E4%B8%BB%E8%A6%81%E8%BC%89%E5%85%A5%E6%AA%94%E6%A1%88–js-css 這時你就能在網頁內容裡來加入EasyUI的功能模組了,而加入功能模組的方法有二 第一種是使用class的方法來達到 當你在html裡使用class標籤,class名使用 “easyui-xxxx” 這種格式,前面以easyui為開頭,後面是功能模組名,中間加上”-“ 這樣EasyUI就會認得並解析它 <div class=”easyui-dialog” style=”width:400px;height:200px”             data-options=”title:’My Dialog’,collapsible:true,iconCls:’icon-ok’,onOpen:function(){}”>                 dialog content. </div> 例如上例中的 class=”easyui-dialog“ 第二種是在js裡面去呼叫及操作,例如我們在html裡有個div,而它的id是box <div id=”box” style=”width:400px;height:200px”             title=”My Dialog”>                 dialog content. </div> 到這裡還是一般的html,沒有EasyUI的出現,而我們將EasyUI寫在js/index.js裡,內容如下 $(function(){     $(‘#box‘).dialog(); }); 上例中,#box就是指id是box的區塊,dialog()就是EasyUI的對話功能模組,這樣就能區動EasyUI的運作了. 而EasyUI另外還有一種智能載入的方法,它是由程式設定要載入的功能,EasyUI會自動載入該功能及其相依功能 所以比全載的檔案較小,網路流量也較小,對流量很計較的情形可以考慮使用,做法如下 <script type=”text/javascript” src=”easyui/jquery.min.js”></script> <script type=”text/javascript” src=”easyui/easyloader.js”></script> […]

  • [EasyUI] EasyUI使用時主要載入檔案–js css

    在使用EasyUI時會需要載入一些js檔和css檔,這些都是EasyUI運行時會使用到的一些程式庫 大致如下 <script type=”text/javascript” src=”easyui/jquery.min.js”></script> <script type=”text/javascript” src=”easyui/jquery.easyui.min.js”></script> <script type=”text/javascript” src=”easyui/locale/easyui-lang-zh_TW.js”></script> <script type=”text/javascript” src=”js/index.js”></script> <link rel=”stylesheet” type=”text/css” href=”easyui/themes/default/easyui.css” /> <link rel=”stylesheet” type=”text/css” href=”easyui/themes/icon.css” /> jquery.min.js 是JQuery的核心程式,EasyUI是基於它來運行的,所以必須載入 jquery.easyui.min.js 是EasyUI的核心程式,它就是EasyUI的本體,所以一定載入 easyui-lang-zh_TW.js 是EasyUI的語言套件,所支援的語言放在easyui\locale的目錄內,依據需求來進行載入 easyui.css 是EasyUI的整體顯示風格的設定,easyui/themes裡包含著多個顯示風格,我們選擇的是default,你可以依據喜好將default換成其他的風格,每個風格裡都有相對應的easyui.css icon.css 是EasyUI的小圖標的設定,這個是各種風格都共用的,當然你可以自行開發改變. js/index.js 目錄名稱設為js(可以變更為自己喜好的目錄名),index.js是可以放自行開發的js內容,我們對EasyUI的呼叫及操控會集中在這裡   本文參考李炎恢EasyUI視頻實作,記錄步驟備忘.

  • [EasyUI] EasyUI的安裝

    EasyUI是一套使用JQuery的UI工具,可以節省開發時間,先說明如何安裝到我們的WEB上面 1. 請先下載EasyUI 官網 http://www.jeasyui.com/ 在上方的功能列中按「Download』,進入下載頁面 裡面有免費版和商用版可以下載,我們選免費版(Freeware Edition),按下「Download』 這時它就會下載最新版的EasyUI到你的電腦,如果你想下載舊版本,也可以選擇Other Versions,裡面有各種版本,依需求下載. 2. 找到下載的zip檔,將它解壓縮. 3. 把解壓縮後的整個目錄(例如 jquery-easyui-1.5)改成 easyui,這樣比較簡潔. 4. 將改名後的easyui目錄整個複製到你的WEB root資料來下. 5. 在WEB root資料夾下新增一個index.html的文件,並將內容改成以下 <!DOCTYPE html> <html>     <head>         <title>jQuery Easy UI</title>         <meta charset=”UTF-8″ />         <script type=”text/javascript” src=”easyui/jquery.min.js”></script>         <script type=”text/javascript” src=”easyui/jquery.easyui.min.js”></script>         <script type=”text/javascript” src=”easyui/locale/easyui-lang-zh_TW.js”></script>         <link rel=”stylesheet” […]