<html>
<head>
<script src="jquery-1.8.3.min.js"></script>
<script>
(function(){
var _myWidget = {
id:null,
on: 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"
}
//The back covers the front
var _c=$.extend({},defaults,$.fn.MyWidget.defaults,options);
_o.init(_c);
return _o;
}
})();
</script>
<script>
(function(){
// Uniformly change the properties of the control
$.fn.MyWidget.defaults={
textColor:"blue"
}
})();
</script>
</head>
<body>
<div id="container"></div>
<script>
var w=$("#container").MyWidget({alertText:"Please enter"});
// execute other methods
w.setValue("Jasion");
</script>
</body>
</html>
Jquery encapsulates custom controls Demo
I need to define a control, the control itself supports global modification of properties, and has its own private method
Guess you like
Origin http://10.200.1.11:23101/article/api/json?id=326590189&siteId=291194637
Ranking