[fixed] Selected trigger change event on initializing, fixes #579

sciseo · Jun 8, 2015 · f2efd5b · f2efd5b
1 parent 6b94771
commit f2efd5b
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 12 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,12 +1,19 @@
 # Amaze UI Change Log
 ---
 
+### 2015.06 W2
+
+**JS:**
+
+- `Fixed` #579 Selected 初始化时触发 `change` 事件问题；
+- `Fixed` Selected 设置 `btnWidth` 使用百分比无效问题。
+
 ### 2015.06 W1
 
 **JS:**
 
 - `New` #589 Modal 增加「确定」、「取消」时是否关闭的选项；
-- `Fixed` 修复使用 `<select> 选项为空时 Selected 报错问题。
+- `Fixed` 修复使用 `<select>` 选项为空时 Selected 报错问题。
 
 ## Amaze UI 2.4.0 (2015.06.01)
 

diff --git a/docs/javascript/selected.md b/docs/javascript/selected.md
@@ -123,15 +123,15 @@ doc: docs/javascript/selected.md
 - `btnStyle`: 按钮风格，`[primary|secondary|success|warning|danger]`
 
 `````html
-<select data-am-selected="{btnWidth: 300, btnSize: 'sm', btnStyle: 'secondary'}">
+<select data-am-selected="{btnWidth: '40%', btnSize: 'sm', btnStyle: 'secondary'}">
   <option value="a">Apple</option>
   <option value="b">Banana</option>
   <option value="o">Orange</option>
   <option value="m">Mango</option>
 </select>
 `````
 ```html
-<select data-am-selected="{btnWidth: 300, btnSize: 'sm', btnStyle: 'secondary'}">
+<select data-am-selected="{btnWidth: '40%', btnSize: 'sm', btnStyle: 'secondary'}">
   <option value="a">Apple</option>
   <option value="b">Banana</option>
   <option value="o">Orange</option>
@@ -407,3 +407,18 @@ $(function() {
 - `btnStyle: 'default'`: 按钮样式，可选值为 `primary|secondary|success|warning|danger`
 - `maxHeight: null`: 列表最大高度
 - `dropUp: 0`: 是否为上拉，默认为 `0` (`false`)
+
+`````html
+      <form data-am-validator>
+        <select id="city" data-am-selected="{btnWidth: '200px', btnSize: 'lg', btnStyle: ''}">
+          <option value="a">Apple</option>
+          <option value="b">Banana</option>
+          <option value="o">Orange</option>
+          <option value="m">Mango</option>
+          <option value="phone">iPhone</option>
+          <option value="im">iMac</option>
+          <option value="mbp">Macbook Pro</option>
+        </select>
+
+      </form>
+`````
diff --git a/js/ui.selected.js b/js/ui.selected.js
@@ -25,6 +25,7 @@ var Selected = function(element, options) {
   this.$originalOptions = this.$element.find('option');
   this.multiple = element.multiple;
   this.$selector = null;
+  this.initialized = false;
   this.init();
 };
 
@@ -34,7 +35,7 @@ Selected.DEFAULTS = {
   btnStyle: 'default',
   dropUp: 0,
   maxHeight: null,
-  noSelectedText: '点击选择...',
+  placeholder: '点击选择...',
   selectedClass: 'am-checked',
   disabledClass: 'am-disabled',
   searchBox: false,
@@ -50,7 +51,7 @@ Selected.DEFAULTS = {
   '<span class="am-icon-chevron-left">返回</span></h2>' +
   '   <% if (searchBox) { %>' +
   '   <div class="am-selected-search">' +
-  '     <input type="text" autocomplete="off" class="am-form-field" />' +
+  '     <input autocomplete="off" class="am-form-field am-input-sm" />' +
   '   </div>' +
   '   <% } %>' +
   '    <ul class="am-selected-list">' +
@@ -100,17 +101,19 @@ Selected.prototype.init = function() {
     multiple: this.multiple,
     options: [],
     searchBox: options.searchBox,
-    dropUp: options.dropUp
+    dropUp: options.dropUp,
+    placeholder: options.placeholder
   };
 
   this.$selector = $(UI.template(this.options.tpl, data));
+  // set select button styles
+  this.$selector.css({width: this.options.btnWidth});
+
   this.$list = this.$selector.find('.am-selected-list');
   this.$searchField = this.$selector.find('.am-selected-search input');
   this.$hint = this.$selector.find('.am-selected-hint');
 
-  // set select button styles
-  var $selectorBtn = this.$selector.find('.am-selected-btn').
-    css({width: this.options.btnWidth});
+  var $selectorBtn = this.$selector.find('.am-selected-btn');
   var btnClassNames = [];
 
   options.btnSize && btnClassNames.push('am-btn-' + options.btnSize);
@@ -156,6 +159,7 @@ Selected.prototype.init = function() {
   // #try to fixes #476
   setTimeout(function() {
     _this.syncData();
+    _this.initialized = true;
   }, 0);
 
   this.bindEvents();
@@ -243,6 +247,7 @@ Selected.prototype.syncData = function(item) {
   var options = this.options;
   var status = [];
   var $checked = $([]);
+
   this.$shadowOptions.filter('.' + options.selectedClass).each(function() {
     var $this = $(this);
     status.push($this.find('.am-selected-text').text());
@@ -264,11 +269,13 @@ Selected.prototype.syncData = function(item) {
 
   // nothing selected
   if (!this.$element.val()) {
-    status = [options.noSelectedText];
+    status = [options.placeholder];
   }
 
   this.$status.text(status.join(', '));
-  this.$element.trigger('change');
+
+  // Do not trigger change event on initializing
+  this.initialized && this.$element.trigger('change');
 };
 
 Selected.prototype.bindEvents = function() {

diff --git a/less/ui.selected.less b/less/ui.selected.less
@@ -24,11 +24,13 @@
  ============================================================================ */
 
 .@{ns}selected {
+  width: 200px;
 }
 
 .@{ns}selected-btn {
+  width: 100%;
+  padding-left: 10px;
   text-align: right;
-  width: 200px;
 
   &.@{ns}btn-default {
     background: none;