如何编写自己的jqueryUI组件

[size=large]一.概述[/size]
[size=small]
现在的软件开发都追求组件化的思想,特别是前端开发,目前有很多前端的组件我们可以方便的使用来满足一些需求,比如图片的轮播,TAB切换等等。其实基本原理都是使用了jquery的ui组件,下面我们来自己动手基于jquery的ui组件来开发组件。这只是一个小例子,主要目的是演示如何写jquery的ui组件开发代码。
[/size]
[size=large]二.代码[/size]

<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"></script>
<script>
('timer' in jQuery.fn) ||(function($){
$.widget('ui.timer', {
options: {},
// _init && _create 自动被调用
_init:function(){
console.log("_init");
// 把客户端传递给组件的参数打印出来
console.log(this.options.from);
console.log(this.options.to);
console.log(this.options.format);
},
_create:function(){
console.log("_create")
}
});
})(jQuery);

// 测试刚才的小组件
jQuery(function($){
$('<div></div>').timer({
from:'fromDate',
to:'toDate',
format:'yyyy-MM-DD-HH-MM-SS'
});
});
</script>

[size=small]
输出结果:
_create
_init
fromDate
toDate
yyyy-MM-DD-HH-MM-SS
[/size]
[size=small][color=red]
注意这里的_init&&_create都是被jquery自己调用,不需要我们去调用。先调用_create再调用_init
[/color][/size]
[size=large]三.随便写写[/size]
[size=small]
其实软件开发和框架开发都要遵循的是模块化,模块和模块之间的耦合度要低,模块本身的内聚度要高,这样就不会造成修改模块A后,其他模块也要修改。jquey的ui和jquery本身的api分开,这样ui组件大家可以随意去增加,这不会影响jquery的核心api.
[/size]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值