基於jQuery的JavaScript UI設計

jQuery UI 是以 jQuery 為基礎的開源 JavaScript 網頁使用者介面程式碼庫，是jquery官方推出的配合jquery所使用的使用者介面元件集合！包含了許多的介面操作功能。

無論是jQuery UI 或jQuery的EasyUI框架都能夠幫助你，讓你建立你的網頁很容易。

 

jQuery UI 或easyui是一個使用者介面外掛程式集合jQuery的基礎。

使用jQuery UI 或easyui你不需要寫很多JavaScript程式碼，你通常定義寫一些HTML標記的使用者介面。

jQuery UI 或easyui是很容易的，但功能強大。

 

使用jQuery UI或easyui你都需要在你的頁面中加入一些js和css文件，當然，你也可以自己去定義自己需要的css。

jQuery UI和easyui都是一些我們可以拿來使用的工具，他們都封裝好了，他們經過了不同版本的編寫，讓我們在使用的時候不用去考慮瀏覽器兼容性，免去了在寫頁面時候最容易出現的不同瀏覽器間不能夠相容的問題，可以直接使用，是真正的「拿來主義」。

 

 

jQuery UI和easyui他們所提供的插件的功能有所不同。

jQuery UI所提供的功能共有三大類，其中包括Interactions，Widgets，和Effects。

Interactions中包含Draggable，Droppable，Resizable，Selectable，Sortable這些功能供我們選擇，

Widgets類別中包含Accordion，Datepicker，Dialog，Progressbar，Slider，Tabs這些不同的功能。

Effects類別包含Add Class，Remove Class，Animate，Effect，show，Switch Class，Toggle，Toggle Class這些功能。

每一個功能都會有不同的屬性呈現不同的效果，稍後我會具體的講解每一個功能的用法。

 

而easyui共包含7大類。

第一類是Base，包含EasyLoader，Draggable，Droppable，Resizable四個面向。

第二類是Layout，包含Panel，Tabs，Accordion，Layout四個面向。

第三類是Menu and Button，包含Menu，Link Button，Menu Button，Split Button四個創建按鈕的效果。

第四類是Form，包含Form，ComboBox，ComboTree，NumberBox，ValidateBox，DateBox，Calendar這幾個不同的表單需求。

第五類是Window，包含window，Dialog，Message。

第六類是DataGrid and Tree， 包含Pagination，DataGrid，Tree。

 

 

 

 

我們先來看看jQuery UI各個功能的具體用法。

我們從Interactions中的Draggable開始。

"EN-US">Draggable有較多的效果，從它所給出方法的參數不同，可以達到不同的效果，它所要用到jquery-1.3.2.js，ui.core.js，ui .draggable.js這三個js檔。它所給的方法是draggable()，給它不同的參數，它可以實現種不同的效果。

我們先看一下它是第一個效果(預設屬性)（Default functionality），可以在頁面中用滑鼠隨意拖曳一個DOM element在你可以看見的範圍內，它所用的程式碼為：

       $(function() {

          

很簡單，只要這幾行程式碼你就可以實作一個javascript特效。

我們再看第二個效果（Events）下面這段程式碼：

可能程式碼比對你的程式碼也拖動更多了多少次DOM了距離。

它透過在可拖曳的方法內增加多少個儲存計數來儲存開始和結束時的次數，以及你總共拖曳的距離。

我們再看第三個效果（約束移動），程式碼：

       $(function() { is : 'y' });

              $("#draggable2 ").draggable({ axis: 'x' }); 🠎  

              $("#draggable3").draggable({ containment: '#containment-wrapper', scroll: ({ containment: '#demo-frame' }) ;

              $("#draggable5").draggable({ containment: 'parent' });

  方法不同的參數，實現不同的效果。第一個方法呼叫是讓DOM只能夠上下移動，第二個方法呼叫實作讓DOM只能夠左右移動，第三個方法呼叫實作讓DOM只能在給它規定的box內移動，第四個方法呼叫就實作可以在box外移動，而第五個方法呼叫則是讓DOM只能在它的父節點內移動。

第四個效果（Delay start），程式碼：

       

      draggable").draggable({ distance: 20 } );

              $("#draggable2").draggable({ delay: 1000 }); ).

       });

       

它給的參數有一定的限製作用，例如distance:20，就表示你必須要拖曳20px以上它才會有效果，否則它是不會讓你拖曳的，而delay則是延時，是說你要等到1000ms以後你才能夠拖曳它。

第五個效果（Snap to element or grid）

       

       

              $("#draggable2").draggable({ snap: '.ui-wid able3").draggable({ snap: ' .ui-widget-header', snapMode: 'outer' });

              $("#draggable4").dra  $("#draggable5").draggable ({ grid: [80, 80] });

       });

       

第一個參數是DOM.在大的box邊緣，裡外側都可，第三個參數讓DOM只能吸附在box的外側，而裡側沒有效果，第四個參數是讓DOM只能移動到20,20的倍數這樣的地方，第五個參數和第四個參數是一樣的，只是給的數據不同。

第六個效果（Auto-scroll）

       $(function() {

true });

              $("#draggable2").draggable({ scroll: true, scrollSensitivity: 100 ); draggable({ scroll: true, scrollSpeed: 100 });

       }) ;

 

 

