<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>
Jquery 封装自定义控件Demo
我需要定义一个控件，控件本身支持全局修改属性，且有自己的私有方法
猜你喜欢
转载自jjjssh.iteye.com/blog/2380767
今日推荐
周排行