介紹一款輕量級js控制元件：easy.js

y_keven發表於2014-04-23
JS控制元件








easy.js 元件快速入門

在使用 easy.js 的元件之前，如果能花上幾分鐘看看下面的一些簡單的入門指南，在使用元件的時候你會更加的得心應手。

簡單性

easy.js 的元件在 UI(介面) 層面儘量保持簡單，開發者可以很方便的通過修改 CSS 樣式就可以輕鬆定製自己想要的樣式。

使用一個元件通常情況下只需要寥寥幾行 JS 程式碼。

一致性

元件在介面設計、命名規則上都儘可能的保持一致。通常，你只要使用過任意一個元件，那麼其他元件也很容易上手。

模組化

每個元件都是一個獨立的符合 AMD 規範的模組，都依賴 easy.js 的核心庫，在使用時都可以通過 E.use 來進行載入。

名稱空間

所有元件的名稱空間都是 E.ui，在元件載入完後都可以通過 E.ui.xxxx 來訪問。

例項化

在使用元件時都需要通過 new 關鍵字來例項化，元件類的首字母都是 大寫。

例項化時，第一個引數 都是必需的，該引數通常都是設定需要例項化某個/組 DOM 元素。該引數可以是選擇器字串、DOM 元素以及 easyJS Object 的物件。

例項化時，第二個引數 都是可選的，該引數是一個多選可配置形式的 Object 物件。

事件處理

元件在例項化後都可以通過 on 方法來為元件繫結事件，同樣，也可以通過 un 方法來解除安裝事件。各元件支援的事件型別可以在詳細的說明文件中看到。在多選形式的配置引數中，除了可能存在 init 回撥函式，不會有任何其他的回撥。

銷燬例項

元件例項可以通過 destroy 方法進行銷燬。

Dialog 對話方塊元件

Define in : dialog.js

該元件用於建立一個 Dialog 對話方塊，對話方塊裡可以包含任何你想新增的內容。對話方塊的 HTML 結構是元件自動構建的，只需傳遞一個簡單的文字就可以建立一個對話方塊，當然，你也可以傳遞自定義的 HTML 結構。對話方塊預設的樣式是 windows 8 的簡潔風格，你也可以很方便的自定義對話方塊的樣式。

Dialog( target, [ options ] )

依賴
JS : 依賴 Drag 元件
CSS : 依賴樣式
HTML : 元件自動構建
引數
  • target
    String|
    Element|
    easyJS Object
    必需

    target 可以是選擇器字串、DOM 元素，也可以是 easyJS Object，僅匹配第一個元素，該元素用於觸發事件來顯示對話方塊。

  • options
    Object
    可選

    多選形式的可配置引數。

下表列出多選可配置形式的引數的詳細說明。

引數 資料型別 預設值 說明
autoClose Number null

自動關閉對話方塊的時間。
content String|html String Hello world : )

對話方塊的內容，可以是 HTML 字串。
drag Boolen true

是否允許拖拽對話方塊。
dragHandle String|Element|easyJS Object null

自定義對話方塊的拖拽區域。
effects String null

動畫效果的名稱。

fade 淡入淡出效果。

slide 由頂部向中間快速滑動的效果。

zoom 縮放效果。
elem String|Element|easyJS Object null

自定義對話方塊的HTML結構。
fixed Boolean true

是否固定定位，為 false 時則相對 body 進行絕對定位。
height String auto

對話方塊的高度，需帶單位。
left String null

設定對話方塊的 x 軸定位值，需帶單位，預設為水平居中。
lock Boolean false

是否鎖定對話方塊，鎖定對話方塊時沒有關閉按鈕，也不能使用 ESC 鍵來關閉。
noFn Function null

取消按鈕的回撥函式，該回撥函式的 this 指向對話方塊元素，如果該函式返回 false，將不會關閉對話方塊。未設定該引數將不顯示取消按鈕。同時關閉按鈕也會呼叫該回撥函式。
noText String 取消

取消按鈕的文字內容。
overlay Boolean true

是否顯示遮罩層。
title String null

對話方塊的標題，未設定該引數將不顯示對話方塊的標題欄。
top String null

設定對話方塊的 Y 軸定位值，需帶單位，預設為垂直居中。
topWindow Boolean false

如果對話方塊定義在一個 iframe 中，是否允許其在頂級 window 中顯示，如果需要在頂級視窗中顯示，需要確保頂級視窗中有對話方塊的樣式。
trigger String click

觸發顯示對話方塊的事件，支援自定義事件。
width String 320px

對話方塊的寬度，需帶單位。
yesFn Function null

確定按鈕的回撥函式，該回撥函式的 this 指向對話方塊元素，如果該函式返回 false，將不會關閉對話方塊。未設定該引數將不顯示確定按鈕。
yesText String 確定

確定按鈕的文字內容。
zIndex Number 9999

