您现在的位置:首页 >> 前端 >> 内容

jQuery插件之Facebook风格模态框

时间:2009/12/18 14:46:00 点击:

  核心提示:$.fn.jmodal是基于jQuery的插件,通过div和透明效果来模拟模态对话框,效果图如下: 源代码可到此下载:jquery.jmodal.js 下面介绍下此插件的使用方法:引用jquery脚本...

  $.fn.jmodal是基于jQuery的插件,通过div和透明效果来模拟模态对话框,效果图如下:

jQuery插件之Facebook风格模态框

  源代码可到此下载:jquery.jmodal.js

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

  1.  引用jquery脚本(v1.3.*)
  2.  引用jquery.jmodal.js
  3. 触发对话框弹出的脚本为:
    1jQuery插件之Facebook风格模态框jQuery插件之Facebook风格模态框$.fn.jmodal({
    2jQuery插件之Facebook风格模态框     title:'Information',
    3jQuery插件之Facebook风格模态框     content:'Hi,you displayed me?',
    4jQuery插件之Facebook风格模态框     buttonText:'Yes,It\'s me',
    5jQuery插件之Facebook风格模态框     okEvent:function(e){
    6jQuery插件之Facebook风格模态框         alert('jmodal\'ll be closed after u click me:-)');
    7jQuery插件之Facebook风格模态框     }

    8jQuery插件之Facebook风格模态框 });
  4. content参数包含两种类型:String和Function,当为String类型的时候设置的文本信息将直接显示在弹出框中,当使用Function类型的时候,比如我们需要使用一个ajax的方法去获取特定的内容:       
     1jQuery插件之Facebook风格模态框jQuery插件之Facebook风格模态框$.fn.jmodal({
     2jQuery插件之Facebook风格模态框    title:'Information',
     3jQuery插件之Facebook风格模态框jQuery插件之Facebook风格模态框    content:function(e){   
     4jQuery插件之Facebook风格模态框        e.html('loadingjQuery插件之Facebook风格模态框');
     5jQuery插件之Facebook风格模态框jQuery插件之Facebook风格模态框        e.load('templates/templatehtml.htm',function(msg){
     6jQuery插件之Facebook风格模态框             //code
     7jQuery插件之Facebook风格模态框        }
    );
     8jQuery插件之Facebook风格模态框    }
    ,
     9jQuery插件之Facebook风格模态框    buttonText:'Yes,It\'s me',
    10jQuery插件之Facebook风格模态框    okEvent:function(e){
    11jQuery插件之Facebook风格模态框        alert('jmodal\'ll be closed after u click me:-)');
    12jQuery插件之Facebook风格模态框    }

    13jQuery插件之Facebook风格模态框});

        那么此时可以传递一个function给content, jmodal会同样会传递一个参数给这个function,比如示例中的'e',指的就是content的容器(jquery对象),那么使用'e.load()'方法就可以使用ajax加载需要的模板或者内容 ( 当然,同样也可以$.ajax ).

ps: 源码注释中有详细的API说明,live demo

Tags:JQ QU UE ER 
作者:Jericho 来源:博客园