123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472 |
- /**
- @Name:layui.element 常用元素操作
- @Author:贤心
- @License:MIT
-
- */
-
- layui.define('jquery', function(exports){
- "use strict";
-
- var $ = layui.$
- ,hint = layui.hint()
- ,device = layui.device()
-
- ,MOD_NAME = 'element', THIS = 'layui-this', SHOW = 'layui-show'
-
- ,Element = function(){
- this.config = {};
- };
-
- //全局设置
- Element.prototype.set = function(options){
- var that = this;
- $.extend(true, that.config, options);
- return that;
- };
-
- //表单事件监听
- Element.prototype.on = function(events, callback){
- return layui.onevent.call(this, MOD_NAME, events, callback);
- };
-
- //外部Tab新增
- Element.prototype.tabAdd = function(filter, options){
- var TITLE = '.layui-tab-title'
- ,tabElem = $('.layui-tab[lay-filter='+ filter +']')
- ,titElem = tabElem.children(TITLE)
- ,barElem = titElem.children('.layui-tab-bar')
- ,contElem = tabElem.children('.layui-tab-content')
- ,li = '<li lay-id="'+ (options.id||'') +'"'
- +(options.attr ? ' lay-attr="'+ options.attr +'"' : '') +'>'+ (options.title||'unnaming') +'</li>';
-
- barElem[0] ? barElem.before(li) : titElem.append(li);
- contElem.append('<div class="layui-tab-item">'+ (options.content||'') +'</div>');
- call.hideTabMore(true);
- call.tabAuto();
- return this;
- };
-
- //外部Tab删除
- Element.prototype.tabDelete = function(filter, layid){
- var TITLE = '.layui-tab-title'
- ,tabElem = $('.layui-tab[lay-filter='+ filter +']')
- ,titElem = tabElem.children(TITLE)
- ,liElem = titElem.find('>li[lay-id="'+ layid +'"]');
- call.tabDelete(null, liElem);
- return this;
- };
-
- //外部Tab切换
- Element.prototype.tabChange = function(filter, layid){
- var TITLE = '.layui-tab-title'
- ,tabElem = $('.layui-tab[lay-filter='+ filter +']')
- ,titElem = tabElem.children(TITLE)
- ,liElem = titElem.find('>li[lay-id="'+ layid +'"]');
- call.tabClick.call(liElem[0], null, null, liElem);
- return this;
- };
-
- //自定义Tab选项卡
- Element.prototype.tab = function(options){
- options = options || {};
- dom.on('click', options.headerElem, function(e){
- var index = $(this).index();
- call.tabClick.call(this, e, index, null, options);
- });
- };
-
-
- //动态改变进度条
- Element.prototype.progress = function(filter, percent){
- var ELEM = 'layui-progress'
- ,elem = $('.'+ ELEM +'[lay-filter='+ filter +']')
- ,elemBar = elem.find('.'+ ELEM +'-bar')
- ,text = elemBar.find('.'+ ELEM +'-text');
- elemBar.css('width', percent);
- text.text(percent);
- return this;
- };
-
- var NAV_ELEM = '.layui-nav', NAV_ITEM = 'layui-nav-item', NAV_BAR = 'layui-nav-bar'
- ,NAV_TREE = 'layui-nav-tree', NAV_CHILD = 'layui-nav-child', NAV_MORE = 'layui-nav-more'
- ,NAV_ANIM = 'layui-anim layui-anim-upbit'
-
- //基础事件体
- ,call = {
- //Tab点击
- tabClick: function(e, index, liElem, options){
- options = options || {};
- var othis = liElem || $(this)
- ,index = index || othis.parent().children('li').index(othis)
- ,parents = options.headerElem ? othis.parent() : othis.parents('.layui-tab').eq(0)
- ,item = options.bodyElem ? $(options.bodyElem) : parents.children('.layui-tab-content').children('.layui-tab-item')
- ,elemA = othis.find('a')
- ,filter = parents.attr('lay-filter');
-
- if(!(elemA.attr('href') !== 'javascript:;' && elemA.attr('target') === '_blank')){
- othis.addClass(THIS).siblings().removeClass(THIS);
- item.eq(index).addClass(SHOW).siblings().removeClass(SHOW);
- }
-
- layui.event.call(this, MOD_NAME, 'tab('+ filter +')', {
- elem: parents
- ,index: index
- });
- }
-
- //Tab删除
- ,tabDelete: function(e, othis){
- var li = othis || $(this).parent(), index = li.index()
- ,parents = li.parents('.layui-tab').eq(0)
- ,item = parents.children('.layui-tab-content').children('.layui-tab-item')
- ,filter = parents.attr('lay-filter');
-
- if(li.hasClass(THIS)){
- if(li.next()[0]){
- call.tabClick.call(li.next()[0], null, index + 1);
- } else if(li.prev()[0]){
- call.tabClick.call(li.prev()[0], null, index - 1);
- }
- }
-
- li.remove();
- item.eq(index).remove();
- setTimeout(function(){
- call.tabAuto();
- }, 50);
-
- layui.event.call(this, MOD_NAME, 'tabDelete('+ filter +')', {
- elem: parents
- ,index: index
- });
- }
-
- //Tab自适应
- ,tabAuto: function(){
- var SCROLL = 'layui-tab-scroll', MORE = 'layui-tab-more', BAR = 'layui-tab-bar'
- ,CLOSE = 'layui-tab-close', that = this;
-
- $('.layui-tab').each(function(){
- var othis = $(this)
- ,title = othis.children('.layui-tab-title')
- ,item = othis.children('.layui-tab-content').children('.layui-tab-item')
- ,STOPE = 'lay-stope="tabmore"'
- ,span = $('<span class="layui-unselect layui-tab-bar" '+ STOPE +'><i '+ STOPE +' class="layui-icon"></i></span>');
- if(that === window && device.ie != 8){
- call.hideTabMore(true)
- }
-
- //允许关闭
- if(othis.attr('lay-allowClose')){
- title.find('li').each(function(){
- var li = $(this);
- if(!li.find('.'+CLOSE)[0]){
- var close = $('<i class="layui-icon layui-unselect '+ CLOSE +'">ဆ</i>');
- close.on('click', call.tabDelete);
- li.append(close);
- }
- });
- }
-
- if(typeof othis.attr('lay-unauto') === 'string') return;
-
- //响应式
- if(title.prop('scrollWidth') > title.outerWidth()+1){
- if(title.find('.'+BAR)[0]) return;
- title.append(span);
- othis.attr('overflow', '');
- span.on('click', function(e){
- title[this.title ? 'removeClass' : 'addClass'](MORE);
- this.title = this.title ? '' : '收缩';
- });
- } else {
- title.find('.'+BAR).remove();
- othis.removeAttr('overflow');
- }
- });
- }
- //隐藏更多Tab
- ,hideTabMore: function(e){
- var tsbTitle = $('.layui-tab-title');
- if(e === true || $(e.target).attr('lay-stope') !== 'tabmore'){
- tsbTitle.removeClass('layui-tab-more');
- tsbTitle.find('.layui-tab-bar').attr('title','');
- }
- }
-
- //点击一级菜单
- /*
- ,clickThis: function(){
- var othis = $(this), parents = othis.parents(NAV_ELEM)
- ,filter = parents.attr('lay-filter')
- ,elemA = othis.find('a')
- ,unselect = typeof othis.attr('lay-unselect') === 'string';
- if(othis.find('.'+NAV_CHILD)[0]) return;
-
- if(!(elemA.attr('href') !== 'javascript:;' && elemA.attr('target') === '_blank') && !unselect){
- parents.find('.'+THIS).removeClass(THIS);
- othis.addClass(THIS);
- }
-
- layui.event.call(this, MOD_NAME, 'nav('+ filter +')', othis);
- }
- )
- */
-
- //点击菜单 - a标签触发
- ,clickThis: function(){
- var othis = $(this)
- ,parents = othis.parents(NAV_ELEM)
- ,filter = parents.attr('lay-filter')
- ,parent = othis.parent()
- ,child = othis.siblings('.'+NAV_CHILD)
- ,unselect = typeof parent.attr('lay-unselect') === 'string';
-
- if(!(othis.attr('href') !== 'javascript:;' && othis.attr('target') === '_blank') && !unselect){
- if(!child[0]){
- parents.find('.'+THIS).removeClass(THIS);
- parent.addClass(THIS);
- }
- }
-
- //如果是垂直菜单
- if(parents.hasClass(NAV_TREE)){
- child.removeClass(NAV_ANIM);
-
- //如果有子菜单,则展开
- if(child[0]){
- parent[child.css('display') === 'none' ? 'addClass': 'removeClass'](NAV_ITEM+'ed');
- if(parents.attr('lay-shrink') === 'all'){
- parent.siblings().removeClass(NAV_ITEM + 'ed');
- }
- }
- }
-
- layui.event.call(this, MOD_NAME, 'nav('+ filter +')', othis);
- }
-
- //点击子菜单选中
- /*
- ,clickChild: function(){
- var othis = $(this), parents = othis.parents(NAV_ELEM)
- ,filter = parents.attr('lay-filter');
- parents.find('.'+THIS).removeClass(THIS);
- othis.addClass(THIS);
- layui.event.call(this, MOD_NAME, 'nav('+ filter +')', othis);
- }
- */
-
- //折叠面板
- ,collapse: function(){
- var othis = $(this), icon = othis.find('.layui-colla-icon')
- ,elemCont = othis.siblings('.layui-colla-content')
- ,parents = othis.parents('.layui-collapse').eq(0)
- ,filter = parents.attr('lay-filter')
- ,isNone = elemCont.css('display') === 'none';
-
- //是否手风琴
- if(typeof parents.attr('lay-accordion') === 'string'){
- var show = parents.children('.layui-colla-item').children('.'+SHOW);
- show.siblings('.layui-colla-title').children('.layui-colla-icon').html('');
- show.removeClass(SHOW);
- }
-
- elemCont[isNone ? 'addClass' : 'removeClass'](SHOW);
- icon.html(isNone ? '' : '');
-
- layui.event.call(this, MOD_NAME, 'collapse('+ filter +')', {
- title: othis
- ,content: elemCont
- ,show: isNone
- });
- }
- };
-
- //初始化元素操作
- Element.prototype.init = function(type, filter){
- var that = this, elemFilter = function(){
- return filter ? ('[lay-filter="' + filter +'"]') : '';
- }(), items = {
-
- //Tab选项卡
- tab: function(){
- call.tabAuto.call({});
- }
-
- //导航菜单
- ,nav: function(){
- var TIME = 200, timer = {}, timerMore = {}, timeEnd = {}, follow = function(bar, nav, index){
- var othis = $(this), child = othis.find('.'+NAV_CHILD);
-
- if(nav.hasClass(NAV_TREE)){
- bar.css({
- top: othis.position().top
- ,height: othis.children('a').outerHeight()
- ,opacity: 1
- });
- } else {
- child.addClass(NAV_ANIM);
- bar.css({
- left: othis.position().left + parseFloat(othis.css('marginLeft'))
- ,top: othis.position().top + othis.height() - bar.height()
- });
-
- timer[index] = setTimeout(function(){
- bar.css({
- width: othis.width()
- ,opacity: 1
- });
- }, device.ie && device.ie < 10 ? 0 : TIME);
-
- clearTimeout(timeEnd[index]);
- if(child.css('display') === 'block'){
- clearTimeout(timerMore[index]);
- }
- timerMore[index] = setTimeout(function(){
- child.addClass(SHOW)
- othis.find('.'+NAV_MORE).addClass(NAV_MORE+'d');
- }, 300);
- }
- }
-
- $(NAV_ELEM + elemFilter).each(function(index){
- var othis = $(this)
- ,bar = $('<span class="'+ NAV_BAR +'"></span>')
- ,itemElem = othis.find('.'+NAV_ITEM);
-
- //Hover滑动效果
- if(!othis.find('.'+NAV_BAR)[0]){
- othis.append(bar);
- itemElem.on('mouseenter', function(){
- follow.call(this, bar, othis, index);
- }).on('mouseleave', function(){
- if(!othis.hasClass(NAV_TREE)){
- clearTimeout(timerMore[index]);
- timerMore[index] = setTimeout(function(){
- othis.find('.'+NAV_CHILD).removeClass(SHOW);
- othis.find('.'+NAV_MORE).removeClass(NAV_MORE+'d');
- }, 300);
- }
- });
- othis.on('mouseleave', function(){
- clearTimeout(timer[index])
- timeEnd[index] = setTimeout(function(){
- if(othis.hasClass(NAV_TREE)){
- bar.css({
- height: 0
- ,top: bar.position().top + bar.height()/2
- ,opacity: 0
- });
- } else {
- bar.css({
- width: 0
- ,left: bar.position().left + bar.width()/2
- ,opacity: 0
- });
- }
- }, TIME);
- });
- }
-
- //展开子菜单
- itemElem.find('a').each(function(){
- var thisA = $(this)
- ,parent = thisA.parent()
- ,child = thisA.siblings('.'+NAV_CHILD);
-
- //输出小箭头
- if(child[0] && !thisA.children('.'+NAV_MORE)[0]){
- thisA.append('<span class="'+ NAV_MORE +'"></span>');
- }
-
- thisA.off('click', call.clickThis).on('click', call.clickThis); //点击菜单
- });
- });
- }
-
- //面包屑
- ,breadcrumb: function(){
- var ELEM = '.layui-breadcrumb';
-
- $(ELEM + elemFilter).each(function(){
- var othis = $(this)
- ,ATTE_SPR = 'lay-separator'
- ,separator = othis.attr(ATTE_SPR) || '/'
- ,aNode = othis.find('a');
- if(aNode.next('span['+ ATTE_SPR +']')[0]) return;
- aNode.each(function(index){
- if(index === aNode.length - 1) return;
- $(this).after('<span '+ ATTE_SPR +'>'+ separator +'</span>');
- });
- othis.css('visibility', 'visible');
- });
- }
-
- //进度条
- ,progress: function(){
- var ELEM = 'layui-progress';
- $('.' + ELEM + elemFilter).each(function(){
- var othis = $(this)
- ,elemBar = othis.find('.layui-progress-bar')
- ,percent = elemBar.attr('lay-percent');
- elemBar.css('width', function(){
- return /^.+\/.+$/.test(percent)
- ? (new Function('return '+ percent)() * 100) + '%'
- : percent;
- }());
-
- if(othis.attr('lay-showPercent')){
- setTimeout(function(){
- elemBar.html('<span class="'+ ELEM +'-text">'+ percent +'</span>');
- },350);
- }
- });
- }
-
- //折叠面板
- ,collapse: function(){
- var ELEM = 'layui-collapse';
-
- $('.' + ELEM + elemFilter).each(function(){
- var elemItem = $(this).find('.layui-colla-item')
- elemItem.each(function(){
- var othis = $(this)
- ,elemTitle = othis.find('.layui-colla-title')
- ,elemCont = othis.find('.layui-colla-content')
- ,isNone = elemCont.css('display') === 'none';
-
- //初始状态
- elemTitle.find('.layui-colla-icon').remove();
- elemTitle.append('<i class="layui-icon layui-colla-icon">'+ (isNone ? '' : '') +'</i>');
- //点击标题
- elemTitle.off('click', call.collapse).on('click', call.collapse);
- });
-
- });
- }
- };
- return items[type] ? items[type]() : layui.each(items, function(index, item){
- item();
- });
- };
-
- Element.prototype.render = Element.prototype.init;
- var element = new Element(), dom = $(document);
- element.render();
-
- var TITLE = '.layui-tab-title li';
- dom.on('click', TITLE, call.tabClick); //Tab切换
- dom.on('click', call.hideTabMore); //隐藏展开的Tab
- $(window).on('resize', call.tabAuto); //自适应
-
- exports(MOD_NAME, element);
- });
|