jquery插件

来源：互联网发布：阿里云配置二级域名编辑：程序博客网时间：2024/05/18 22:52

http://www.cnblogs.com/playerlife/archive/2012/05/11/2495269.html

jquery插件代码

(function($) {var methods = {init: init,show: show}$.fn.myPlugin = function(method, options) {$.extend($.fn.myPlugin.defaults, options);if (methods[method]) {        return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));      } else if (typeof method === 'object' || ! method) {return methods.init.apply( this, arguments);  } else {$.error( 'Method ' +  method + ' does not exist on jQuery.myPlugin' ); }}function init(options) {return this.each(function() {var $this = $(this);$this.css('border', '1px solid red');$this.css('width', defaults.width);});};function show(options) {return this.each(function() {var $this = $(this);$this.css('width', defaults.width);});}var defaults = $.fn.myPlugin.defaults = {width:'100px'}})(jQuery);

html代码

<!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="jquery-1.7.1.js"></script><script type="text/javascript" src="myPlugin.js"></script><script type="text/javascript">$(function() {$('#panel').myPlugin({width:'200px'}).css('height', '40px');$('#panel').myPlugin('show', {width:'500px'});})</script></head><body><div id="panel">11</div></body></html>

0 0