API分析——Jquery UI Dialog

時間 2019-12-10

標籤 api 分析 jquery dialog 欄目 JQuery 简体版

原文原文鏈接

1.閱讀API文檔的通常方法？

一般地， API由三部分構成：屬性、方法、事件。jquery

屬性表示參數配置，做爲一個組件的微調，或者功能的開啓與關閉；
方法表示組件可以發生的動做，或者組件的狀態監測；
事件表示觸發，即提供一個觀測點，當觸碰到觀測點時，將產生通知或函數回調；

這三類幾乎覆蓋了可能的用戶動做、數據傳遞。api

2.如何看Jquery UI Dialog的API？

2.1瞭解對話框的構成

要掌握一個東西，就必須先了解他，就像吃飯睡覺那麼天然，才能更好地掌握。app

對於對話框，咱們也要作一樣的瞭解。函數

咱們都知道對話有以下內容：動畫

彈出，關閉，是否爲模式，高度，寬度，標題，是否可以拖拽，。。。ui

用如下兩幅圖從結構上把握一個對話框：url

之因此說從結構上，是由於咱們組織知識的方法不少，可是瞭解一個物體的結構體系的話，會得到一種總體的全局觀，會促使咱們從意識上加深影響和理解。spa

從上面兩個圖分析能夠得出：設計

對話框 => (標題欄，內容，按鈕面板) code

標題欄 => (標題文本，關閉窗口按鈕)

按鈕面板 => (按鈕集)

事實上，這是一棵典型的樹結構，符合程序設計思想——自定向下，也符合HTML的語法結構——Tree。

2.2API列表分析

網址：http://api.jqueryui.com/dialog/

從以上咱們知道API主要分爲三個組成部分（屬性、方法、事件），如何使用它們？

——關鍵在於掌握其「初始化」與「讀寫」（又叫「訪問」）。

2.3Options內容簡介與讀寫

內容：高度、寬度、顯示（帶動畫）、隱藏（帶動畫）、是否支持ESC鍵、是否爲模式、關閉按鈕的文本、是否拖動、標題、是否能改變大小。。。

Options以對象的方式進行初始化，如

$( ".selector" ).dialog({
    appendTo: "#someElem"
});

$( ".selector" ).dialog({  closeOnEscape: false});

讀寫方式，字符串形式：

//Getter
$( ".selector" ).dialog( "option", "appendTo", "#someElem" );
//Setter
var appendTo = $( ".selector" ).dialog( "option", "appendTo" );

// Getter
var closeOnEscape = $( ".selector" ).dialog( "option", "closeOnEscape" );
 // Setter
$( ".selector" ).dialog( "option", "closeOnEscape", false );

2.4Methods內容簡介與調用

內容：打開、關閉、銷燬、獲取實例、窗口頂層、設置屬性

Methods以字符串的形式調用

$( ".selector" ).dialog( "close" );

$( ".selector" ).dialog( "moveToTop" );

2.5 Events

內容：按照JS中事件的約定，就是爲了回調而生，是一種典型的回調模式。

拖動、改變大小、關閉先後、打開、建立

以函數對象的方式定義：

$( ".selector" ).dialog({  beforeClose: function( event, ui ) {}});

3 Dialog 的CSS Theme

Additionally, when the modal option is set, an element with a ui-widget-overlay class name is appended to the <body>.

Theme設計分析：

按照層級地，經過「-」表示每一分級

ui表示最高級，全部CSS的根Root；

dialog表示部件，Widget

titlebar表示部件的構成；
。。。遞歸地構成。。。直到一個最小的一個HTML粒度

4 More

4.1用途

1）信息提示——Information Notice

2）錯誤提示——Error Report

3）確認——Confirm DoSomething

4）表單輸入——Form Input

4.2 封裝

常見的封裝：

showDialog(url,title,width,height,model, onok, onclose,opentype)

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。