jquery插件开发

最新推荐文章于 2025-06-14 23:24:10 发布

原创最新推荐文章于 2025-06-14 23:24:10 发布 · 128 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #javascript #ViewUI

javascript 同时被 2 个专栏收录

24 篇文章

订阅专栏

jquery

3 篇文章

订阅专栏

本文介绍了如何使用jQuery开发插件，并展示了插件在表格UI中的应用，包括奇偶行颜色交替、鼠标移上高亮显示等功能。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>jquerypLAGIN</title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style type="text/css">
	.evenRow{
		background:#000;
	}
	.oddRow{
		background:yellow;
	}
	.activeRow{
		background:red;
	}
  </style>
  <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
  <script type="text/javascript">
  <!--
	jQuery.extend({
	  min: function(a, b) { return a < b ? a : b; },
	  max: function(a, b) { return a > b ? a : b; }
	});

	jQuery.fn.extend({
	  check: function() {
		return this.each(function() { this.checked = true; });
	  },
	  uncheck: function() {
		return this.each(function() { this.checked = false; });
	  }
	});

	$("input[type=checkbox]").check();
	$("input[type=radio]").uncheck();

	$(function(){
		jQuery.min(2,3); // => 2
		jQuery.max(4,5); // => 5
		alert(jQuery.min(2,3));
	});

	//jquery通用插件开发步骤
	/* 
	* tableUI 0.1
	* cOPYRIGHT (c) 2011 hbweilingfeng@126.com
	* Date: 2011-10-26
	* 使用tableUI可以方便地将表格提示使用体验。先提供的功能有奇偶行颜色交替，鼠标移上高亮显示 
	*/ 
	(function($){
		$.fn.tableUi = function(options){
			var defaults = {
				evenRowClass:"evenRow", 
				oddRowClass:"oddRow", 
				activeRowClass:"activeRow" 
			};
			var options = $.extend(defaults,options);
			this.each(function(){
				//插件的代码
				//$(this)
				var $this = $(this);
				$this.find("tr:even").addClass(options.evenRowClass);
				$this.find("tr:odd").addClass(options.oddRowClass);
				$this.find("tr").bind("mouseover",function(){
					$(this).addClass(options.activeRowClass);
				});
				$this.find("tr").bind("mouseout",function(){
					$(this).removeClass(options.activeRowClass);
				});
			});
		}
	})(jQuery);

	$('#mytable').tableUi();

  //-->
  </script>
 </head>

 <body>
	<table id="mytable">
		<tr><td>1111111</td><td>1111111</td><td>1111111</td><td>1111111</td><td>1111111</td></tr>
		<tr><td>1111111</td><td>1111111</td><td>1111111</td><td>1111111</td><td>1111111</td></tr>
		<tr><td>1111111</td><td>1111111</td><td>1111111</td><td>1111111</td><td>1111111</td></tr>
		<tr><td>1111111</td><td>1111111</td><td>1111111</td><td>1111111</td><td>1111111</td></tr>
		<tr><td>1111111</td><td>1111111</td><td>1111111</td><td>1111111</td><td>1111111</td></tr>
	</table>
 </body>
</html>