From 1ffbcc1a1ad85ce2777e2560b0934221e53777c1 Mon Sep 17 00:00:00 2001 From: Keeper Date: Mon, 21 Mar 2016 16:21:50 -0400 Subject: [PATCH] ADD: hint for items --- README.md | 5 ++++- demo.html | 6 +++--- lib/select.js | 12 ++++++------ spec/index.html | 43 +++++++++++++++++++++++++++++++++++++++++++ src/select.coffee | 8 +++++--- styles/select.css | 4 ++++ styles/select.scss | 6 +++++- 7 files changed, 70 insertions(+), 14 deletions(-) create mode 100644 spec/index.html diff --git a/README.md b/README.md index a501b9e..34980f5 100644 --- a/README.md +++ b/README.md @@ -81,14 +81,17 @@ select.selectItem(2); ```javascript select.setItems([{ label: "张三", + hint: '#1', key: "zhangsan zs 张三", id: "1" },{ label: "李四", + hint: '#2', key: "lisi ls 李四", id: "2" },{ label: "王麻子", + hint: '#3', key: "wangmazi wmz 王麻子", id: "3" }]); @@ -103,6 +106,7 @@ select.selectItem(2); // 返回 // { // label: "王麻子", +// hint: '#2', // key: "wangmazi wmz 王麻子", // id: "3" // } @@ -126,4 +130,3 @@ select.selectItem(2); **clear** 触发条件：清除输入内容和选择的元素。 - diff --git a/demo.html b/demo.html index a05886d..9d76969 100644 --- a/demo.html +++ b/demo.html @@ -77,9 +77,9 @@

Demo one: without non value option

diff --git a/lib/select.js b/lib/select.js index f1faf29..9258030 100644 --- a/lib/select.js +++ b/lib/select.js @@ -49,7 +49,7 @@ Select = (function(superClass) { Select._tpl = { input: "", - item: "
\n \n
" + item: "
\n \n \n
" }; Select.prototype._init = function() { @@ -74,8 +74,7 @@ Select = (function(superClass) { this.input = $(Select._tpl.input).attr("placeholder", this.el.data('loading') || this._t('loading')).prependTo(this.select); this.list = this.select.find(".select-list"); this.requireSelect = true; - items = []; - this.el.find("option").each((function(_this) { + items = this.el.find("option").map((function(_this) { return function(i, option) { var $option, label, value; $option = $(option); @@ -85,12 +84,12 @@ Select = (function(superClass) { _this.requireSelect = false; return; } - return items.push($.extend({ + return $.extend({ label: label, _value: value - }, $option.data())); + }, $option.data()); }; - })(this)); + })(this)).get(); if (this.requireSelect) { this.select.addClass('require-select'); } @@ -357,6 +356,7 @@ Select = (function(superClass) { item = items[j]; $itemEl = $(Select._tpl.item).data(item); $itemEl.find(".label span").text(item.label); + $itemEl.find(".hint").text(item.hint); this.list.append($itemEl); if ($.isFunction(this.opts.onItemRender)) { this.opts.onItemRender.call(this, $itemEl, item); diff --git a/spec/index.html b/spec/index.html new file mode 100644 index 0000000..4f6cc5e --- /dev/null +++ b/spec/index.html @@ -0,0 +1,43 @@ + + + + + Jasmine Spec Runner + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/select.coffee b/src/select.coffee index 9ca0523..9170c6f 100644 --- a/src/select.coffee +++ b/src/select.coffee @@ -25,6 +25,7 @@ class Select extends SimpleModule item: """
+
""" @@ -66,8 +67,7 @@ class Select extends SimpleModule @requireSelect = true - items = [] - @el.find("option").each (i, option) => + items = @el.find("option").map (i, option) => $option = $(option) value = $option.attr 'value' label = $option.text().trim() @@ -76,10 +76,11 @@ class Select extends SimpleModule @requireSelect = false return - items.push $.extend({ + $.extend({ label: label, _value: value }, $option.data()) + .get() if @requireSelect @select.addClass('require-select') @@ -278,6 +279,7 @@ class Select extends SimpleModule for item in items $itemEl = $(Select._tpl.item).data(item) $itemEl.find(".label span").text(item.label) + $itemEl.find(".hint").text(item.hint) @list.append $itemEl @opts.onItemRender.call(@, $itemEl, item) if $.isFunction @opts.onItemRender diff --git a/styles/select.css b/styles/select.css index 26f5514..f683c66 100644 --- a/styles/select.css +++ b/styles/select.css @@ -98,3 +98,7 @@ color: #666666; text-decoration: none; } +.simple-select .select-list .select-item .hint { + float: right; + color: #aaa; +} diff --git a/styles/select.scss b/styles/select.scss index 5a4f754..a377e5a 100644 --- a/styles/select.scss +++ b/styles/select.scss @@ -116,7 +116,11 @@ color: #666666; text-decoration: none; } + + .hint { + float: right; + color: #aaa; + } } } } -