`
tsailer
  • 浏览: 51439 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类

jquery widget sample

    博客分类：
  • JS
 
阅读更多 
<!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>
  <title> new document </title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <style type="text/css">
  <!--
	input {font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;}
  -->
  </style>

 </head>

 <body>
  <input type="text" id="test" style="width:166px;height:20px;font-size:20px;"/>
 </body>
 <script type="text/javascript" src="jquery-1.3.2.js"></script>
 <script type="text/javascript" src="jquery-ui-1.7.1.js"></script>
 <script language="JavaScript" type="text/javascript">
 <!--
	(function($) {
	//define tosmall widget
	$.widget("ui.tosmall", {
		_init: function(){
			var self = this, op=this.options, ele=this.element;
			var fz = ele.css("font-size");
			this.ss = ele.css("width");
			var ssn = parseInt(this.ss,10);
			self.check(ssn,fz);
			ele.bind('ui.keyup',function(){
				//use namespace bind event
				//控件名加事件来绑定click事件，避免unbind时把页面中的其它click事件都unbind
				self.check(ssn,fz);
			});
			return this;
		},
		
		check:function(t,a){
			var self = this;
			var fzn = parseInt(a,10);
			var num = Math.floor(t/fzn);
			//console.log($(self.element).val().length+'-----'+num);
			if($(self.element).val().length > num){
				fzn -= 2;
				self.ss = fzn + "px";
				self.element.css("font-size",a);
			}else{
				//alert("22");
				if(fzn<=20){
					fzn += 2;
				}
				self.ss = fzn + "px";
				self.element.css("font-size",a);
			}
			console.log(a);
		},
		
		_change:function(){
			self._trigger('select',event,null);//_trigger;

		},
		
		destroy:function(){
			$.widget.prototype.destroy.apply(this);
		}
	});
	//默认属性
	
})(jQuery);
//use variable reference the children dom of widget 
//用变量引用控件里面的dom元素，不用id 和 class 避免出现页面同时引用一个控件，
//当其中的一个控件实例调用控件的dom元素时，调用到别的控件实例

//jQuery(..).draggable() - Creates a new instance of jQuery.ui.draggable
//jQuery(..).draggable({..}) - Creates a new instance of jQuery.ui.draggable with an optional options hash
//jQuery(..).draggable("foo", [args]) - Calls the method foo() method on the draggable instance stored on the element with optional arguments 
 //-->
 </script>
  <script type="text/javascript">
  $("#test").tosmall();
var ss = $("#test").tosmall("check");
  //先$("#test").tosmall();
  //后$("#test").tosmall("check");
  //如果有返回值，必须使用
  //$.extend($.ui.tosmall,{
  //	getter:'check',//这句
  //	defaults:{	}
  //	})
  //否则返回$("#test"
  </script>
</html>

//empty有时会出现内存溢出，请尽量避免使用
//用innerHTML代替，但是这个好像有时也有bug
//web 前端的好处是开源的，
分享到：
| jquery apply wait for update
评论
发表评论

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

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics