Selected triggers event when checked overflow, resolved OpenNHP#733

DASungta · Nov 24, 2015 · 819bab4 · 819bab4
1 parent 47ecb90
commit 819bab4
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 11 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,12 @@
 # Amaze UI Change Log
 ---
 
+### 2015.11 W3
+
+**JS:**
+
+- `Improved` #733 Selected 增加超过最多可选值时提示接口。
+
 ### 2015.11 W2
 
 **构建:**
@@ -39,7 +45,7 @@
 
 **JS:**
 
-- 处理 Browserify 输出 UMD 文件时没有添加 AMD 和 CommonJS 依赖的问题。
+- `Fixed` #783 处理 Browserify 输出 UMD 文件时没有添加 AMD 和 CommonJS 依赖的问题。
 
 ### 2015.07 W4
 

diff --git a/docs/javascript/selected.md b/docs/javascript/selected.md
@@ -218,21 +218,33 @@ doc: docs/javascript/selected.md
 
 ### 选项验证提示
 
+**`v2.5` 新增**：设置 `maxchecked` 属性以后，超出设定值时会触发 `checkedOverflow.selected.amui` 事件，可以监听该事件提示用户。
+
 `````html
-<select multiple data-am-selected minchecked="2" maxchecked="3">
+<select multiple data-am-selected minchecked="2" maxchecked="3" id="demo-maxchecked">
   <option value="a">Apple</option>
   <option value="b">Banana</option>
   <option value="o">Orange</option>
   <option value="m">Mango</option>
 </select>
+<script>
+$('#demo-maxchecked').on('checkedOverflow.selected.amui', function() {
+  alert('最多选择' + this.getAttribute('maxchecked') + '项');
+});
+</script>
 `````
 ```html
-<select multiple data-am-selected minchecked="2" maxchecked="3">
+<select multiple data-am-selected minchecked="2" maxchecked="3" id="demo-maxchecked">
   <option value="a">Apple</option>
   <option value="b">Banana</option>
   <option value="o">Orange</option>
   <option value="m">Mango</option>
 </select>
+<script>
+$('#demo-maxchecked').on('checkedOverflow.selected.amui', function() {
+  alert('最多选择' + this.getAttribute('maxchecked') + '项');
+});
+</script>
 ```
 
 ### JS 操作 select
@@ -406,6 +418,12 @@ $(function() {
 - `maxHeight: null`: 列表最大高度
 - `dropUp: 0`: 是否为上拉，默认为 `0` (`false`)
 
+#### 事件
+
+| 事件名称 | 描述 |
+| ------ | ---- |
+| `checkedOverflow.selected.amui` | 超出设定的最多可选值时触发（`v2.5` 新增） |
+
 ## 常见问题
 
 ### 与 jQuery Form 冲突？

diff --git a/js/ui.selected.js b/js/ui.selected.js
@@ -35,6 +35,7 @@ Selected.DEFAULTS = {
   btnStyle: 'default',
   dropUp: 0,
   maxHeight: null,
+  maxChecked: null,
   placeholder: '点击选择...',
   selectedClass: 'am-checked',
   disabledClass: 'am-disabled',
@@ -135,7 +136,9 @@ Selected.prototype.init = function() {
   // set hint text
   var hint = [];
   var min = $element.attr('minchecked');
-  var max = $element.attr('maxchecked');
+  var max = $element.attr('maxchecked') || options.maxChecked;
+
+  this.maxChecked = max || Infinity;
 
   if ($element[0].required) {
     hint.push('必选');
@@ -220,20 +223,32 @@ Selected.prototype.renderOptions = function() {
 };
 
 Selected.prototype.setChecked = function(item) {
+  var _this = this;
   var options = this.options;
   var $item = $(item);
   var isChecked = $item.hasClass(options.selectedClass);
-  if (!this.multiple) {
-    if (!isChecked) {
-      this.dropdown.close();
-      this.$shadowOptions.not($item).removeClass(options.selectedClass);
-    } else {
-      return;
+
+  if (this.multiple) {
+    // multiple
+    var checkedLength = this.$list.find('.' + options.selectedClass).length;
+
+    if (!isChecked && this.maxChecked <= checkedLength) {
+      this.$element.trigger('checkedOverflow.selected.amui', {
+        selected: this
+      });
+
+      return false;
+    }
+  } else {
+    if (isChecked) {
+      return false;
     }
+
+    this.dropdown.close();
+    this.$shadowOptions.not($item).removeClass(options.selectedClass);
   }
 
   $item.toggleClass(options.selectedClass);
-
   this.syncData(item);
 };