Jquery 封装自定义控件Demo

我需要定义一个控件,控件本身支持全局修改属性,且有自己的私有方法


<html>
<head>
<script src="jquery-1.8.3.min.js"></script>
<script>
(function(){
var _myWidget={
id:null,
el:null,

_c:{
alertText:"",
},
init:function(config){
var self=this;

var _c=config||{};
if(_c.alertText&&_c.alertText){
self._c.alertText=_c.alertText;
}
if(_c.textColor&&_c.textColor!=""){
self._c.textColor=_c.textColor;
}


self._render();
},
_render:function(){
var self=this;
var _html='<input type="text" id="input_'+self.id+'" placeholder="'+self._c.alertText+'" style="color:'+self._c.textColor+'">';
$(self.el).html(_html);
},
setValue:function(value){
var self=this;

$("#input_"+self.id).val(value);
}
}

$.fn.MyWidget=function(options){
var uuid=(new Date()).getTime();
var _o=$.extend({},_myWidget);
_o.id=uuid;
_o.el=this;

var defaults={
alertText:"",
textColor:"red"
}
//后面的覆盖前面的
var _c=$.extend({},defaults,$.fn.MyWidget.defaults,options);
_o.init(_c);

return _o;
}
})();
</script>

<script>
(function(){
//统一改变控件的属性
$.fn.MyWidget.defaults={
textColor:"blue"
}


})();
</script>

</head>

<body>
<div id="container"></div>
<script>
var w=$("#container").MyWidget({alertText:"请输入"});
//执行其他的方法
w.setValue("Jasion");
</script>
</body>
</html>

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值