发版
This commit is contained in:
贤心
143
examples/extends/temp.js
Normal file
143
examples/extends/temp.js
Normal file
@@ -0,0 +1,143 @@
|
||||
/**
|
||||
|
||||
@Name：layui.modDemo XX组件
|
||||
@Author：贤心
|
||||
@License：MIT
|
||||
|
||||
*/
|
||||
|
||||
layui.define(['laytpl'], function(exports){
|
||||
"use strict";
|
||||
|
||||
var $ = layui.$
|
||||
,laytpl = layui.laytpl
|
||||
|
||||
//模块名
|
||||
,MOD_NAME = 'modDemo'
|
||||
|
||||
//外部接口
|
||||
,modeDemo = {
|
||||
config: {}
|
||||
,index: layui[MOD_NAME] ? (layui[MOD_NAME].index + 10000) : 0
|
||||
|
||||
//设置全局项
|
||||
,set: function(options){
|
||||
var that = this;
|
||||
that.config = $.extend({}, that.config, options);
|
||||
return that;
|
||||
}
|
||||
|
||||
//事件监听
|
||||
,on: function(events, callback){
|
||||
return layui.onevent.call(this, MOD_NAME, events, callback);
|
||||
}
|
||||
}
|
||||
|
||||
//操作当前实例
|
||||
,thisModule = function(){
|
||||
var that = this
|
||||
,options = that.config
|
||||
,id = options.id || that.index;
|
||||
|
||||
thisModule.that[id] = that; //记录当前实例对象
|
||||
thisModule.config[id] = options; //记录当前实例配置项
|
||||
|
||||
return {
|
||||
config: options
|
||||
//重置实例
|
||||
,reload: function(options){
|
||||
that.reload.call(that, options);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//获取当前实例配置项
|
||||
,getThisModuleConfig = function(id){
|
||||
var config = thisModule.config[id];
|
||||
if(!config) hint.error('The ID option was not found in the '+ MOD_NAME +' instance');
|
||||
return config || null;
|
||||
}
|
||||
|
||||
//字符常量
|
||||
,ELEM = 'layui-modeDemo'
|
||||
|
||||
|
||||
//主模板
|
||||
,TPL_MAIN = ['<div class="ayui-border-box">'
|
||||
|
||||
,'</div>'].join('')
|
||||
|
||||
//构造器
|
||||
,Class = function(options){
|
||||
var that = this;
|
||||
that.index = ++transfer.index;
|
||||
that.config = $.extend({}, that.config, transfer.config, options);
|
||||
that.render();
|
||||
};
|
||||
|
||||
//默认配置
|
||||
Class.prototype.config = {
|
||||
|
||||
};
|
||||
|
||||
//重载实例
|
||||
Class.prototype.reload = function(options){
|
||||
var that = this;
|
||||
|
||||
layui.each(options, function(key, item){
|
||||
if(item.constructor === Array) delete that.config[key];
|
||||
});
|
||||
|
||||
that.config = $.extend(true, {}, that.config, options);
|
||||
that.render();
|
||||
};
|
||||
|
||||
//渲染
|
||||
Class.prototype.render = function(){
|
||||
var that = this
|
||||
,options = that.config;
|
||||
|
||||
//解析模板
|
||||
that.elem = $(TPL_MAIN);
|
||||
|
||||
var othis = options.elem = $(options.elem);
|
||||
if(!othis[0]) return;
|
||||
|
||||
//索引
|
||||
that.key = options.id || that.index;
|
||||
|
||||
//插入组件结构
|
||||
othis.html(that.elem);
|
||||
|
||||
that.events(); //事件
|
||||
};
|
||||
|
||||
//事件
|
||||
Class.prototype.events = function(){
|
||||
var that = this;
|
||||
|
||||
|
||||
};
|
||||
|
||||
|
||||
|
||||
//记录所有实例
|
||||
thisModule.that = {}; //记录所有实例对象
|
||||
thisModule.config = {}; //记录所有实例配置项
|
||||
|
||||
//重载实例
|
||||
modeDemo.reload = function(id, options){
|
||||
var that = thisModule.that[id];
|
||||
that.reload(options);
|
||||
|
||||
return thisModule.call(that);
|
||||
};
|
||||
|
||||
//核心入口
|
||||
modeDemo.render = function(options){
|
||||
var inst = new Class(options);
|
||||
return thisTransfer.call(inst);
|
||||
};
|
||||
|
||||
exports(MOD_NAME, modeDemo);
|
||||
});
|
||||
@@ -20,7 +20,7 @@ body{padding: 20px; /*overflow-y: scroll;*/}
|
||||
<button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
|
||||
<button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
|
||||
<button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
|
||||
<button class="layui-btn layui-btn-sm" lay-event="reload">无抖重载</button>
|
||||
<button class="layui-btn layui-btn-sm" lay-event="reload">重载</button>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
|
||||
@@ -7,13 +7,16 @@
|
||||
|
||||
<link rel="stylesheet" href="../src/css/layui.css">
|
||||
<style>
|
||||
body{padding-left: 200px; padding-top: 30px;}
|
||||
#text1,#text2{padding-top: 80px;}
|
||||
body{padding: 100px;}
|
||||
#text1,#text2{padding-top: 60px;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<button id="btn" class="layui-btn">获取右侧值</button>
|
||||
<div class="layui-btn-container">
|
||||
<button type="button" class="layui-btn" lay-demo="getData">获取右侧数据</button>
|
||||
<button type="button" class="layui-btn" lay-demo="reload">重载实例</button>
|
||||
</div>
|
||||
|
||||
<div id="text1"></div>
|
||||
|
||||
@@ -24,31 +27,31 @@
|
||||
|
||||
<script src="../src/layui.js"></script>
|
||||
<script>
|
||||
layui.use('transfer', function(){
|
||||
var transfer = layui.transfer
|
||||
,$ = layui.$;
|
||||
layui.use(['transfer', 'util'], function(){
|
||||
var $ = layui.$
|
||||
,transfer = layui.transfer
|
||||
,util = layui.util;
|
||||
|
||||
var ins1 = transfer.render({
|
||||
elem: '#text1'
|
||||
,parseData: function(res){
|
||||
return {
|
||||
"value": res.status
|
||||
,"title": res.label
|
||||
,"disabled": res.check
|
||||
}
|
||||
}
|
||||
,data: [{"status": "1", "label": "瓦罐汤", "check": false}
|
||||
,{"status": "2", "label": "油酥饼", "check": false}
|
||||
,{"status": "3", "label": "炸酱面", "check": false}
|
||||
,{"status": "4", "label": "串串香", "check": true}
|
||||
,{"status": "5", "label": "豆腐脑", "check": false}
|
||||
,{"status": "6", "label": "驴打滚", "check": false}]
|
||||
,value: ["1", "5"]
|
||||
,title: ['候选文人', '获奖文人']
|
||||
,data: [
|
||||
{"value": "1", "title": "李白"}
|
||||
,{"value": "2", "title": "杜甫"}
|
||||
,{"value": "3", "title": "贤心"}
|
||||
,{"value": "4", "title": "鲁迅", "disabled": true}
|
||||
,{"value": "5", "title": "巴金"}
|
||||
,{"value": "6", "title": "冰心"}
|
||||
]
|
||||
,value: ["2", "3"]
|
||||
,showSearch: true
|
||||
});
|
||||
|
||||
$("#btn").on('click', function(){
|
||||
alert(JSON.stringify(ins1.getData()))
|
||||
//按钮事件
|
||||
util.event('lay-demo', {
|
||||
getData: function(othis){
|
||||
alert(JSON.stringify(ins1.getData()))
|
||||
}
|
||||
});
|
||||
|
||||
var ins2 = transfer.render({
|
||||
@@ -56,22 +59,23 @@
|
||||
,onchange: function(obj){
|
||||
console.log(obj)
|
||||
}
|
||||
,data: [{"value": "1", "title": "瓦罐汤", "disabled": false}
|
||||
,{"value": "2", "title": "油酥饼", "disabled": false}
|
||||
,{"value": "3", "title": "炸酱面", "disabled": false}
|
||||
,{"value": "4", "title": "串串香", "disabled": true}
|
||||
,{"value": "5", "title": "豆腐脑", "disabled": false}
|
||||
,{"value": "6", "title": "驴打滚", "disabled": false}
|
||||
,{"value": "7", "title": "北京烤鸭", "disabled": false}
|
||||
,{"value": "8", "title": "烤冷面", "disabled": false}
|
||||
,{"value": "9", "title": "毛血旺", "disabled": true}
|
||||
,{"value": "10", "title": "肉夹馍", "disabled": false}
|
||||
,{"value": "11", "title": "臊子面", "disabled": false}
|
||||
,{"value": "12", "title": "凉皮", "disabled": false}
|
||||
,{"value": "13", "title": "羊肉泡馍", "disabled": false}
|
||||
,{"value": "14", "title": "冰糖葫芦", "disabled": true}
|
||||
,{"value": "15", "title": "狼牙土豆", "disabled": false}]
|
||||
,value: ["1", "3", "5", "7", "9", "11"]
|
||||
,parseData: function(res){
|
||||
return {
|
||||
"value": res.id
|
||||
,"title": res.label
|
||||
,"disabled": res.disabled
|
||||
,"checked": res.checked
|
||||
}
|
||||
}
|
||||
,data: [
|
||||
{"id": "1", "label": "瓦罐汤"}
|
||||
,{"id": "2", "label": "油酥饼"}
|
||||
,{"id": "3", "label": "炸酱面"}
|
||||
,{"id": "4", "label": "串串香", "disabled": true}
|
||||
,{"id": "5", "label": "豆腐脑"}
|
||||
,{"id": "6", "label": "驴打滚"}
|
||||
]
|
||||
,value: ["1", "5"]
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user