基于requirejs的js控件基類
github：https://github.com/milolu/blog/tree/master/jq-widget
/**
* Created by Silence on 2014/10/27.
* Describe
*/
define(function(){
function Widget(){
this.boundingBox = null; //屬性，最外層容器
}
Widget.prototype = {
//綁定事件
on : function(type, handler){
if(typeof this.handlers[type] == "undefined"){
this.handlers[type] = [];
}
this.handlers[type].push(handler);
return this
},
//調(diào)用綁定事件
fire : function(type, data){
if(this.handlers[type] instanceof Array){
var handlers = this.handlers[type];
for(var i = 0; i < handlers.length; i++){
handlers[i](data);
}
}
},
//渲染組件
render : function(container){
this.renderUI();
this.handlers = {};
this.bindUI();
this.syncUI();
//$(container || document.body).append(this.boundingBox);
},
//銷毀組件
destroy : function(){
this.destructor();
this.boundingBox.off();
this.boundingBox.remove();
},
//獲取元素本身
self : function(){
return this.boundingBox;
},
//獲取寬度
width : function(){
return this.boundingBox.width();
},
//獲取高度
height : function(){
return this.boundingBox.height();
},
//添加dom節(jié)點
renderUI : function(){},
//監(jiān)聽事件
bindUI : function(){},
//初始化組件屬性
syncUI : function(){},
//銷毀前的處理函數(shù)
destructor : function(){}
};
return {
Widget : Widget
}
});
選擇控件實現(xiàn)樣例
/**
* Created by Silence on 2014/10/30.
* Describe 選擇控件
* 參數(shù)
* parent ：父節(jié)點（"#parent"）
* width：選擇框的大行刑啊（除標(biāo)題外的寬度）
* css：樣式
* skinClassName : 皮膚類名
* values ：可選擇項
* onSelect(index, data) ： 選擇事件
* defaultSel ： 默認(rèn)選中項
* title：選擇器的標(biāo)題
*
* API：
* setSelectIndex(index, isCallBack): 設(shè)置選中項（選中序號朋凉，是否進(jìn)行選中事件羽圃，默認(rèn)不調(diào)用）
* getSelectValue： 獲取當(dāng)前選中序號及內(nèi)容
*/
define(["widget"], function(widget){
function Select(){
this.cfg = {
parent : null,
width : null,
title : null,
css : null,
skinClassName : null,
values : ["sel1", "sel2", "sel3", "sel4"],
key : null,
onSelect : null,
defaultSel : 0,
firstCallBack : true,
enable : true
};
}
Select.prototype = $.extend({}, new widget.Widget(), {
create : function(cfg){
$.extend(this.cfg, cfg);
this._select = this.cfg.defaultSel;
this.render();
return this;
},
renderUI : function(){
var htm = "<div class='w-select-box'>{{if title}}<span class='w-select-title'>${title}</span>{{/if}}<div class='w-select ${skinClassName}'><span class='w-select-value'></span>" +
"<div class='w-select-btn'></div>" +
"<div class='w-select-values'><ul></ul></div>" +
"</div></div>";
this.boundingBox = $($.tmpl(htm, this.cfg));
var $ul = this.boundingBox.find("ul");
for(var i=0; i<this.cfg.values.length; i++)
{
if(this.cfg.key != null)
$ul.append("<li>"+ this.cfg.values[i][this.cfg.key] +"</li>");
else
$ul.append("<li>"+ this.cfg.values[i] +"</li>");
}
this.btn = this.boundingBox.find(".w-select-btn");
this.valuesBar = this.boundingBox.find(".w-select-values");
this.lis = this.boundingBox.find("li");
if(this.cfg.parent != null)
this.cfg.parent.append(this.boundingBox);
},
bindUI : function(){
var that = this;
this.on("show", function(){
if(that.cfg.enable == false)
return;
$(".w-select-btn").removeClass("w-select-btn-showing");
$(".w-select-values").slideUp(100);
that.btn.addClass("w-select-btn-showing");
that.valuesBar.slideDown(400);
});
this.on("close", function(){
that.btn.removeClass("w-select-btn-showing");
that.valuesBar.slideUp(400);
});
this.on("selected", function(data){
if(that.cfg.onSelect != null){
that.cfg.onSelect(data.sel, data.value);
}
//that.fire("close");
});
this.boundingBox.click(function(event){
if(that.btn.hasClass("w-select-btn-showing"))
{
that.fire("close");
}
else
{
that.fire("show");
}
event.cancelBubble = true;
event.stopPropagation();
});
this.lis.click(function(){
var i = that.lis.index(this);
that.setSelectIndex(i, true);
});
},
syncUI : function(){
//初始化設(shè)置選中項
this.setSelectIndex(this.cfg.defaultSel, this.cfg.firstCallBack);
this.setEnable(this.cfg.enable);
if(this.cfg.css != null)
this.boundingBox.css(this.cfg.css);
if(this.cfg.width != null)
this.boundingBox.find(".w-select").css("width", this.cfg.width);
},
destructor : function(){
},
//設(shè)置選中項
setSelectIndex : function(index, isCallBack){
isCallBack = isCallBack || false;
this._select = index;
var value = this.cfg.values[index];
if(this.cfg.key != null)
value = value[this.cfg.key];
this.boundingBox.find(".w-select-value").empty().append( value );
if(isCallBack)
{
this.fire("selected", { sel:index, value:this.cfg.values[index] });
}
},
setSelectIndexByValue : function(value, isCallBack){
for(var i in this.cfg.values){
var thisValue = this.cfg.values[i];
if(this.cfg.key != null)
thisValue = thisValue[this.cfg.key];
if(value == thisValue)
{
this.setSelectIndex(i, isCallBack);
break;
}
}
},
setEnable : function(type){
this.cfg.enable = type;
if(type == true){
this.boundingBox.removeClass("w-select-box-unable");
}
else{
this.boundingBox.addClass("w-select-box-unable");
}
},
setSelectValues : function(_values, _defaultSel, _iscallback){
var defaultSel = _defaultSel || 0;
var iscallback = _iscallback || true;
var $ul = this.boundingBox.find("ul");
$ul.empty();
this.cfg.values = _values;
for(var i=0; i<this.cfg.values.length; i++)
{
if(this.cfg.key != null)
$ul.append("<li>"+ this.cfg.values[i][this.cfg.key] +"</li>");
else
$ul.append("<li>"+ this.cfg.values[i] +"</li>");
}
this.setSelectIndex(defaultSel, iscallback);
},
//獲取當(dāng)前選中的內(nèi)容
getSelectValue : function(){
var value = this.cfg.values[this._select];
if(this.cfg.key != null)
value = value[this.cfg.key];
return {
sel : this._select,
value : value
}
}
});
if(typeof Select._init == 'undefined')
{
Select._init = true;
$('body').on('click', function(){
$(".w-select-btn").removeClass("w-select-btn-showing");
$(".w-select-values").slideUp(100);
});
}
return {
Select : Select
}
});
