编写Jquery插件

wo13145219

浏览: 216096 次
性别:
来自: 江西

最近访客更多访客>>

damin

bugyun

ABAP_Brave

qxg1123

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript
Jquery
html

html jquery JavaScript

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
	<style type="text/css">
	table		{ border:0;border-collapse:collapse;}
	td	{ font:normal 12px/17px Arial;padding:2px;width: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>
	<!--   引入jQuery -->
	<script src="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","red");//可以链式操作
	})
    
</script>
</head>
<body>
<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>
</body>
</html>

分享到：

SQL几种分页语句性能对比 | Jquery中使用某个关键字进行查询时，table ...

2014-03-05 16:34
浏览 805
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

编写Jquery插件

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

编写Jquery插件

评论

发表评论

相关推荐

解决input type=password在浏览器会自动填充密码的问题

html禁止清除input文本输入缓存

jQuery.autocomplete.js乱码问题

js 日历控件乱码问题

COTree公司组织结构树控件js特效

table合并列

jquery table 操作

jQuery.holdReady(hold)

$(document).ready()和window.onload区别

Jquery cookies操作

Jquery中使用某个关键字进行查询时，table里面相关文字颜色变化

asp.net谷歌地图api调用

label标签的for属性

冲突解决多个Jquery包和其他前端js包命名冲突问题

JS包含在HTML文件中正常，包含在ASPX文件中就报错

火狐、谷歌、IE关于document.body.scrollTop和document.documentElement.scrollTop 以及值为0的问题

Jquery的$命名冲突

JS调用CS里的方法：PageMethods

Automation服务器不能创建对象_的多种解决办法

html:target几种介绍

最近访客更多访客>>