第七個效果（Revert position）

第一個DOM可以正常的拖曳，第二個DOM拖曳後會回到原來的位置，helper屬性上面講過了，opacity屬性則是設定DOM的透明度。第三個DOM在你實施拖曳的時候，會顯示一個I'm a custom helper的DIV給你。

而後面三個DOM，每拖曳一個DOM會讓被拖曳的DOM在其它的兩個DOM外層，也就是最上面。

第九個效果（Drag handle）

       $(function() {

p' }) ;

              $("#draggable2").draggable({ cancel: "p.ui-widget-header" }); ;

       });

在這兩個DOM中每個DIV中都嵌套一個p標籤，每個handle屬性顯示滑鼠在點擊在P標籤上才能夠拖曳DOM，而第二個cancel則表示要點選在不是P標籤的DIV才能夠拖曳DOM。

第十個效果（Cursor style）

第一個DOM});

第一個DOM中的參數是說話在水平方向上移動，會先向相反的方向移動56px，垂直方向上也是一樣。第二個DOM說明在小範圍移動或雙擊時會讓DOM往上移動-5,左移動-5,實際上就是向下和向右各移動5,第三個DOM是在小範圍拖曳或雙擊時會向上移動。

第十一個效果（Draggable + sortable）

       $(function() {🠎

                     revert: true

              });

                       connectToSortable: '#sortable',

                         revert: 'invalid'

              })🎠 "ul, li").disableSelection();

       });

以上程式碼是讓頁面中的ul和li元素在拖曳的同時呈現出sortable的效果。

 

第二個介紹的是"EN-US">droppable，它包含有六個效果，它分別要用到"EN-US">jquery-1.3.2.js， "EN-US"> ui.core.js， "EN-US">ui.droppable.js， "EN-US">ui.draggable.js這四個js檔。

 

先看第一個（Default functionality）

       $(function(

      

              $("#draggable").draggable();

                       drop: function(event, ui) {

            -highlight').find('p').html('Dropped!');

                      

       });

上面程式碼表示當DOM拖曳到指定的DOM中，該DOM背景色變，增加一個class效果。

第二個（Accepted elements），代碼：

       $(function() { , #draggable-nonvalid").draggable ();

 

              $("#droppable").droppable({

                     accept: '#draggable',

                     activeClass: 'ui-state-hover',

                     hoverClass: 'ui-state-active' 、

                     drop: function(event, ui)   $(this).addClass('ui-state-highlight').find('p').html('Dropped!');

            });

 

       });

上面程式碼分別給兩個DOM都用了Draggable方法讓其可以拖曳，然後將其第二個使用了其第二個程式碼（MM.並且給了hoverCalss，讓拖曳到指定的DOM上浮動時候也產生效果，並且當放開滑鼠後再次產生一個效果。

第三個（Prevent propagation），代碼：

       $(function() { ").draggable();

              $("#droppable, #droppable-inner").droppable({

   

                     hoverClass: 'ui-state-active',

🎠  ui) {

                            $(this).管                       return false;

               });

 

              $("#droppable2, #droppable2-inner").droppable({

                     greedy: true,

                     activeClass: 'ui-state-hover',

                     hoverClass: 'ui-state-active',

                     drop: function(event, ui) {

                            $(this).addClass(' ui-state-highlight').find('> p').html('Dropped!');

                   

 

       });

先給第一個DOM可以拖曳的效果，然後給第二個大DOM和第三個DOM都呼叫droppable()方法，所不同的是第二個方法中在呼叫drop時候回傳一個false,而第三個不返回，第三個DOM在一開始就調用greedy:true,它們分別表示了，當將第一個DIV拖動到同級的第二個DIV的時候，如果拖動到它同級的DIV上時，只有外層DIV會產生效果，如果拖曳到內層的DIV時，則整個DIV都產生效果，也就是包含外層​​同級的DIV，而第三個函數呼叫後只是你拖曳到哪個層的DIV，哪一層的DIV產生效果。

第四個（Visual feedback）代碼：

       $(function() {

 

              $(" #droppable").droppable({

                     hoverClass: 'ui-state-active  drop: function(event, ui) {

                         ('p').html('Dropped!');

                     }         

              $("#draggable2").draggable( {

                     accept: "#draggable2",

     、

                     drop: function(event, ui)  $(this).addClass('ui-state-highlight') .find('p').html('Dropped!');

                      

       });

這也同樣讓其中兩個DOM可以拖曳讓另外兩個相對應的DOM上，這次相對應的兩個DOM分別調用了hoverCalss和activeClass以產生不同的效果。他們都是在滑鼠拖曳DOM浮動在其上所表現出的不同。

第五個（Revert draggable position）代碼：

同樣，給其中兩個DOM可拖曳效果，然後分別拖曳兩個DOM到指定的DOM上。他們在呼叫draggable（）方法時就給了不同的revert參數，讓其分別拖曳到指定DOM上產生不同效果，第一個效果是拖曳到指定的DOM上後，它回到原來的位置，而指定的DOM也產生相應的效果，第二個效果是當拖動到指定的DOM上後，指定DOM產生相應效果，當把其再拖出時，它返回到原來所在DOM的位置。

第六個（Simple photo manager），代碼：