jquery插件写法

稿件来源: 阳光企业网站管理系统   撰稿作者: 太阳光   发表日期: 2012-06-25   阅读次数: 273   查看权限: 游客查看

jquery常用二种插件的写法

因工作需要我写了一个简单的抽奖方法。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>抽奖程序</title>
<script type="text/javascript" src="../common/js/jquery-1.7.2.min.js" ></script>
</head>
<style type="text/css">
    .sub_title{
        border:1px solid #ddd;
        padding: 4px;
    }
</style>
<body>
名单:<span id="name"></span>
中奖名单:
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<button type="button">开始抽奖</button>
<script type="text/javascript">
        var a_list=new Array();//人员名单数组
        var i_long=0;//总人数
        var a_win=new Array();//中奖编号
        var n=0;//中奖的编号
        $.getJSON("json.asp", function(json){
            var list="";
            $.each(json, function(i,item){
                list+='<span class="sub_title">'+item.name+'<\/span>';
                a_list[i]=item.name;
            });
            i_long=json.length;
            $("#name").html(list);
        });

        function lottery(){
            if(i_long<2){
                alert("人员名单不足三人无法抽奖!");
            }else{
                var i=0;
                do{
                   i=Math.floor(Math.random()*i_long);
                }while(a_win[i]);
                a_win[i]=true;
                $("ul li").eq(n).html(a_list[i]);
                n++;
                if(n>2)$("button").attr("disabled",true);
            }
        }
        $(document).ready(function(){
            $("button").click(function(){
                lottery();
            });
        });
</script>
</body>
</html>

 

插件写法一:

    jQuery.fn.extend({
        lottery:function(json,name){
            var a_list=new Array();//人员名单数组
            var i_long=0;//总人数
            var a_win=new Array();//中奖编号
            var n=0;//中奖的编号
            $.getJSON(json, function(json){
                var list="";
                $.each(json, function(i,item){
                    list+='<span class="sub_title">'+item.name+'<\/span>';
                    a_list[i]=item.name;
                });
                i_long=json.length;
                $(name).html(list);
            });

            $(this).click(function(){
                if(i_long<2){
                    alert("人员名单不足三人无法抽奖!");
                }else{
                    var i=0;
                    do{
                        i=Math.floor(Math.random()*i_long);
                    }while(a_win[i]);
                    a_win[i]=true;
                    $("ul li").eq(n).html(a_list[i]);
                    n++;
                    if(n>2)$(this).attr("disabled",true);
                }
            });
        }
    });

    $(document).ready(function(){
        $("button").lottery("json.asp","#name");
    });

 

插件写法二:

(function($) {
    $.extend($.fn, {
        lottery: function(setting) {
            var ps = $.extend({
                o_to:"button",
                s_json: "json.asp",
                o_id:"#name",
                o_list:"ul li",
                i_long:3
            }, setting);
            var a_list=new Array();//人员名单数组
            var a_win=new Array();//中奖编号
            var n=0;//中奖的编号
            $.getJSON(ps.s_json, function(json){
                var list="";
                $.each(json, function(i,item){
                    list+='<span class="sub_title">'+item.name+'<\/span>';
                    a_list[i]=item.name;
                });
                $(ps.o_id).html(list);
            });

            $(ps.o_to).click(function(){
                if(a_list.length<ps.i_long-1){
                    alert("人员名单不足无法抽奖!");
                }else{
                    var i=0;
                    do{
                        i=Math.floor(Math.random()*ps.i_long);
                    }while(a_win[i]);
                    a_win[i]=true;
                    $(ps.o_list).eq(n).html(a_list[i]);
                    n++;
                    if(n>=ps.i_long)$(this).attr("disabled",true);
                }
            });
        }
    });
})(jQuery);

$(document).ready(function(){
    $.fn.lottery({
        o_to:"button",
        o_id:"#name",
        o_list:"ul li",
        i_long:3
    });
});

总结:如果参数多的建议使用第二种方法。

关键词: jquery,jq插件   编辑时间: 2012-06-25

  • 感到高兴

    0

    高兴
  • 感到支持

    0

    支持
  • 感到搞笑

    0

    搞笑
  • 感到不解

    1

    不解
  • 感到谎言

    0

    谎言
  • 感到枪稿

    1

    枪稿
  • 感到震惊

    0

    震惊
  • 感到无奈

    0

    无奈
  • 感到无聊

    0

    无聊
  • 感到反对

    0

    反对
  • 感到愤怒

    0

    愤怒
100%(1)
0%(0)
共有0 条评论 发言请遵守【相关规定

网友评论

会员头像
发 表同步腾讯微博    验证码:  点击更新请先登陆
  • 暂无评论
关闭模块文章图片 article Pictrue
  • 我的妈妈爸爸
  • 基于koa2+mysql+vue2.0+Element阳光内容管理系统
  • 代码覆盖率工具 Istanbul 入门教程
  • 全栈工程师的武器——MEAN
  • 9款超炫的 CSS3 复选框(Checkbox)
  • 微信开发在线翻译功能
  • CSS3那些不为人知的高级属性
  • 给easyui的datebox添加清空事件
  • flash写字效果
  • kendoUI系列教程之DropDownList下拉菜单
  • kendoUI系列教程之datetimepicker日期时间选择
  • kendoUI系列教程之datepicker日期选择
  • kendoUI系列教程之combobox下拉列表框
  • kendoUI系列教程之colorpicker
  • kendoUI系列教程之calendar日历表
  • kendoUI系列教程之autocomplete自动补齐