jQuery插件之Facebook風格模態框

作者: Jericho  來源: 博客園  發布時間: 2009-12-18 14:46  閱讀: 3723 次  推薦: 0   原文鏈接   [收藏]  

  $.fn.jmodal是基于jQuery的插件,通過div和透明效果來模擬模態對話框,效果圖如下:

  源代碼可到此下載:jquery.jmodal.js

  下面介紹下此插件的使用方法:

  1.  引用jquery腳本(v1.3.*)
  2.  引用jquery.jmodal.js
  3. 觸發對話框彈出的腳本為:
    1$.fn.jmodal({
    2     title:'Information',
    3     content:'Hi,you displayed me?',
    4     buttonText:'Yes,It\'s me',
    5     okEvent:function(e){
    6         alert('jmodal\'ll be closed after u click me:-)');
    7     }

    8 });
  4. content參數包含兩種類型:String和Function,當為String類型的時候設置的文本信息將直接顯示在彈出框中,當使用Function類型的時候,比如我們需要使用一個ajax的方法去獲取特定的內容:       
     1$.fn.jmodal({
     2    title:'Information',
     3    content:function(e){   
     4        e.html('loading');
     5        e.load('templates/templatehtml.htm',function(msg){
     6             //code
     7        }
    );
     8    }
    ,
     9    buttonText:'Yes,It\'s me',
    10    okEvent:function(e){
    11        alert('jmodal\'ll be closed after u click me:-)');
    12    }

    13});

        那么此時可以傳遞一個function給content, jmodal會同樣會傳遞一個參數給這個function,比如示例中的'e',指的就是content的容器(jquery對象),那么使用'e.load()'方法就可以使用ajax加載需要的模板或者內容 ( 當然,同樣也可以$.ajax ).

ps: 源碼注釋中有詳細的API說明,live demo

0
0
 
標簽:jQuery 插件
 
 

文章列表

arrow
arrow
    全站熱搜
    創作者介紹
    創作者 大師兄 的頭像
    大師兄

    IT工程師數位筆記本

    大師兄 發表在 痞客邦 留言(0) 人氣()