From 7cf2095021841e2d42af87991c7c5f29be44e6ae Mon Sep 17 00:00:00 2001 From: Catouse Date: Fri, 13 Nov 2020 13:45:01 +0800 Subject: [PATCH] * improve UI of picker. --- docs/examples/picker.html | 131 ++++++++++++++++++++++++++----- src/js/picker.js | 160 ++++++++++++++++++++++++++++++-------- 2 files changed, 240 insertions(+), 51 deletions(-) diff --git a/docs/examples/picker.html b/docs/examples/picker.html index 7cc2e49bc..b62e394eb 100644 --- a/docs/examples/picker.html +++ b/docs/examples/picker.html @@ -17,7 +17,7 @@ label.code {font-size: 12px; color: #999;} -
+

构建方式演示

@@ -215,7 +215,7 @@ label.code {font-size: 12px; color: #999;}
- @@ -273,26 +273,117 @@ label.code {font-size: 12px; color: #999;}
- - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
- + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
@@ -343,7 +434,7 @@ var fakeServerRoute = function(options) { var items = []; var name = Math.random() > 0.5 ? '禅道' : 'ZUI'; for (var i = 0; i < count; ++i) { - items.push(name + (options.data.search ? ('之“' + options.data.search + '”') : '') + '第 ' + (i + 1) + ' 期'); + items.push({text: name + (options.data.search ? ('之“' + options.data.search + '”') : '') + '第 ' + (i + 1) + ' 期', value: i}); } return items; }; @@ -372,14 +463,14 @@ $(function() { // 远程形式 $('.picker-remote').picker({ dropWidth: '100%', - remote: '/picker-select.json?search={search}&limit={limit}', + remote: '/picker-select.json', onReady: function(picker) { console.log('>>', picker); } }); $('.picker-remote-fast').picker({ dropWidth: 'auto', - remote: '/picker-select-fast.json?search={search}&limit={limit}', + remote: '/picker-select-fast.json', onReady: function(picker) { console.log('>>', picker); } @@ -402,6 +493,10 @@ $(function() { }).on('chosen:no_results', function(e, a) { console.log('chosen:no_results', e, a); }); + + $('#form').on('change', function(e) { + console.log('>> Form.change', e.target, e); + }); }); diff --git a/src/js/picker.js b/src/js/picker.js index 57cb69454..34a2e38ac 100644 --- a/src/js/picker.js +++ b/src/js/picker.js @@ -8,6 +8,8 @@ /** * TODO: * * 优化展开时滚动到选中项体验 + * * 不要在 picker 兼容模式移除 option + * * picker-search 和 input 都会触发 change 事件，希望搜索框作为辅助控件不要触发通用的 change 事件 */ (function($, window, document) { @@ -22,6 +24,7 @@ remoteConverter: null, // function(responseData, textStatus, jqXHR, picker) remoteOnly: false, onRemoteError: null, // function() + disableEmptySearch: false, textKey: 'text', valueKey: 'value', keysKey: 'keys', @@ -66,6 +69,7 @@ onHidingDrop: null, // function onShowedDrop: null, // function onHiddenDrop: null, // function + valueMustInList: true, }; var LANG = { @@ -231,8 +235,8 @@ var hasActiveValue = typeof activeValue === 'string'; if (key === 'Enter' || key === 13) { if (hasActiveValue) { - that.select(activeValue); - if (!that.multi) { + that.select(activeValue, multi); + if (!multi) { $search.blur(); } e.preventDefault(); @@ -242,14 +246,14 @@ var $nextOption; if ($activeOption) { $nextOption = $activeOption.next('.picker-option'); - if (that.multi) { + if (multi) { while ($nextOption.length && $nextOption.hasClass('picker-option-selected')) { $nextOption = $nextOption.next('.picker-option'); } } } if (!$nextOption || !$nextOption.length) { - $nextOption = that.$optionsList.children(that.multi ? '.picker-option:not(.picker-option-selected)' : '.picker-option').first(); + $nextOption = that.$optionsList.children(multi ? '.picker-option:not(.picker-option-selected)' : '.picker-option').first(); } if ($nextOption.length) { that.activeOption($nextOption); @@ -260,20 +264,20 @@ var $prevOption; if ($activeOption) { $prevOption = $activeOption.prev('.picker-option'); - if (that.multi) { + if (multi) { while ($prevOption.length && $prevOption.hasClass('picker-option-selected')) { $prevOption = $prevOption.prev('.picker-option'); } } } if (!$prevOption || !$prevOption.length) { - $prevOption = that.$optionsList.children(that.multi ? '.picker-option:not(.picker-option-selected)' : '.picker-option').last(); + $prevOption = that.$optionsList.children(multi ? '.picker-option:not(.picker-option-selected)' : '.picker-option').last(); } if ($prevOption.length) { that.activeOption($prevOption); } e.preventDefault(); - } else if (options.deleteByBackspace && that.multi && (key === 'Backspace' || key === 8) && that.value && that.value.length) { + } else if (options.deleteByBackspace && multi && (key === 'Backspace' || key === 8) && that.value && that.value.length && !$search.val().length) { that.deselect(that.value[that.value.length - 1]); } }); @@ -306,7 +310,7 @@ $.each(e.list, function(_, ele) { values.push(ele.item.data('value')); }); - that.setValue(values, false, true); + that.setValue(values.slice(), false, true); } }; if (typeof sortValuesByDnd === 'object') { @@ -371,7 +375,7 @@ if (keys !== undefined) { attrs['data-' + options.keysKey] = keys; } - $formItem.append($('').attr(attrs).text(item[options.textKey])); + $formItem.append($('