jquery widget sample

tsailer

浏览: 53050 次
性别:
来自: 深圳

最近访客更多访客>>

io_yichen

lake_guo

小小妖

悲伤向右

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

<!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 前端的好处是开源的，

分享到：

form page jump | jquery apply wait for update

2011-07-06 08:39
浏览 3446
评论(0)
分类:Web前端
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jquery widget sample

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jquery widget sample

评论

发表评论

相关推荐

JS的replace方法

要写出在各大主流浏览器上都兼容的JS代码，就要关注他们的区别，下是IE和FF综合考虑的通用DOM！

<input type="text" id="start" />输入true取布尔true

Js获取当前日期时间+日期验证+判断闰年+日期的天数差+日期格式化+JS判断某年某月有多少天

高效http页面优化法则一【JS对DOM的操作】

form page jump

jquery apply wait for update

deal with a great quantity domelements add event wait for update

JS中的attachEvent、addEventListener如何传递参数

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

js operate frame

js中frame的调用

js 事件冒泡 和其它问题

js inner iframe get dom of parent

ajax

add event to all the dom elements in one page except one dom

count down 倒计时

js IE与FireFox的兼容性问题 事件

deal with href remove the same element

document.form.item 问题集合的(0)和[0]取法

最近访客更多访客>>

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

js 事件冒泡和其它问题

js IE与FireFox的兼容性问题事件