加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
克隆/下载
tablist.html 23.76 KB
一键复制 编辑 原始数据 按行查看 历史
dujimmy 提交于 2019-08-21 18:08 . 初始文件上传
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script src="./jquery-1.10.2.min.js"></script>
<script src="./base.js"></script>
<style>
ul,li{
margin: 0;
padding: 0;
list-style: none;
}
.ul-list{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-size: 14px;
border-top: 1px solid #E4E7ED;
}
.ul-list .ul-li {
padding: 10px 15px;
border-bottom: 1px solid #E4E7ED;
cursor: pointer;
}
.ul-list .ul-li input[type='checkbox'] {
/*隐藏掉原先实际的 checkbox 框,之所以没用 display:none;
这种简单直接的方式,是因为这种方法会把它从键盘 tab 键切换焦点的队列中完全删除*/
position: absolute;
clip: rect(0, 0, 0, 0);
}
.ul-list .ul-li input[type='checkbox']+label::before {
content: '\a0';
/*不换行空格*/
display: inline-block;
vertical-align: 0.2em;
width: 1em;
height:1em;
margin-right: .2em;
border-radius: .2em;
background: #fff;
/*复选框的背景色*/
text-indent: 0.15em;
line-height: 0.65;
/* 放到皮肤中设置
border: 1px solid #DCE4FD;
border-radius: 50%; */
}
/*皮肤样式*/
.hwlist-default{
border-top: 1px solid #E4E7ED;
}
.hwlist-default .ul-li {
border-bottom: 1px solid #E4E7ED;
}
.hwlist-default .selected {
color: #1989FA;
}
.hwlist-default .selected label{
color: #1989FA;
}
.hwlist-default .ul-li input[type='checkbox']+label::before{
border: 1px solid #DCE4FD;
border-radius: 50%;
}
.hwlist-default .ul-li input[type='checkbox']:checked+label::before {
content: '\2713';
color:#fff;
/*对号的 Unicode字符*/
background: #52C41A;
/*对号的颜色*/
}
/*选中时文本颜色*/
.hwlist-default .ul-li input[type='checkbox']:checked+label{
/* color:#1989FA; */
}
</style>
<script>
var listTComponent = HwBase.extend({
context: {},//上下文
tpl: '<ul class="ul-list">'+
'<% for(var listid in obj.data){%>'+
'<% if(obj.mutiCheck){ %>'+
'<li class="ul-li <%= obj.autoFirstCheck==true && listid==0 ? \'selected\':\'\' %>">'+
'<input type="checkbox" id="<%= obj.data[listid][obj.showFields.idfield] %>" <%= obj.autoFirstCheck==true && listid==0 ? \'checked\':\'\' %>>'+
'<label for="<%= obj.data[listid][obj.showFields.idfield] %>"><%= obj.data[listid][obj.showFields.textfield] %></label>'+
'</li>'+
'<%}else{ %>'+
'<li class="ul-li <%= obj.autoFirstCheck==true && listid==0 ? \'selected\':\'\' %>" id="<%= obj.data[listid][obj.showFields.idfield] %>">'+
'<%= obj.data[listid][obj.showFields.textfield] %>'+
'</li>'+
'<%}%>'+
'<%}%>'+
'</ul>',//模板
container: {},//容器对象
opts: {
env:'dev',//dev or vmd
container: '#container',//容器
width: '',//宽度
height: '',//高度
skin: 'default',//默认皮肤
autoSearch: false,//是否开启搜索
mutiCheck: true,//是否开启多选
autoFirstCheck: true,//是否默认选中第一行
showFields: { idfield: 'dyid', textfield: 'dymc' },//显示字段和id字段
dataStore: [{dyid:"THAT13",dymc:"塔河AT13区块"},
{dyid:"THAT14",dymc:"塔河AT14区块"},
{dyid:"THAT15",dymc:"塔河AT15区块"}
],//tab数据集
temClick:function(item,self,e){}
},//默认配置项
init: function (config) {
//自动保存配置项
this.__config = $.extend({}, this.opts, config);
this.render()
this.bind()
},
//可以使用get来获取配置项
get: function (key) {
return this.__config[key]
},
//可以使用set来设置配置项
set: function (key, value) {
this.__config[key] = value
},
bind: function () {
var self = this;
var parentNode = self.get('container') || $(document.body);
//列表项选中事件
parentNode.find(".ul-list li").on('click',function(e){
var target = $(this);
//多选情况
if(self.get('mutiCheck')){
var checkbox = target.find('input');
if(checkbox.is(":checked")){
target.removeClass("selected");
checkbox.prop("checked",false);
}else{
target.addClass("selected");
checkbox.prop("checked",true);
}
}
//单选情况
else{
target.addClass('selected').siblings().removeClass('selected');
}
if(Object.prototype.toString.call(self.get('itemClick'))=='[object Function]'){
var index = $(".ul-list li").index(target);
//写了itemclick配置调用,绑定了组件事件也调用
self.get('itemClick')(self.get('__renderData')[index],self,e);
self.fire('itemClick',self.get('__renderData')[index],self,e);
}
})
},
render: function (dataConf) {
var self = this;
var data = {
autoSearch: self.get('autoSearch'),//是否开启搜索
mutiCheck: self.get("mutiCheck"),//是否开启多选
autoFirstCheck : self.get("autoFirstCheck"),//是否默认选中第一行
autoSearch: self.get("autoSearch"),
showFields : self.get("showFields"),
data: dataConf || self.get('dataStore')
}
self.set("__renderData",data);
var html = self.parseTemplate(self.tpl,data);
var currentNode = $(html)
//设置宽度、高度、和皮肤
if(self.get('width')) currentNode.width(self.get('width'))
if(self.get('height')) currentNode.height(self.get('height'))
if(self.get('skin')) currentNode.addClass('hwlist-' + self.get('skin') || 'default')
self.set('__currentNode',currentNode)
if(self.get('env')=='dev'){
self.container = this.get('container') || $(document.body);
self.container.append(currentNode)
}else{
self.container = this.get('container');
self.container.update(html)
}
},
//定义销毁的方法,一些收尾工作都应该在这里
destroy: function () {
var self = this
//去掉自身的事件监听
self.off()
//删除渲染好的dom节点
self.get('__currentNode').remove()
},
//跟新数据
setData:function(data){
var self = this;
var newdata = {
autoSearch: self.get('autoSearch'),//是否开启搜索
mutiCheck: self.get("mutiCheck"),//是否开启多选
autoFirstCheck : self.get("autoFirstCheck"),//是否默认选中第一行
autoSearch: self.get("autoSearch"),
showFields : self.get("showFields"),
data: data || self.get('dataStore')
}
var html = self.parseTemplate(self.tpl,newdata);
var newHtmlNode = $(html)
//设置宽度、高度、和皮肤
if(self.get('width')) newHtmlNode.width(self.get('width'))
if(self.get('height')) newHtmlNode.height(self.get('height'))
if(self.get('skin')) newHtmlNode.addClass('hwlist-' + self.get('skin') || 'default')
var currentNode = self.get('__currentNode')
if (!currentNode) return;
currentNode.replaceWith(newHtmlNode)
self.set('__currentNode',currentNode)
self.set("__renderData",data);
self.bind();
},
//获取选中的对象
getSelectItem:function(){
var self = this;
var currentNode = self.get('__currentNode');
return currentNode.find("li.selected");
}
})
var tabTComponent = HwBase.extend({
context: {},//上下文
tpl: '<div class="hwtab">'+
'<ul class= "tab-title">'+
'<% for(var item in obj){%>'+
'<li class="<%= obj[item].select && (obj[item].select==true) ? \'layui-this\' :\'\' %>"><%= obj[item].text %></li>'+
'<%}%>'+
'</ul>'+
'<div class="tab-content">'+
'<% for(var item in obj){%>'+
'<div id="<%= obj[item].id %>" class="tab-item <%= obj[item].select && (obj[item].select==true) ? \'tab-show\' :\'\' %>">'+
'</div>'+
'<%}%>'+
'</div>' +
'</div>',//模板
container: {},//容器对象
opts: {
env:'dev',//dev or vmd
container: '#container',//容器
width: '',//宽度
height: '',//高度
skin: 'default',//默认皮肤
dataStore:[{ id: "kfdy", text: "开发单元", select: true }, { id: "fddy", text: "缝洞单元"}],
tabChange:function(item,self,e){}
},//默认配置项
init: function (config) {
//自动保存配置项
this.__config = $.extend({}, this.opts, config);
this.render()
this.bind()
},
//可以使用get来获取配置项
get: function (key) {
return this.__config[key]
},
//可以使用set来设置配置项
set: function (key, value) {
this.__config[key] = value
},
bind: function () {
var self = this;
var parentNode = self.get('container') || $(document.body);
//tab切换事件
parentNode.find(".tab-title li").on('click',function(e){
var index = $("ul.tab-title li").index($(this));
$(this).addClass('layui-this').siblings().removeClass('layui-this');
$(".tab-content").children(".tab-item").removeClass('tab-show').eq(index).addClass('tab-show');
if(Object.prototype.toString.call(self.get('tabChange'))=='[object Function]'){
self.get('tabChange')(self.get('__renderData')[index],self,e);
self.fire('tabChange',self.get('__renderData')[index],self,e);
}
})
},
render: function (data) {
var self = this;
data = data || self.get('dataStore');
self.set("__renderData",data);
var html = self.parseTemplate(self.tpl,data);
var currentNode = $(html)
//设置宽度、高度、和皮肤
if(self.get('width')) currentNode.width(self.get('width'))
if(self.get('height')) currentNode.height(self.get('height'))
if(self.get('skin')) currentNode.addClass('hwtab-' + self.get('skin') || 'default')
self.set('__currentNode',currentNode)
if(self.get('env')=='dev'){
self.container = this.get('container') || $(document.body);
self.container.append(currentNode)
}else{
self.container = this.get('container');
self.container.update(html)
}
},
//定义销毁的方法,一些收尾工作都应该在这里
destroy: function () {
var self = this
//去掉自身的事件监听
self.off()
//删除渲染好的dom节点
self.get('__currentNode').remove()
},
//跟新数据
setData:function(data){
var self = this;
var html = self.parseTemplate(self.tpl,data);
var newHtmlNode = $(html)
//设置宽度、高度、和皮肤
if(self.get('width')) newHtmlNode.width(self.get('width'))
if(self.get('height')) newHtmlNode.height(self.get('height'))
if(self.get('skin')) newHtmlNode.addClass('hwtab-' + self.get('skin') || 'default')
var currentNode = self.get('__currentNode')
if (!currentNode) return;
currentNode.replaceWith(newHtmlNode)
self.set('__currentNode',currentNode)
self.set("__renderData",data);
self.bind();
},
//获取当前选中的tab对象
getSelectTab:function(){
var self = this;
var currentNode = self.get('__currentNode');
return currentNode.find("ul.tab-title li.layui-this");
},
getSelectTabContent:function(){
var self = this;
var currentNode = self.get('__currentNode');
return currentNode.find(".tab-content .tab-show");
},
getAllTabContent: function(){
var self = this;
var currentNode = self.get('__currentNode');
return currentNode.find('.tab-content .tab-item');
},
getAllTab:function(){
var self = this;
var currentNode = self.get('__currentNode');
return currentNode.find("ul.tab-title li");
}
})
</script>
<script>
var tablistTComponent = HwBase.extend({
context: {},//上下文
tpl: '',//模板
container: {},//容器对象
opts: {
env:'dev',//dev or vmd
container: '#container',//容器
width: '',//宽度
height: '',//高度
skin:'default',
dataStore:[{ id: "kfdy", text: "开发单元", select: true }, { id: "fddy", text: "缝洞单元"}],
tabChange:function(item,self,e){},
listConf:{
skin:'default',
autoSearch: false,//是否开启搜索
mutiCheck: true,//是否开启多选
autoFirstCheck: true,//是否默认选中第一行
showFields: { idfield: 'dyid', textfield: 'dymc' },//显示字段和id字段
dataStore: [{dyid:"THAT13",dymc:"塔河AT13区块"},
{dyid:"THAT14",dymc:"塔河AT14区块"},
{dyid:"THAT15",dymc:"塔河AT15区块"}
],//tab数据集
temClick:function(item,self,e){}
}
},//默认配置项
init: function (config) {
//自动保存配置项
this.__config = $.extend({}, this.opts, config);
this.render()
this.bind()
},
//可以使用get来获取配置项
get: function (key) {
return this.__config[key]
},
//可以使用set来设置配置项
set: function (key, value) {
this.__config[key] = value
},
bind: function () {
var self = this;
var parentNode = self.get('container') || $(document.body);
//tab切换事件
parentNode.find(".tab-title li").on('click',function(e){
var index = $("ul.tab-title li").index($(this));
$(this).addClass('layui-this').siblings().removeClass('layui-this');
$(".tab-content").children(".tab-item").removeClass('tab-show').eq(index).addClass('tab-show');
if(Object.prototype.toString.call(self.get('tabChange'))=='[object Function]'){
self.get('tabChange')(self,e);
}
})
parentNode.find(".tab-item li").on('click',function(e){
var target = $(this);
//多选情况
if(self.get('mutiCheck')){
var checkbox = target.find('input');
if(checkbox.is(":checked")){
target.removeClass("selected");
checkbox.prop("checked",false);
}else{
target.addClass("selected");
checkbox.prop("checked",true);
}
}
//单选情况
else{
target.addClass('selected').siblings().removeClass('selected');
}
if(Object.prototype.toString.call(self.get('itemClick'))=='[object Function]'){
self.get('itemClick')(self,e);
}
})
},
//用来实现刷新,只需要传入之前render时的数据里的key还有更新值,就可以自动刷新模板
setTabdata : function(key,value){
},
render: function () {
var self = this;
var tab = new tabTComponent({
env:self.get('env'),//dev or vmd
container: self.get('container'),//容器
width: self.get('width'),//宽度
height: self.get('height'),//高度
skin: self.get('tabConf').skin,//默认皮肤
dataStore:self.get('tabConf').dataStore,
tabChange:self.get('tabConf').tabChange
})
var tabconts = tab.getAllTabContent();
for(var index in tabconts){
var list = new listTComponent({
})
}
var data = {
mutiCheck: self.get("mutiCheck"),//是否开启多选
autoFirstCheck : self.get("autoFirstCheck"),//是否默认选中第一行
autoSearch: self.get("autoSearch"),
showFields : self.get("showFields"),
tabconf : tabconf || self.get("tabConf"),
listconf : listconf || self.get("dataStore")
}
self.set("__renderData",data);
var html = self.parseTemplate(self.tpl,data);
var currentNode = $(html)
//设置宽度、高度、和皮肤
if(self.get('width')) currentNode.width(self.get('width'))
if(self.get('height')) currentNode.height(self.get('height'))
if(self.get('skin')) currentNode.addClass('tablist-' + self.get('skin') || 'default')
self.set('__currentNode',currentNode)
if(self.get('env')=='dev'){
self.container = self.get('container') || $(document.body);
self.container.append(currentNode)
}else{
self.container = self.get('container');
self.container.update(html)
}
},
//定义销毁的方法,一些收尾工作都应该在这里
destroy: function () {
var self = this
//去掉自身的事件监听
self.off()
//删除渲染好的dom节点
self.get('__currentNode').remove()
}
})
$(function(){
var tablist = new tablistTComponent({
container:$(".111")
})
tablist.setChuckdata('kfdy',[{dyid:"123",dymc:"123"},
{dyid:"456",dymc:"456"},
{dyid:"789",dymc:"789"}])
})
</script>
</head>
<body>
<div style="width:400px;height:500px;" class='111'>
</div>
</body>
</html>
Loading...
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化