diff --git a/README.md b/README.md index 34980f5..b2d13fa 100644 --- a/README.md +++ b/README.md @@ -37,7 +37,8 @@ simple.select({ el: $('select'), // * 必须 cls: "", // 额外的 class onItemRender: $.noop, // 渲染列表每个元素后调用的函数 - placeholder: "" // input 元素的 placeholder 属性 + placeholder: "", // input 元素的 placeholder 属性 + multiline: false // input 元素是否可换行，默认为true }); ``` diff --git a/bower.json b/bower.json index 1e1d055..155afb0 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "simple-select", - "version": "2.0.11", + "version": "2.0.12", "homepage": "https://github.com/mycolorway/simple-select", "authors": [ "kshift " diff --git a/demo.html b/demo.html index e4eac2a..57192be 100644 --- a/demo.html +++ b/demo.html @@ -34,7 +34,8 @@ $(function() { simple.select({ el: $('#select-one'), - placeholder: 'type sth...' + placeholder: 'type sth...', + multiline: false }); simple.select({ @@ -75,7 +76,7 @@
-

Demo one: without non value option

+

Demo one: multiline as false

@@ -96,7 +97,7 @@

Demo three: with non value option

- +
diff --git a/lib/select.js b/lib/select.js index 26ece4b..4b5b0f2 100644 --- a/lib/select.js +++ b/lib/select.js @@ -31,7 +31,8 @@ Select = (function(superClass) { cls: "", onItemRender: $.noop, placeholder: "", - allowInput: false + allowInput: false, + multiline: true }; Select.i18n = { @@ -48,7 +49,8 @@ Select = (function(superClass) { }; Select._tpl = { - input: "", + textarea: "", + input: "", item: "
\n \n \n
" }; @@ -67,12 +69,18 @@ Select = (function(superClass) { }; Select.prototype._render = function() { - var items; + var inputTpl, items; Select._tpl.select = "
\n \n ▾\n \n \n ✕\n \n
\n
" + (this._t('loading')) + "
\n
\n
"; this.el = $(this.opts.el).hide(); this.el.data("select", this); this.select = $(Select._tpl.select).data("select", this).addClass(this.opts.cls).insertBefore(this.el); - this.input = $(Select._tpl.input).attr("placeholder", this.opts.placeholder || this.el.data('placeholder') || "").prependTo(this.select); + if (this.opts.multiline) { + this.select.addClass('multiline'); + inputTpl = Select._tpl.textarea; + } else { + inputTpl = Select._tpl.input; + } + this.input = $(inputTpl).attr("placeholder", this.opts.placeholder || this.el.data('placeholder') || "").prependTo(this.select); this.list = this.select.find(".select-list"); this.requireSelect = true; items = this.el.find("option").map((function(_this) { @@ -417,6 +425,9 @@ Select = (function(superClass) { }; Select.prototype.autoresizeInput = function() { + if (!this.opts.multiline) { + return; + } return setTimeout((function(_this) { return function() { _this.input.css("height", 0); diff --git a/package.json b/package.json index e37679e..c56d8c4 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "simple-select", - "version": "2.0.11", + "version": "2.0.12", "description": "a simple select plugin based on Simple Module", "main": "lib/select.js", "repository": { diff --git a/src/select.coffee b/src/select.coffee index 955b3af..9c9872b 100644 --- a/src/select.coffee +++ b/src/select.coffee @@ -6,6 +6,7 @@ class Select extends SimpleModule onItemRender: $.noop placeholder: "" allowInput: false + multiline: true @i18n: "zh-CN": @@ -18,10 +19,14 @@ class Select extends SimpleModule loading: "Loading..." @_tpl: - input: """ + textarea: """ """ + input: """ + + """ + item: """
@@ -61,7 +66,13 @@ class Select extends SimpleModule .data("select", @) .addClass(@opts.cls) .insertBefore @el - @input = $(Select._tpl.input) + if @opts.multiline + @select.addClass('multiline') + inputTpl = Select._tpl.textarea + else + inputTpl = Select._tpl.input + + @input = $(inputTpl) .attr("placeholder", @opts.placeholder || @el.data('placeholder') || "") .prependTo @select @list = @select.find ".select-list" @@ -333,6 +344,7 @@ class Select extends SimpleModule autoresizeInput: () -> + return unless @opts.multiline setTimeout () => @input.css("height", 0) @input.css("height", parseInt(@input.get(0).scrollHeight) + parseInt(@input.css("border-top-width")) + parseInt(@input.css("border-bottom-width"))) diff --git a/styles/select.css b/styles/select.css index 74d5cda..34ec4eb 100644 --- a/styles/select.css +++ b/styles/select.css @@ -5,8 +5,6 @@ .simple-select .select-result { width: 100%; height: 24px; - resize: none; - overflow: hidden; box-sizing: border-box; padding: 4px; padding-right: 24px; @@ -80,6 +78,9 @@ color: #666666; border-bottom: 1px solid #dfdfdf; cursor: pointer; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; } .simple-select .select-list .select-item:first-child { -webkit-border-radius: 4px 4px 0 0; @@ -103,3 +104,10 @@ float: right; color: #aaa; } +.simple-select.multiline .select-result { + resize: none; + overflow: hidden; +} +.simple-select.multiline .select-list .select-item { + white-space: normal; +} diff --git a/styles/select.scss b/styles/select.scss index 56f4f1d..dac1830 100644 --- a/styles/select.scss +++ b/styles/select.scss @@ -5,8 +5,6 @@ .select-result { width: 100%; height: 24px; - resize: none; - overflow: hidden; box-sizing: border-box; padding: 4px; padding-right: 24px; @@ -50,6 +48,7 @@ .link-clear { display: block; } + } &.require-select { @@ -95,6 +94,9 @@ color: #666666; border-bottom: 1px solid #dfdfdf; cursor: pointer; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; &:first-child { -webkit-border-radius: 4px 4px 0 0; @@ -124,4 +126,16 @@ } } } + + &.multiline { + .select-result { + resize: none; + overflow: hidden; + } + .select-list { + .select-item { + white-space: normal; + } + } + } }