四级地址插件升级改造（京东商城地址选择插件）city-picker
2024-06-07 08:27:21
最近公司做的项目要和京东的数据做对接，所以要做个类似京东商品的详情页。页面的数据，是可以从京东接口获取到的，但是地址插件选择的效果需要自己实现。前端的同事在之前的项目中，已经选择了一款地址插件（city-picker.js）,但是这款插件最多只支持三级地址，而且最主要的是这插件的地址数据来源，是写死在一个json文件中的，意思就是说，在使用这个插件的时候页面要一次性的把所有的地址数据都加载出来，这在pc端一般倒还可以承受，但是到了，移动端，随便一个手机就会卡死，浏览器直接崩溃。
经过在网上的各种查找，和研究，发现一个博客，http://www.cnblogs.com/huangchanghuan/p/6681510.html
对city-picker这个插件进行了扩展，扩展成了支持四级地址的插件了。这正是我想要的，因为京东给过来的地址数据就是4级的。正好可以使用。然后就拿过来直接用了。
很强大，完美的满足了，我的需求。但是这个大神的博客只是将三级地址改造成了四级地址，没有解决，动态加载数据的问题，就是说用这个四级地址插件的时候，还是要把京东的地址库数据转成json文件一次性加载到页面。这样的话在移动端浏览时还是会把浏览器搞崩。
好了，说了这么多铺垫的废话，就是为了引出，我对这个四级地址插件的改造。
直接代码
1 /*!
2 * CityPicker v@VERSION
3 * https://github.com/tshi0912/citypicker
4 *
5 * Copyright (c) 2015-@YEAR Tao Shi
6 * Released under the MIT license
7 *
8 * Date: @DATE
9 */
10
11
12 ChineseDistricts={13 "86": {14 "中国": [15 {16 "address": "北京",17 "code": "1"18 },19 {20 "address": "上海",21 "code": "2"22 },23 {24 "address": "天津",25 "code": "3"26 },27 {28 "address": "重庆",29 "code": "4"30 },31 {32 "address": "河北",33 "code": "5"34 },35 {36 "address": "山西",37 "code": "6"38 },39 {40 "address": "河南",41 "code": "7"42 },43 {44 "address": "辽宁",45 "code": "8"46 },47 {48 "address": "吉林",49 "code": "9"50 },51 {52 "address": "黑龙江",53 "code": "10"54 },55 {56 "address": "内蒙古",57 "code": "11"58 },59 {60 "address": "江苏",61 "code": "12"62 },63 {64 "address": "山东",65 "code": "13"66 },67 {68 "address": "安徽",69 "code": "14"70 },71 {72 "address": "浙江",73 "code": "15"74 },75 {76 "address": "福建",77 "code": "16"78 },79 {80 "address": "湖北",81 "code": "17"82 },83 {84 "address": "湖南",85 "code": "18"86 },87 {88 "address": "广东",89 "code": "19"90 },91 {92 "address": "广西",93 "code": "20"94 },95 {96 "address": "江西",97 "code": "21"98 },99 {
100 "address": "四川",
101 "code": "22"
102 },
103 {
104 "address": "海南",
105 "code": "23"
106 },
107 {
108 "address": "贵州",
109 "code": "24"
110 },
111 {
112 "address": "云南",
113 "code": "25"
114 },
115 {
116 "address": "西藏",
117 "code": "26"
118 },
119 {
120 "address": "陕西",
121 "code": "27"
122 },
123 {
124 "address": "甘肃",
125 "code": "28"
126 },
127 {
128 "address": "青海",
129 "code": "29"
130 },
131 {
132 "address": "宁夏",
133 "code": "30"
134 },
135 {
136 "address": "新疆",
137 "code": "31"
138 },
139 {
140 "address": "台湾",
141 "code": "32"
142 },
143 {
144 "address": "钓鱼岛",
145 "code": "84"
146 },
147 {
148 "address": "港澳",
149 "code": "52993"
150 }
151 ]
152 }
153 };
154
155 (function (factory) {
156 if (typeof define === 'function' && define.amd) {
157 // AMD. Register as anonymous module.
158 define(['jquery', 'ChineseDistricts'], factory);
159 } else if (typeof exports === 'object') {
160 // Node / CommonJS
161 factory(require('jquery'), require('ChineseDistricts'));
162 } else {
163 // Browser globals.
164 factory(jQuery, ChineseDistricts);
165 }
166 })(function ($, ChineseDistricts) {
167
168 'use strict';
169 if (typeof ChineseDistricts === 'undefined') {
170 throw new Error('The file "city-picker.data.js" must be included first!');
171 }
172 var NAMESPACE = 'citypicker';
173 var EVENT_CHANGE = 'change.' + NAMESPACE;
174 var PROVINCE = 'province';
175 var CITY = 'city';
176 var DISTRICT = 'district';
177 var COUNTY = 'county';
178
179 function CityPicker(element, options) {
180 this.$element = $(element);
181 this.$dropdown = null;
182 this.options = $.extend({}, CityPicker.DEFAULTS, $.isPlainObject(options) && options);
183 this.active = false;
184 this.dems = [];
185 this.needBlur = false;
186 this.init();
187 }
188
189 CityPicker.prototype = {
190 constructor: CityPicker,
191
192 init: function () {
193
194 this.defineDems();
195
196 this.render();
197
198 this.bind();
199
200 this.active = true;
201 },
202 //界面显示处理
203 render: function () {
204 var p = this.getPosition(),
205 placeholder = this.$element.attr('placeholder') || this.options.placeholder,
206 textspan = '<span class="city-picker-span" style="' +
207 this.getWidthStyle(p.width) + 'height:' +
208 p.height + 'px;line-height:' + (p.height - 1) + 'px;">' +
209 (placeholder ? '<span class="placeholder">' + placeholder + '</span>' : '') +
210 '<span class="title"></span><div class="arrow"></div>' + '</span>',
211
212 dropdown = '<div class="city-picker-dropdown" style="left:0px;top:100%;' +
213 this.getWidthStyle(p.width, true) + '">' +
214 '<div class="city-select-wrap">' +
215 '<div class="city-select-tab">' +
216 '<a class="active" data-count="province">省份</a>' +
217 (this.includeDem('city') ? '<a data-count="city">城市</a>' : '') +
218 (this.includeDem('district') ? '<a data-count="district">区县</a>' : '') +
219 (this.includeDem('county') ? '<a data-count="county">乡镇</a>' : '') +
220 '</div>' +
221 '<div class="city-select-content">' +
222 '<div class="city-select province" data-count="province"></div>' +
223 (this.includeDem('city') ? '<div class="city-select city" data-count="city"></div>' : '') +
224 (this.includeDem('district') ? '<div class="city-select district" data-count="district"></div>' : '') +
225 (this.includeDem('county') ? '<div class="city-select county" data-count="county"></div>' : '') +
226 '</div></div>';
227
228 this.$element.addClass('city-picker-input');
229 this.$textspan = $(textspan).insertAfter(this.$element);
230 this.$dropdown = $(dropdown).insertAfter(this.$textspan);
231 var $select = this.$dropdown.find('.city-select');
232
233 // setup this.$province, this.$city and/or this.$district object
234 $.each(this.dems, $.proxy(function (i, type) {
235 this['$' + type] = $select.filter('.' + type + '');
236 }, this));
237
238 this.refresh();
239 },
240
241 refresh: function (force) {
242 // clean the data-item for each $select
243 var $select = this.$dropdown.find('.city-select');
244 $select.data('item', null);
245 // parse value from value of the target $element
246 var val = this.$element.val() || '';
247 val = val.split('/');
248 $.each(this.dems, $.proxy(function (i, type) {//遍历dems
249 if (val[i] && i < val.length) {
250 this.options[type] = val[i];//把当前显示值赋值给options
251 } else if (force) {
252 this.options[type] = '';
253 }
254 this.output(type);//输出下拉框显示数据
255 }, this));
256 this.tab(PROVINCE);
257 this.feedText();//界面显示选择的内容
258 this.feedVal();//input标签value赋值
259 },
260 //dems赋值
261 defineDems: function () {
262 var stop = false;
263 $.each([PROVINCE, CITY, DISTRICT,COUNTY], $.proxy(function (i, type) {
264 if (!stop) {
265 this.dems.push(type);
266 }
267 if (type === this.options.level) {
268 stop = true;
269 }
270 }, this));
271 },
272
273 includeDem: function (type) {
274 return $.inArray(type, this.dems) !== -1;
275 },
276
277 getPosition: function () {
278 var p, h, w, s, pw;
279 p = this.$element.position();
280 s = this.getSize(this.$element);
281 h = s.height;
282 w = s.width;
283 if (this.options.responsive) {
284 pw = this.$element.offsetParent().width();
285 if (pw) {
286 w = w / pw;
287 if (w > 0.99) {
288 w = 1;
289 }
290 w = w * 100 + '%';
291 }
292 }
293
294 return {
295 top: p.top || 0,
296 left: p.left || 0,
297 height: h,
298 width: w
299 };
300 },
301
302 getSize: function ($dom) {
303 var $wrap, $clone, sizes;
304 if (!$dom.is(':visible')) {
305 $wrap = $("<div />").appendTo($("body"));
306 $wrap.css({
307 "position": "absolute !important",
308 "visibility": "hidden !important",
309 "display": "block !important"
310 });
311
312 $clone = $dom.clone().appendTo($wrap);
313
314 sizes = {
315 width: $clone.outerWidth(),
316 height: $clone.outerHeight()
317 };
318
319 $wrap.remove();
320 } else {
321 sizes = {
322 width: $dom.outerWidth(),
323 height: $dom.outerHeight()
324 };
325 }
326
327 return sizes;
328 },
329
330 getWidthStyle: function (w, dropdown) {
331 if (this.options.responsive && !$.isNumeric(w)) {
332 return 'width:' + w + ';';
333 } else {
334 return 'width:' + (dropdown ? Math.max(320, w) : w) + 'px;';
335 }
336 },
337 //绑定事件
338 bind: function () {
339 var $this = this;
340 $(document).on('click', (this._mouteclick = function (e) {
341 var $target = $(e.target);
342 var $dropdown, $span, $input;
343 if ($target.is('.city-picker-span')) {
344 $span = $target;
345 } else if ($target.is('.city-picker-span *')) {
346 $span = $target.parents('.city-picker-span');
347 }
348 if ($target.is('.city-picker-input')) {
349 $input = $target;
350 }
351 if ($target.is('.city-picker-dropdown')) {
352 $dropdown = $target;
353 } else if ($target.is('.city-picker-dropdown *')) {
354 $dropdown = $target.parents('.city-picker-dropdown');
355 }
356 if ((!$input && !$span && !$dropdown) ||
357 ($span && $span.get(0) !== $this.$textspan.get(0)) ||
358 ($input && $input.get(0) !== $this.$element.get(0)) ||
359 ($dropdown && $dropdown.get(0) !== $this.$dropdown.get(0))) {
360 $this.close(true);
361 }
362 }));
363 this.$element.on('change', (this._changeElement = $.proxy(function () {
364 this.close(true);
365 this.refresh(true);
366 }, this))).on('focus', (this._focusElement = $.proxy(function () {
367 this.needBlur = true;
368 this.open();
369 }, this))).on('blur', (this._blurElement = $.proxy(function () {
370 if (this.needBlur) {
371 this.needBlur = false;
372 this.close(true);
373 }
374 }, this)));
375 this.$textspan.on('click', function (e) {
376 var $target = $(e.target), type;
377 $this.needBlur = false;
378 if ($target.is('.select-item')) {
379 type = $target.data('count');
380 $this.open(type);
381 } else {
382 if ($this.$dropdown.is(':visible')) {
383 $this.close();
384 } else {
385 $this.open();
386 }
387 }
388 }).on('mousedown', function () {
389 $this.needBlur = false;
390 });
391 this.$dropdown.on('click', '.city-select a', function () {
392 var $select = $(this).parents('.city-select');
393 var $active = $select.find('a.active');
394 var last = $select.next().length === 0;
395 $active.removeClass('active');
396 $(this).addClass('active');
397 if ($active.data('code') !== $(this).data('code')) {
398 $select.data('item', {
399 address: $(this).attr('title'), code: $(this).data('code')
400 });
401 $(this).trigger(EVENT_CHANGE);
402 $this.feedText();
403 $this.feedVal(true);
404 if (last) {
405 $this.close();
406 }
407 }
408 }).on('click', '.city-select-tab a', function () {
409 if (!$(this).hasClass('active')) {
410 var type = $(this).data('count');
411 $this.tab(type);
412 }
413 }).on('mousedown', function () {
414 $this.needBlur = false;
415 });
416 if (this.$province) {
417 this.$province.on(EVENT_CHANGE, (this._changeProvince = $.proxy(function () {
418 if(this.output(CITY)){//判断下一个tab是否有数据,没有则关闭下拉
419 $this.close();
420 return;
421 };
422 this.output(CITY);
423 this.output(DISTRICT);
424 this.output(COUNTY);
425 this.tab(CITY);
426 }, this)));
427 }
428 if (this.$city) {
429 this.$city.on(EVENT_CHANGE, (this._changeCity = $.proxy(function () {
430 if(this.output(DISTRICT)){
431 $this.close();
432 return;
433 };
434 this.output(COUNTY);
435 this.tab(DISTRICT);
436 }, this)));
437 }
438
439 if (this.$district) {
440 this.$district.on(EVENT_CHANGE, (this._changeDistrict = $.proxy(function () {
441 if(this.output(COUNTY)){
442 $this.close();
443 return;
444 };
445 this.tab(COUNTY);
446 }, this)));
447 }
448 },
449 //显示下拉
450 open: function (type) {
451 type = type || PROVINCE;
452 this.$dropdown.show();
453 this.$textspan.addClass('open').addClass('focus');
454 this.tab(type);
455 },
456 //关闭下拉
457 close: function (blur) {
458 this.$dropdown.hide();
459 this.$textspan.removeClass('open');
460 if (blur) {
461 this.$textspan.removeClass('focus');
462 }
463 },
464 //解绑事件
465 unbind: function () {
466
467 $(document).off('click', this._mouteclick);
468
469 this.$element.off('change', this._changeElement);
470 this.$element.off('focus', this._focusElement);
471 this.$element.off('blur', this._blurElement);
472
473 this.$textspan.off('click');
474 this.$textspan.off('mousedown');
475
476 this.$dropdown.off('click');
477 this.$dropdown.off('mousedown');
478
479 if (this.$province) {
480 this.$province.off(EVENT_CHANGE, this._changeProvince);
481 }
482
483 if (this.$city) {
484 this.$city.off(EVENT_CHANGE, this._changeCity);
485 }
486
487 if (this.$district) {
488 this.$district.off(EVENT_CHANGE, this._changeDistrict);
489 }
490 },
491 //获取选择项信息
492 getText: function () {
493 var text = '';
494 this.$dropdown.find('.city-select')
495 .each(function () {
496 var item = $(this).data('item'),
497 type = $(this).data('count');
498 if (item) {
499 text += ($(this).hasClass('province') ? '' : '/') + '<span class="select-item" data-count="' +
500 type + '" data-code="' + item.code + '">' + item.address + '</span>';
501 }
502 });
503 return text;
504 },
505 getPlaceHolder: function () {
506 return this.$element.attr('placeholder') || this.options.placeholder;
507 },
508 //显示placeholder或者选择的区域
509 feedText: function () {
510 var text = this.getText();
511 if (text) {
512 this.$textspan.find('>.placeholder').hide();
513 this.$textspan.find('>.title').html(this.getText()).show();
514 } else {
515 this.$textspan.find('>.placeholder').text(this.getPlaceHolder()).show();
516 this.$textspan.find('>.title').html('').hide();
517 }
518 },
519 getCode: function (count) {
520 var obj = {}, arr = [];
521 this.$textspan.find('.select-item')
522 .each(function () {
523 var code = $(this).data('code');
524 var count = $(this).data('count');
525 obj[count] = code;
526 arr.push(code);
527 });
528 return count ? obj[count] : arr.join('/');
529 },
530 getVal: function () {
531 var text = '';
532 var code='';
533 this.$dropdown.find('.city-select')
534 .each(function () {
535 var item = $(this).data('item');
536 if (item) {
537 text += ($(this).hasClass('province') ? '' : '/') + item.address;
538 code += ($(this).hasClass('province') ? '' : '_') + item.code;
539 }
540 });
541 $("#addrValue").val(code);
542 return text;
543 },
544 //input的value赋值
545 feedVal: function (trigger) {
546 this.$element.val(this.getVal());
547 if(trigger) {
548 this.$element.trigger('cp:updated');
549 }
550 },
551 //输出数据
552 output: function (type) {
553 var $this = this;
554 var options = this.options;
555 //var placeholders = this.placeholders;
556 var $select = this['$' + type];
557 var data = type === PROVINCE ? {} : [];
558 var item;
559 var districts;
560 var code;
561 var matched = null;
562 var value;
563 if (!$select || !$select.length) {
564 return;
565 }
566 item = $select.data('item');
567 value = (item ? item.address : null) || options[type];
568 code = (
569 type === PROVINCE ? 86 :
570 type === CITY ? this.$province && this.$province.find('.active').data('code') :
571 type === DISTRICT ? this.$city && this.$city.find('.active').data('code') :
572 type === COUNTY ? this.$district && this.$district.find('.active').data('code') : code
573 );
574 //districts = $.isNumeric(code) ? ChineseDistricts[code] : null;
575 //判断是否应该去远程加载数据
576 districts = $.isNumeric(code) ? this.remoteLoadData(type,code) : null;
577 if ($.isPlainObject(districts)) {
578 $.each(districts, function (code, address) {
579 var provs;
580 if (type === PROVINCE) {
581 provs = [];
582 for (var i = 0; i < address.length; i++) {
583 if (address[i].address === value) {
584 matched = {
585 code: address[i].code,
586 address: address[i].address
587 };
588 }
589 provs.push({
590 code: address[i].code,
591 address: address[i].address,
592 selected: address[i].address === value
593 });
594 }
595 data[code] = provs;
596 } else {
597 if (address === value) {
598 matched = {
599 code: code,
600 address: address
601 };
602 }
603 data.push({
604 code: code,
605 address: address,
606 selected: address === value
607 });
608 }
609 });
610 }
611
612 $select.html(type === PROVINCE ? this.getProvinceList(data) :
613 this.getList(data, type));
614 $select.data('item', matched);//当前tab添加item(包含选择对象的内容)
615 if(! (type === PROVINCE)){//标识:下一个选项没有数据则关闭
616 if(data.length==0){
617 return true;
618 }
619 }
620 },
621 //遍历省份
622 getProvinceList: function (data) {
623 var list = [],
624 $this = this,
625 simple = this.options.simple;
626
627 $.each(data, function (i, n) {
628 list.push('<dl class="clearfix">');
629 list.push('<dt>' + i + '</dt><dd>');
630 $.each(n, function (j, m) {
631 list.push(
632 '<a' +
633 ' title="' + (m.address || '') + '"' +
634 ' data-code="' + (m.code || '') + '"' +
635 ' class="' +
636 (m.selected ? ' active' : '') +
637 '">' +
638 ( simple ? $this.simplize(m.address, PROVINCE) : m.address) +
639 '</a>');
640 });
641 list.push('</dd></dl>');
642 });
643
644 return list.join('');
645 },
646 //遍历市或区或县
647 getList: function (data, type) {
648 var list = [],
649 $this = this,
650 simple = this.options.simple;
651 list.push('<dl class="clearfix"><dd>');
652
653 $.each(data, function (i, n) {
654 list.push(
655 '<a' +
656 ' title="' + (n.address || '') + '"' +
657 ' data-code="' + (n.code || '') + '"' +
658 ' class="' +
659 (n.selected ? ' active' : '') +
660 '">' +
661 ( simple ? $this.simplize(n.address, type) : n.address) +
662 '</a>');
663 });
664 list.push('</dd></dl>');
665
666 return list.join('');
667 },
668 //简化名字
669 simplize: function (address, type) {
670 address = address || '';
671 if (type === PROVINCE) {
672 return address.replace(/[省,市,自治区,壮族,回族,维吾尔]/g, '');
673 } else if (type === CITY) {
674 return address.replace(/[市,地区,回族,蒙古,苗族,白族,傣族,景颇族,藏族,彝族,壮族,傈僳族,布依族,侗族]/g, '')
675 .replace('哈萨克', '').replace('自治州', '').replace(/自治县/, '');
676 } else if (type === DISTRICT) {
677 return address.length > 2 ? address.replace(/[市,区,县,旗]/g, '') : address;
678 }
679 },
680 //处理tab显示
681 tab: function (type) {
682 var $selects = this.$dropdown.find('.city-select');
683 var $tabs = this.$dropdown.find('.city-select-tab > a');
684 var $select = this['$' + type];
685 var $tab = this.$dropdown.find('.city-select-tab > a[data-count="' + type + '"]');
686 if ($select) {
687 $selects.hide();
688 $select.show();
689 $tabs.removeClass('active');
690 $tab.addClass('active');
691 }
692 },
693
694 reset: function () {
695 this.$element.val(null).trigger('change');
696 },
697
698 destroy: function () {
699 this.unbind();
700 this.$element.removeData(NAMESPACE).removeClass('city-picker-input');
701 this.$textspan.remove();
702 this.$dropdown.remove();
703 },
704 //远程加载数据
705 remoteLoadData: function (cityType,cityId) {
706 var resultData = {};
707 if(PROVINCE===cityType)
708 {
709 return ChineseDistricts[cityId];
710 }
711 $.ajax({
712 url: "/directoryProcurement/jd/cityData/"+cityType+"/"+cityId,
713 type: "GET",
714 dataType: "json",
715 async: false,
716 contentType: "application/json",
717 success: function (result) {
718 if(result.code=="0")
719 {
720 resultData = result.data;
721 }else
722 {
723 console.log(result.desc);
724 }
725 }
726 });
727 return resultData;
728 }
729 };
730
731 CityPicker.DEFAULTS = {
732 simple: false,
733 responsive: false,
734 placeholder: '请选择省/市/区/镇',
735 level: 'county',
736 province: '',
737 city: '',
738 district: '',
739 county:''
740 };
741
742 CityPicker.setDefaults = function (options) {
743 $.extend(CityPicker.DEFAULTS, options);
744 };
745
746 // Save the other citypicker
747 CityPicker.other = $.fn.citypicker;
748
749 // Register as jQuery plugin
750 $.fn.citypicker = function (option) {
751 var args = [].slice.call(arguments, 1);
752
753 return this.each(function () {
754 var $this = $(this);
755 var data = $this.data(NAMESPACE);
756 var options;
757 var fn;
758
759 if (!data) {
760 if (/destroy/.test(option)) {
761 return;
762 }
763
764 options = $.extend({}, $this.data(), $.isPlainObject(option) && option);
765 $this.data(NAMESPACE, (data = new CityPicker(this, options)));
766 }
767
768 if (typeof option === 'string' && $.isFunction(fn = data[option])) {
769 fn.apply(data, args);
770 }
771 });
772 };
773
774 $.fn.citypicker.Constructor = CityPicker;
775 $.fn.citypicker.setDefaults = CityPicker.setDefaults;
776
777 // No conflict
778 $.fn.citypicker.noConflict = function () {
779 $.fn.citypicker = CityPicker.other;
780 return this;
781 };
782
783 $(function () {
784 $('[data-toggle="city-picker"]').citypicker();
785 });
786 });上面的代码的第一个红色字体处，是为将省和直辖市这种一级地址默认加载过来，其他的三级地址都是靠远程加载过来，
第二处红色字体是为了解决，上面是为了解决一个bug,就当选择了，一级二级三级和四级地址后，如果再重新选择一级地址，后面的三级地址不会清空重选，这样会造成地址归属地不对的问题，这个bug在city-picker原生的代码中是没有的，应该是上面那个博客里，改成四级地址后才出现的bug。
第三处红色字体是为了判断是否有应该去进行远程加载数据，如果只选择了一级地址，就不去远程加载数据，反之则调用远程加载数据方法。
第四处红色字体，是关键了，实现远程加载数据的方法，这个方法是我自己后来加的，写成了同步请求。因为有些地址就没有三级地址，例如北京、丰台、三环到四环之间、这就是一个完整的选择地址了，所以会把一些没有四级地址的信息打印出来，如果有需要的可以修改这个远程加载数据的方法，来实现自己的需求。
最后忘记说了，我是将city-picker.js这个插件的city-picker.data.js和city-picker.js这两个文件合并成了一个文件，因为我只需要默认加载一级地址，一级地址的内容也不多，就写在了一起了，就是第一处红色字体处的js全局对象。
粗略的改造，接受批评。
转载于:https://www.cnblogs.com/jimoer/p/8506491.html
四级地址插件升级改造（京东商城地址选择插件）city-picker相关推荐
- dedecms小程序插件升级到1.4.4（支持百度小程序，微信小程序，头条小程序，QQ小程序，支付宝小程序...）
从2019年6月份开发到现在 dede织梦小程序插件已经升级到1.4.4版本,现在已经支持:微信小程序,百度小程序,头条/抖音小程序,QQ小程序,支付宝小程序. dedecms小程序插件目前主要的功能 ...
- php日期选择插件,优雅的日期选择插件daterangepicker
插件描述:jQuery bootstrap日期选择插件daterangepicker,多种时间类型选择 使用方法 第一步:引入css文件: bootstrap.min.css.font-awesome ...
- html中国家的下拉列表,jQuery Select下拉列表国家选择插件
jQuery Select下拉国家选择插件简介 本文提供JQuery国家选择插件制作select下拉框带搜索功能,和图标的下拉国家列表选择插件代码.支持搜索快速查找,带国旗的国家下拉选择插件! jQu ...
- php商城手机端省市显示,jQuery仿手机京东商城收货地址城市选择
jQuery仿手机京东商城收货地址城市选择 js代码 /** * 默认调用 */ !function () { var $target = $('#J_Address'); $target.cityS ...
- Flutter-防京东商城项目-签名验证 增加收货地址、显示收货地址 事件广播-41
一直觉得自己写的不是技术,而是情怀,一个个的教程是自己这一路走来的痕迹.靠专业技能的成功是最具可复制性的,希望我的这条路能让你们少走弯路,希望我能帮你们抹去知识的蒙尘,希望我能帮你们理清知识的脉络,希 ...
- android 京东收货地址,手机京东商城怎么添加收货地址?
想必有很多人都使用过手机京东购物,购物就需要一个收货地址,在手机京东上,具体怎么添加一个收货地址呢?或者说,由于某些特殊的原因,比如帮别人买东西,或者自己不在原来的地方住了,需要修改原来的收货地址,这 ...
- 39 Flutter仿京东商城项目 收货地址列表、增加 修改收货地址布局、弹出省市区选择器...
加群452892873 下载对应39课文件,运行方法,建好项目,直接替换lib目录 pubspec.yaml city_pickers: ^0.1.22 AddressAdd.dart import ...
- h5仿android 京东三级联动,jquery仿京东商城三级联动代码插件
2019-3-1更新:location.js文件里第三级县之前使用京东旧域名d.360buy.com的jsonp数据,域名做了跳转首页所以第三加载不出来.现在已经更新为d.jd.com,正常加载.不过 ...
- 移动端geolocation插件+百度地图js获取地址
第一步:引入获取经纬度的插件 1 require("cordova!cordova-plugin-geolocation");// geo定位 第二步:定义好获取经纬度的方法,通过 ...
- android开发地址选择器,Android地址选择器 类似于京东的地址选择
简介 最近东西写的挺多的,这不又要弄一个类似于京东的地址选择器,然后刚开始我是不愿意自己去写的,这东西真的是浪费时间.但是下班后回到家找了一圈没找到一个合适的,好吧,那我就自己来封装一个呗,反正生命在 ...
最新文章
- FPGA篇（一） 基于verilog的定点开方运算(1)-逐次逼近算法
- eclipse中maven项目红叉解决方案
- java8使用stream对List列表分组
- Java格式化Date为字符串的高级写法
- action mutation 调用_Vuex源码学习（六）action和mutation如何被调用的（前置准备篇）...
- Java笔记-使用RabbitMQ的Java接口实现Publish/Subscribe(订阅模式)
- 开发者狂喜！微信小程序文档和工具放出
- 3、CommonChunkPlugin提取公共js-以提取一个jquery为例
- 影响 Chrome、Edge 等浏览器的 V8 引擎0day
- 集群式游戏服务器架构方案设计开发
- es 使用ik停词_ES使用IK分词器
- struts2_20140720
- python导入鸢尾花数据集_2020-11-01 鸢尾花数据集Python处理
- 单片机蓝牙模块与手机蓝牙通信（1）
- oracle PL/SQL 这些查询结果不可更新,请包括ROWID或使用SELECT ...FOR UPDATE 获得可
- SQL语句——处理函数
- unable to infer tagged configuration编译报错
- PLSA概率潜在语义分析数学推导
- FFMPEG录制以及推流
- Java实现Shamir秘密共享带注释