zoukankan      html  css  js  c++  java
  • jQuery 之一:对象插件

    插件分为对象插件和类插件

    下面介绍对象插件

    Html代码:

    <table id="table2">
    <thead><tr><th> </th><th>姓名</th><th>性别</th><th>暂住地</th></tr></thead>
    <tbody>
    <tr>
    <td><input type="checkbox" name="choice" value=""/></td>
    <td>张山</td>
    <td></td>
    <td>浙江宁波</td>
    </tr>
    <tr>
    <td><input type="checkbox" name="choice" value="" /></td>
    <td>李四</td>
    <td></td>
    <td>浙江杭州</td>
    </tr>
    <tr>
    <td><input type="checkbox" name="choice" value="" checked="checked" /></td>
    <td>王五</td>
    <td></td>
    <td>湖南长沙</td>
    </tr>
    <tr>
    <td><input type="checkbox" name="choice" value="" /></td>
    <td>找六</td>
    <td></td>
    <td>浙江温州</td>
    </tr>
    <tr>
    <td><input type="checkbox" name="choice" value="" /></td>
    <td>Rain</td>
    <td></td>
    <td>浙江杭州</td>
    </tr>
    <tr>
    <td><input type="checkbox" name="choice" value="" checked="checked" /></td>
    <td>MAXMAN</td>
    <td></td>
    <td>浙江杭州</td>
    </tr>
    </tbody>
    </table>

    css 文件

    <style type="text/css">
    table { border:
    0;border-collapse:collapse;}
    td { font:normal 12px
    /17px Arial;padding:2px;100px;}
    th { font:bold 12px
    /17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;}
    .even { background:#FFF38F;}
    /* 偶数行样式*/
    .odd { background:#FFFFEE;}
    /* 奇数行样式*/
    .selected { background:#FF6500;color:#fff;}
    </style>

    插件代码:

    <script src="http://www.cnblogs.com/scripts/jquery-1.3.1.js" type="text/javascript"></script>
    <script type="text/javascript">
    //插件编写
    ;(function($) {
    $.fn.extend({
    "alterBgColor":function(options){
    //设置默认值
    options=$.extend({
    odd:
    "odd", /* 偶数行样式*/
    even:
    "even", /* 奇数行样式*/
    selected:
    "selected" /* 选中行样式*/
    },options);
    $(
    "tbody>tr:odd",this).addClass(options.odd);
    $(
    "tbody>tr:even",this).addClass(options.even);
    $(
    'tbody>tr',this).click(function() {
    //判断当前是否选中
    var hasSelected=$(this).hasClass(options.selected);
    //如果选中,则移出selected类,否则就加上selected类
    $(this)[hasSelected?"removeClass":"addClass"](options.selected)
    //查找内部的checkbox,设置对应的属性。
    .find(':checkbox').attr('checked',!hasSelected);
    });
    // 如果单选框默认情况下是选择的,则高色.
    $('tbody>tr:has(:checked)',this).addClass(options.selected);
    return this; //返回this,使方法可链。
    }
    });
    })(jQuery);

    //插件应用
    $(function(){
    $(
    "#table2")
    .alterBgColor()
    //应用插件
    .find("th").css("color","gray");//可以链式操作
    })

    </script>
  • 相关阅读:
    ubuntu上一些好的操作方式 习惯 文件备份
    ubuntu ufw 防火墙的设置
    ubuntu 的SSH 服务
    对一个数组的处理。
    ubuntu 的 crontab 计划任务
    django1.6 apache 项目部署.
    只此荒废的一个半个月。
    myeclipse python插件安装和环境配置(Windows7下)
    ubunt 12.04 64位 english 服务器版安装
    ubuntu sudo自动切换root 无需输入密码
  • 原文地址:https://www.cnblogs.com/zjwei55/p/2152602.html
Copyright © 2011-2022 走看看