Merge pull request #1216 from layui/2.x

release v2.8.0-rc.14

examples/upload.html

@@ -193,6 +193,7 @@ layui.use(['upload', 'element'], function(){
     ,number: 3
     ,auto: false
     ,bindAction: '#testListAction'
+    ,size: 30
     ,choose: function(obj){   
       var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
       //读取本地文件
@@ -213,7 +214,9 @@ layui.use(['upload', 'element'], function(){
         });
         
         //删除
+        var that = this;
         tr.find('.demo-delete').on('click', function(){
+          console.log(files, index);
           delete files[index]; //删除对应的文件
           tr.remove();
           uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
@@ -308,6 +311,7 @@ layui.use(['upload', 'element'], function(){
     ,choose: function(obj){   
       var that = this;
       obj.preview(function(index, file){
+        that.elem.after('<span class="layui-inline layui-upload-choose">'+ file.name +'</span>');
         console.log(file.name);
         //obj.resetFile(index, file, '123.jpg');
       });

package.json

@@ -1,6 +1,6 @@
 {
   "name": "layui",
-  "version": "2.8.0-rc.13",
+  "version": "2.8.0-rc.14",
   "description": "Classic modular Front-End UI library",
   "main": "dist/layui.js",
   "license": "MIT",

src/css/layui.css

@@ -1261,7 +1261,7 @@ body .layui-table-tips .layui-layer-content{background: none; padding: 0; box-sh
 /** Tab 选项卡 **/
 .layui-tab{margin: 10px 0; text-align: left !important;}
 .layui-tab[overflow]>.layui-tab-title{overflow: hidden;}
-.layui-tab .layui-tab-title{position: relative; left: 0; height: 40px; padding-left: 0; white-space: nowrap; font-size: 0; border-bottom-width: 1px; border-bottom-style: solid; transition: all .2s; -webkit-transition: all .2s;}
+.layui-tab .layui-tab-title{position: relative; left: 0; height: 40px; white-space: nowrap; font-size: 0; border-bottom-width: 1px; border-bottom-style: solid; transition: all .2s; -webkit-transition: all .2s;}
 .layui-tab .layui-tab-title li{display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; font-size: 14px; transition: all .2s; -webkit-transition: all .2s;}
 .layui-tab .layui-tab-title li{position: relative; line-height: 40px; min-width: 65px; margin: 0; padding: 0 15px; text-align: center; cursor: pointer;}
 .layui-tab .layui-tab-title li a{display: block; padding: 0 15px; margin: 0 -15px;}
@@ -1405,24 +1405,25 @@ body .layui-util-face  .layui-layer-content{padding:0; background-color:#fff; co
 .layui-transfer-search{border-width: 0; border-style: solid; border-color: #eee}
 .layui-transfer-box{position: relative; display: inline-block; vertical-align: middle; border-width: 1px; width: 200px; height: 360px; border-radius: 2px; background-color:#fff;}
 .layui-transfer-box .layui-form-checkbox{width: 100%; margin: 0 !important;}
-.layui-transfer-header{height: 38px; line-height: 38px; padding: 0 10px; border-bottom-width: 1px;}
+.layui-transfer-header{height: 38px; line-height: 38px; padding: 0 11px; border-bottom-width: 1px;}
-.layui-transfer-search{position:relative; padding: 10px; border-bottom-width: 1px;}
+.layui-transfer-search{position:relative; padding: 11px; border-bottom-width: 1px;}
 .layui-transfer-search .layui-input{height: 32px; padding-left: 30px; font-size: 12px;}
-.layui-transfer-search .layui-icon-search{position: absolute; left: 20px; top: 50%; margin-top: -8px; color: #5F5F5F;}
+.layui-transfer-search .layui-icon-search{position: absolute; left: 20px; top: 50%; line-height: normal; margin-top: -8px; color: #5F5F5F;}
 .layui-transfer-active{margin: 0 15px; display: inline-block; vertical-align: middle;}
 .layui-transfer-active .layui-btn{display: block; margin: 0; padding: 0 15px; background-color: #5FB878; border-color: #5FB878; color: #fff;}
 .layui-transfer-active .layui-btn-disabled{background-color: #FBFBFB; border-color: #eee; color: #d2d2d2;}
 .layui-transfer-active .layui-btn:first-child{margin-bottom: 15px;}
 .layui-transfer-active .layui-btn .layui-icon{margin: 0; font-size: 14px !important;}
 .layui-transfer-data{padding: 5px 0; overflow: auto;}
-.layui-transfer-data li{height: 32px; line-height: 32px; padding: 0 10px;}
+.layui-transfer-data li{height: 32px; line-height: 32px; margin-top: 0 !important; padding: 0 11px;list-style-type: none !important;}
 .layui-transfer-data li:hover{background-color: #f8f8f8; transition: .5s all;}
-.layui-transfer-data .layui-none{padding: 15px 10px; text-align: center; color: #999;}
+.layui-transfer-data .layui-none{padding: 15px 11px; text-align: center; color: #999;}
 
 /** 评分组件 **/
 .layui-rate,
 .layui-rate *{display: inline-block; vertical-align: middle;}
-.layui-rate{padding: 10px 5px 10px 0; font-size: 0;}
+.layui-rate{padding: 11px 6px 11px 0; font-size: 0;}
+.layui-rate li{margin-top: 0 !important;}
 .layui-rate li i.layui-icon{ font-size: 20px; color: #FFB800;}
 .layui-rate li i.layui-icon{margin-right: 5px; transition: all .3s; -webkit-transition: all .3s;}
 .layui-rate li i:hover{cursor: pointer; transform: scale(1.12); -webkit-transform: scale(1.12);}

src/layui.js

@@ -15,7 +15,7 @@
   }
 
   ,Layui = function(){
-    this.v = '2.8.0-rc.13'; // Layui 版本号
+    this.v = '2.8.0-rc.14'; // Layui 版本号
   }
   
   //识别预先可能定义的指定全局对象

src/modules/carousel.js

@@ -3,15 +3,17 @@
  * MIT Licensed  
  */
  
-layui.define('jquery', function(exports){
+layui.define(['jquery', 'lay'], function(exports){
   "use strict";
   
-  var $ = layui.$
+  var $ = layui.$;
-  ,hint = layui.hint()
+  var lay = layui.lay;
-  ,device = layui.device()
+
+  var hint = layui.hint();
+  var device = layui.device();
 
   //外部接口
-  ,carousel = {
+  var carousel = {
     config: {} //全局配置项
 
     //设置全局项
@@ -55,8 +57,22 @@ layui.define('jquery', function(exports){
   
   //轮播渲染
   Class.prototype.render = function(){
-    var that = this
+    var that = this;
-    ,options = that.config;
+    var options = that.config;
+
+    // 若 elem 非唯一，则拆分为多个实例
+    var elem = $(options.elem);
+    if(elem.length > 1){
+      layui.each(elem, function(){
+        carousel.render($.extend({}, options, {
+          elem: this
+        }));
+      });
+      return that;
+    }
+
+    // 合并 lay-options 属性上的配置信息
+    $.extend(options, lay.options(elem[0]));
 
     options.elem = $(options.elem);
     if(!options.elem[0]) return;
@@ -196,7 +212,7 @@ layui.define('jquery', function(exports){
   };
 
   // 跳转到特定下标
-  Class.prototype.jump = function(index){
+  Class.prototype.goto = function(index){
     var that = this;
     var options = that.config;
 
@@ -238,7 +254,7 @@ layui.define('jquery', function(exports){
     
     // 事件
     tplInd.find('li').on(options.trigger === 'hover' ? 'mouseover' : options.trigger, function(){
-      that.jump($(this).index());
+      that.goto($(this).index());
     });
   };
   

src/modules/code.js

@@ -14,6 +14,7 @@ layui.define(['lay', 'util', 'element', 'form'], function(exports){
   // 常量
   var CONST = {
     ELEM_VIEW: 'layui-code-view',
+    ELEM_TAB: 'layui-tab',
     ELEM_TITLE: 'layui-code-title',
     ELEM_FULL: 'layui-code-full',
     ELEM_PREVIEW: 'layui-code-preview',
@@ -24,11 +25,11 @@ layui.define(['lay', 'util', 'element', 'form'], function(exports){
   // 默认参数项
   var config = {
     elem: '.layui-code', // 元素选择器
-    title: '</>', // 标题
+    title: '</>', // 代码栏标题
-    about: '', // 右上角信息
+    about: '', // 代码栏右上角信息
-    ln: true, // 是否显示行号
+    ln: true, // 代码区域是否显示行号
-    header: false, // 是否显示头部区域
+    header: false, // 是否显示代码栏头部区域
-
+    // 默认文本
     text: {
       code: util.escape('</>'),
       preview: 'Preview'
@@ -50,7 +51,6 @@ layui.define(['lay', 'util', 'element', 'form'], function(exports){
     // 从内至外渲染
     layui.each(options.elem.get().reverse(), function(index, item){
       var othis = $(item);
-      var html = trim(othis.html());
 
       // 合并属性上的参数，并兼容旧版本属性写法 lay-*
       var options = $.extend(true, {}, opts, lay.options(item), function(obj){
@@ -65,7 +65,7 @@ layui.define(['lay', 'util', 'element', 'form'], function(exports){
       }({}));
 
       // 获得代码
-      var codes = function(){
+      var codes = othis.data('code') || function(){
         var arr = [];
         var textarea = othis.children('textarea');
         
@@ -74,10 +74,6 @@ layui.define(['lay', 'util', 'element', 'form'], function(exports){
           arr.push(trim(this.value));
         });
         
-        if(textarea[0]){
-          html = util.escape(arr.join(''));
-        }
-        
         // 内容直接放置在元素外层
         if(arr.length === 0){
           arr.push(trim(othis.html()));
@@ -86,6 +82,8 @@ layui.define(['lay', 'util', 'element', 'form'], function(exports){
         return arr;
       }();
 
+      othis.data('code', codes);
+
       // 是否开启预览
       if(options.preview){
         var FILTER_VALUE = 'LAY-CODE-DF-'+ index;
@@ -102,7 +100,8 @@ layui.define(['lay', 'util', 'element', 'form'], function(exports){
           'layui-border'
         ].join(' ') +'">');
         var elemToolbar = $('<div class="layui-code-tools"></div>');
-        var elemViewHas = othis.prev('.' + CONST.ELEM_PREVIEW);
+        var elemViewHas = othis.parent('.' + CONST.ELEM_PREVIEW);
+        var elemTabHas = othis.prev('.'+ CONST.ELEM_TAB);
         var elemPreviewViewHas = othis.next('.' + CONST.ELEM_ITEM +'-preview');
 
         if(options.id) elemView.attr('id', options.id);
@@ -168,8 +167,9 @@ layui.define(['lay', 'util', 'element', 'form'], function(exports){
         });
 
         // 移除旧结构
-        if(elemViewHas[0]) elemViewHas.remove();
+        if(elemTabHas[0]) elemTabHas.remove(); // 移除 tab
-        if(elemPreviewViewHas[0]) elemPreviewViewHas.remove();
+        if(elemPreviewViewHas[0]) elemPreviewViewHas.remove(); // 移除预览区域
+        if(elemViewHas[0]) othis.unwrap(); // 移除外层容器
 
         elemTabView.append(elemHeaderView); // 追加标签头
         options.tools && elemTabView.append(elemToolbar); // 追加工具栏
@@ -247,9 +247,14 @@ layui.define(['lay', 'util', 'element', 'form'], function(exports){
       // 自定义风格
       if(options.skin){
         if(options.skin === 'notepad') options.skin = 'dark';
+        othis.removeClass('layui-code-dark layui-code-light');
         othis.addClass('layui-code-'+ options.skin);
       } 
 
+      
+      // code
+      var html = util.escape(codes.join(''));
+
       // 转义 HTML 标签
       if(options.encode) html = util.escape(html);
       html = html.replace(/[\r\t\n]+/g, '</li><li>'); // 转义换行符

src/modules/colorpicker.js

@@ -214,16 +214,18 @@ layui.define(['jquery', 'lay'], function(exports){
     ,'</div>'].join(''))
 
     //初始化颜色选择框
-    var othis = options.elem = $(options.elem);  
+    var elem = options.elem = $(options.elem);  
     options.size && elemColorBox.addClass('layui-colorpicker-'+ options.size); //初始化颜色选择框尺寸
     
     // 插入颜色选择框
-    othis.addClass('layui-inline').html(
+    elem.addClass('layui-inline').html(
       that.elemColorBox = elemColorBox
     );
 
-    //初始化 id 参数
+    // 初始化 id 属性 - 优先取 options > 元素 id > 自增索引
-    options.id = ('id' in options) ? options.id : that.index;
+    options.id = 'id' in options ? options.id : (
+      elem.attr('id') || that.index
+    );
     
     // 获取背景色值
     that.color = that.elemColorBox.find('.'+ PICKER_TRIG_SPAN)[0].style.background;

src/modules/dropdown.js

@@ -91,11 +91,11 @@ layui.define(['jquery', 'laytpl', 'lay'], function(exports){
 
   // 初始化准备
   Class.prototype.init = function(rerender){
-    var that = this
+    var that = this;
-    ,options = that.config
+    var options = that.config;
-    ,elem = options.elem = $(options.elem);
     
     // 若 elem 非唯一
+    var elem = $(options.elem);
     if(elem.length > 1){
       layui.each(elem, function(){
         dropdown.render($.extend({}, options, {
@@ -105,6 +105,9 @@ layui.define(['jquery', 'laytpl', 'lay'], function(exports){
       return that;
     }
 
+    // 合并 lay-options 属性上的配置信息
+    $.extend(options, lay.options(elem[0]));
+
     // 若重复执行 render，则视为 reload 处理
     if(!rerender && elem[0] && elem.data(MOD_INDEX)){
       var newThat = thisModule.getThis(elem.data(MOD_INDEX));
@@ -113,8 +116,12 @@ layui.define(['jquery', 'laytpl', 'lay'], function(exports){
       return newThat.reload(options);
     }
 
-    //初始化 id 参数
+    options.elem = $(options.elem);
-    options.id = ('id' in options) ? options.id : that.index;
+    
+    // 初始化 id 属性 - 优先取 options > 元素 id > 自增索引
+    options.id = 'id' in options ? options.id : (
+      elem.attr('id') || that.index
+    );
     
     if(options.show) that.render(rerender); // 初始即显示
     that.events(); // 事件
@@ -446,7 +453,7 @@ layui.define(['jquery', 'laytpl', 'lay'], function(exports){
         if(
           e.target === options.elem[0] || 
           options.elem.find(e.target)[0] ||
-          e.target === that.elemView[0] ||
+          (that.elemView && e.target === that.elemView[0]) ||
           (that.elemView && that.elemView.find(e.target)[0])
         ) return;
       }
@@ -525,6 +532,15 @@ layui.define(['jquery', 'laytpl', 'lay'], function(exports){
     
   }();
 
+  // 关闭面板
+  dropdown.close = function(id){
+    var that = thisModule.getThis(id);
+    if(!that) return this;
+    
+    that.remove();
+    return thisModule.call(that);
+  };
+  
   // 重载实例
   dropdown.reload = function(id, options){
     var that = thisModule.getThis(id);

src/modules/lay.js

@@ -206,6 +206,8 @@
   lay.options = function(elem, opts){
     opts = typeof opts === 'object' ? opts : {attr: opts};
 
+    if(elem === document) return {};
+
     var othis = lay(elem);
     var attrName = opts.attr || 'lay-options';
     var attrValue = othis.attr(attrName);

src/modules/rate.js

@@ -2,12 +2,14 @@
  * rate 评分评星组件
  */
 
-layui.define('jquery',function(exports){
+layui.define(['jquery', 'lay'],function(exports){
   "use strict";
-  var $ = layui.jquery
+
+  var $ = layui.jquery;
+  var lay = layui.lay;
 
   // 外部接口
-  ,rate = {
+  var rate = {
     config: {}
     ,index: layui.rate ? (layui.rate.index + 10000) : 0
 
@@ -62,9 +64,25 @@ layui.define('jquery',function(exports){
 
   //评分渲染
   Class.prototype.render = function(){
-    var that = this
+    var that = this;
-    ,options = that.config
+    var options = that.config;
-    ,style = options.theme ? ('style="color: '+ options.theme + ';"') : '';
+    
+    // 若 elem 非唯一，则拆分为多个实例
+    var elem = $(options.elem);
+    if(elem.length > 1){
+      layui.each(elem, function(){
+        rate.render($.extend({}, options, {
+          elem: this
+        }));
+      });
+      return that;
+    }
+
+    // 合并 lay-options 属性上的配置信息
+    $.extend(options, lay.options(elem[0]));
+
+    // 自定义主题
+    var style = options.theme ? ('style="color: '+ options.theme + ';"') : '';
     
     options.elem = $(options.elem);
     

src/modules/slider.js

@@ -2,10 +2,11 @@
  * slider 滑块组件
  */
 
-layui.define('jquery', function(exports){
+layui.define(['jquery', 'lay'], function(exports){
   'use strict';
 
-  var $ = layui.$
+  var $ = layui.$;
+  var lay = layui.lay;
 
   // 外部接口
   var slider = {
@@ -80,8 +81,22 @@ layui.define('jquery', function(exports){
 
   //滑块渲染
   Class.prototype.render = function(){
-    var that = this
+    var that = this;
-    ,options = that.config;
+    var options = that.config;
+
+    // 若 elem 非唯一，则拆分为多个实例
+    var elem = $(options.elem);
+    if(elem.length > 1){
+      layui.each(elem, function(){
+        slider.render($.extend({}, options, {
+          elem: this
+        }));
+      });
+      return that;
+    }
+
+    // 合并 lay-options 属性上的配置信息
+    $.extend(options, lay.options(elem[0]));
     
     //间隔值不能小于 1
     if(options.step < 1) options.step = 1;

src/modules/table.js

@@ -1728,7 +1728,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
 
     // 表格宽度小于容器宽度时，隐藏固定列
     that.layFixRight[
-      table.cache[that.key].length && outWidth > 0 
+      (table.cache[that.key] && table.cache[that.key].length) && outWidth > 0 
         ? 'removeClass' 
       : 'addClass'
     ](HIDE);

src/modules/transfer.js

@@ -148,8 +148,11 @@ layui.define(['laytpl', 'form'], function(exports){
     options.data = options.data || [];
     options.value = options.value || [];
     
-    //索引
+    // 初始化 id 属性 - 优先取 options > 元素 id > 自增索引
-    that.key = options.id || that.index;
+    options.id = 'id' in options ? options.id : (
+      elem.attr('id') || that.index
+    );
+    that.key = options.id;
     
     //插入组件结构
     othis.html(that.elem);

src/modules/upload.js

@@ -173,15 +173,21 @@ layui.define(['lay','layer'], function(exports){
   
   // 执行上传
   Class.prototype.upload = function(files, type){
-    var that = this
+    var that = this;
-    ,options = that.config
+    var options = that.config;
-    ,elemFile = that.elemFile[0]
+    var elemFile = that.elemFile[0];
+
+    // 获取文件队列
+    var getFiles = function(){
+      return files || that.files || that.chooseFiles || elemFile.files;
+    };
     
     //高级浏览器处理方式，支持跨域
-    ,ajaxSend = function(){
+    var ajaxSend = function(){
-      var successful = 0, failed = 0
+      var successful = 0;
-      ,items = files || that.files || that.chooseFiles || elemFile.files
+      var failed = 0
-      ,allDone = function(){ //多文件全部上传完毕的回调
+      var items = getFiles();
+      var allDone = function(){ // 多文件全部上传完毕的回调
         if(options.multiple && successful + failed === that.fileLength){
           typeof options.allDone === 'function' && options.allDone({
             total: that.fileLength
@@ -412,8 +418,8 @@ layui.define(['lay','layer'], function(exports){
     
     //检验文件数量
     that.fileLength = function(){
-      var length = 0
+      var length = 0;
-      ,items = files || that.files || that.chooseFiles || elemFile.files;
+      var items = getFiles();
       layui.each(items, function(){
         length++;
       });
@@ -431,7 +437,7 @@ layui.define(['lay','layer'], function(exports){
     if(options.size > 0 && !(device.ie && device.ie < 10)){
       var limitSize;
       
-      layui.each(that.chooseFiles, function(index, file){
+      layui.each(getFiles(), function(index, file){
         if(file.size > 1024*options.size){
           var size = options.size/1024;
           size = size >= 1 ? (size.toFixed(2) + 'MB') : options.size + 'KB'