1. 程式人生 > >JQuery彈出層空間——JqModal

JQuery彈出層空間——JqModal

下面是從官方網站翻譯的一點內容,也就是比較常用的幾點,如果不正確的地方還望指正,如果想察看更詳細的資料,察看後面的網址即可!

JqModal jQuery的一個外掛,用來在web瀏覽器中顯示自定義通告,對話方塊和模型視窗。它的靈活和小巧類似於一把瑞士軍刀,而且它為通用視窗框架奠定了基礎。

特徵:

1,設計友好:使用HTML+CSS佈局和設定樣式

2,翻譯者/i18n 友好沒有硬編碼的字串

3,開發者友好通過呼叫方法進行擴充套件,使任何事變為可能

4,多模型支援

5,支援拖拽和重定義大小

6,支援遠端載入視窗內容(ajaxiframes

Current Version: 2008.06.22 +r12

Download the (jqModal.js - 3.01k) [jQuery >= 1.1.3.1+]
Download the (jqModal.css - 496 bytes)

用法

通常情況下,如果你想在你的網站上新增彈出式對話方塊、框架、視窗或你擁有的任何可以新增的內容,你必須:

1,新增dialog placeholder(佔位符)到你的網頁

dialog placeholder(佔位符)通常是隱藏的作為元素子元素的

容器。CSS用來設計樣式和位置。對話方塊在觸發事件發生時顯示(“shown”).它的內容(資訊/圖片/..)是內嵌在html中的或者通過ajax新增。

2,

初始化對話方塊

每個對話方塊通過使用$.jqm()顯示時都會呼叫JqModal 。你可以通過傳遞引數自定義你的對話方塊,例如:$('#dialog').jqm({modal: true, trigger: 'a.showDialog'});).

注意:$.jqm()只能被呼叫一次,在每個對話方塊使用時。儘管可以重複呼叫以修改引數。

3,觸發對話方塊

當觸發事件發生時,對話方塊會自動顯示,你也可以通過執行$.jqmShow()方法來顯示對話方塊

常用方法:

    Jqm

初始化元素以使作為JqModal使用,接受傳遞的引數

$('#dialog').jqm();
   
$('.dialogs').jqm({ajax:'@href',modal:true});

JqmShow

顯示jqModal元素

$('#dialog').jqmShow();
    $('.dialogs').jqmShow();

jqmHide

隱藏jqModal元素

  $('#dialog').jqmHide();
   $('.dialogs').jqmHide();