對話方塊的定位層級。
方法
  • close

    關閉對話方塊例項，返回例項便於鏈式呼叫。

  • destroy

    銷燬對話方塊例項。

  • on

    對對話方塊例項繫結事件，該方法接受2個引數，第一個引數是事件型別，第二個引數是事件處理器，返回例項便於鏈式呼叫。

  • un

    解除安裝對話方塊例項的事件。該方法接受1個事件型別的引數。返回例項便於鏈式呼叫。

下表列出了支援的事件型別。

事件型別 說明 事件物件
open

對話方塊顯示時觸發的事件。

event.target 對話方塊元素。
close

對話方塊關閉時觸發的事件。

event.target 對話方塊元素。

在使用 Dialog 元件前，對其進行載入。

1
2
3
E.use( 'dialog', function(){
    // 在回撥中例項化對話方塊
});

Dialog 元件需要依賴樣式。

1
2
3
4
5
6
7
8
9
10
11
12
.eui_overlay{ background:#333; opacity:0.6; filter:alpha(opacity=60); }
.eui_dialog .dg_wrapper{ background:#3498f0; box-shadow:0 0 4px rgba(0, 0, 0, 0.4); position:relative; padding:5px; border:1px solid #3571a4; }
.eui_dialog .dg_header{ height:27px; line-height:22px; overflow:hidden; color:#fff; font-weight:700; text-indent:5px; }
.eui_dialog .dg_btn_close{ width:18px; height:18px; line-height:18px; overflow:hidden; float:right; font-size:22px; font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; color:#fff; text-decoration:none; text-align:center; font-weight:400; position:absolute; top:6px; right:6px; background:#3498f0; }
.eui_dialog .dg_btn_close:hover{ background:#c75050; color:#fff; }
.eui_dialog .dg_content{ padding:25px 10px; line-height:22px; border:1px solid #3c79ad; background:#fff; }
.eui_dialog .dg_footer{ width:300; padding:10px; padding-top:0; overflow:hidden; _zoom:1; border:1px solid #3c79ad; border-top:0 none; margin-top:-1px; background:#fff; }
.eui_dialog .dg_btn_no,
.eui_dialog .dg_btn_yes{ padding:0 18px; *padding:0 9px; height:20px; line-height:20px; background:#eaeaea; cursor:pointer; float:right; margin-left:10px; font-family:"Microsoft yahei",arial; font-size:12px; outline:none; color:#333; text-decoration:none; border:1px solid #acacac; }
.eui_dialog .dg_btn_yes{ color:#000; border-color:#3399ff; }
.eui_dialog .dg_btn_yes:hover,
.eui_dialog .dg_btn_no:hover{ background:#e0effc; }
例子1

建立一個對話方塊。

1
2
3
4
5
6
7
8
9
10
11
new E.ui.Dialog( '#runDemo1', {
    title : '對話方塊標題',
    content : '對話方塊內容',
    yesFn : function(){
        alert( '我是確定按鈕，回撥函式返回false時不會關閉對話方塊。' );
        return false;
    },
    noFn : function(){
        alert( '我是取消按鈕' );
    }
});

執行

例子2

建立一個對話方塊，不要遮罩層，傳遞 HTML 字串作為內容。

1
2
3
4
new E.ui.Dialog( '#runDemo2', {
    content : '不設定標題，直接不顯示標題欄',
    overlay : false
});

執行

例子3

建立一個對話方塊，並設定其顯示和隱藏的動畫效果為淡入淡出。

1
2
3
4
5
new E.ui.Dialog( '#runDemo3', {
    title : '對話方塊的動畫效果',
    content : '顯示和隱藏對話方塊的動畫效果為淡入淡出。',
    effects : 'fade'
});

執行

例子4

建立一個對話方塊，並設定其顯示和隱藏的動畫效果為滑動。

1
2
3
4
5
new E.ui.Dialog( '#runDemo4', {
    title : '對話方塊的動畫效果',
    content : '顯示和隱藏對話方塊的動畫效果為滑動。',
    effects : 'slide'
});

執行

例子5

建立一個對話方塊，並設定其顯示和隱藏的動畫效果為縮放。

1
2
3
4
5
new E.ui.Dialog( '#runDemo5', {
    title : '對話方塊的動畫效果',
    content : '顯示和隱藏對話方塊的動畫效果為縮放。',
    effects : 'zoom'
});

執行

例子6

建立一個對話方塊，設定其絕對定位，並設定其在左上角顯示。

1
2
3
4
5
6
new E.ui.Dialog( '#runDemo6', {
    title : '對話方塊的絕對定位',
    content : '設定對話方塊在左上角顯示。',
    top : '100px',
    left : '100px'
});

執行

例子7

自定義對話方塊的HTML結構。

1
<div id="testBox" style="width:120px; height:100px; background:#fff; text-align:center; line-height:100px; display:none;">Press Esc close.</div>
1
2
3
4
new E.ui.Dialog( '#runDemo7', {
    elem : '#testBox',
    dragHandle : '#testBox'
});

執行


easy.js官網：http://easyjs.org/docs/components/index.html

轉載請指明：http://blog.csdn.net/yangkai_hudong

相關文章