JS（十八）自定义下拉框组件

js部分：dropdown.js

/*
 * DropDown Control
 * : 2018-08-30
 * Usage:
 * HTML:
 * <div class="ui-dropdown">
    <input class="drop-down-toggle"/>
    <i class="fa fa-caret-down drop-down-caret"></i>
    <ul class="drop-down-menu">
        <li>aaaa</li>
        <li>bbbb</li>
        <li>cccc</li>
    </ul>
   </div>
 * JS:
 * $('.ui-dropdown').dropdown();
 */
(function (a) {
    "use strict";
    if ("function" === typeof define && define.amd)
        define(["jquery"], a);
    else if ("object" === typeof exports)
        module.exports = a(require("jquery"));
    else {
        if ("undefined" === typeof jQuery) throw "Dropdown requires jQuery to be loaded first";
        a(jQuery);
    }
})(function ($) {
    return $.fn.dropdown = function () {
        $(this).each(function () {
            var $input = $(this).find('input.drop-down-toggle');
            var $caret = $(this).find('.drop-down-caret');

            if ($input && $input.length && $input.length === 1) {
                $input.prop('readonly', 'readonly').prop('unselectable', 'on');

                var $list = $(this).find('ul.drop-down-menu');
                if ($list && $list.length && $list.length === 1) {
                    $list.css('width', $input.innerWidth()).hide();

                    var $s = $list.find('li[data-selected]:first');
                    if ($s.length > 0) {
                        $input.val($s.text());
                        $input.attr('data-value', $s.attr('data-value'));
                    }
                    else {
                        var $sf = $list.find('li:first');
                        $input.val($sf.text()).attr('data-value', $sf.attr('data-value'));
                        $sf.attr('data-selected', 'selected');
                    }

                    $input.off('click').on('click', function () {
                        $list.slideToggle(300);
                        $caret.hasClass('fa-caret-down') ?
                            $caret.removeClass('fa-caret-down').addClass('fa-caret-up') :
                            $caret.removeClass('fa-caret-up').addClass('fa-caret-down');
                        return false;
                    }).off('blur').on('blur', function (e) {
                        $list.delay(300);
                        if ($list.is(':visible')) {
                            $list.slideUp(200);
                        }
                        if ($caret.hasClass('fa-caret-up')) {
                            $caret.removeClass('fa-caret-up').addClass('fa-caret-down');
                        }
                        return false;
                    });

                    $list.off('click', 'li').on('click', 'li', function () {
                        var v = $input.val(), dv = $input.attr('data-value');
                        if ($(this).text() !== v || $(this).attr('data-value') !== dv) {
                            $list.find('li').removeAttr('data-selected');
                            $(this).attr('data-selected', 'selected');
                            $input.val($(this).text()).attr('data-value', $(this).attr('data-value')).trigger('change');
                        }

                        $list.slideUp(200);

                        if ($caret.hasClass('fa-caret-up')) {
                            $caret.removeClass('fa-caret-up').addClass('fa-caret-down');
                        }
                        return false;
                    });

                    $(window).on('click', function () {
                        if ($list.is(':visible')) {
                            $list.slideUp(200);
                            if ($caret.hasClass('fa-caret-up')) {
                                $caret.removeClass('fa-caret-up').addClass('fa-caret-down');
                            }
                        }
                    });
                }

                if ($caret && $caret.length && $caret.length === 1) {
                    $caret.css({
                        'padding': 4,
                        'top': ($input.innerHeight() - $caret.outerHeight()) / 2 - 2,
                        'left': $input.innerWidth() - $caret.outerWidth() - 8,
                        'background-color': '#fff'
                    }).off('mousedown').on('mousedown', function () {
                        /// *** caret can not be focus ***
                        event.preventDefault();
                    }).off('click').on('click', function () {
                        $list.slideToggle(300);
                        $caret.hasClass('fa-caret-down') ?
                            $caret.removeClass('fa-caret-down').addClass('fa-caret-up') :
                            $caret.removeClass('fa-caret-up').addClass('fa-caret-down');
                        $input.focus();
                        return false;
                    }).show();
                }
            }
        });
        return $(this);
    }, $.fn.selectDropdown = function (i) {
        $(this).each(function () {
            var $input = $(this).find('input.drop-down-toggle');
            var $list = $(this).find('ul.drop-down-menu');

            if (typeof(i) === 'number') {
                if ($list.find('>li').length > i) {
                    $input.attr('data-value', $list.find('>li:eq(' + i + ')').attr('data-value'))
                        .val($list.find('>li:eq(' + i + ')').text());

                    $list.find('li').removeAttr('data-selected');
                    $list.find('>li:eq(' + i + ')').attr('data-selected', 'selected');
                }
            }
            else if (typeof(i) === 'string') {
                if ($list.find('>li[data-value="' + i + '"]').length > 0) {
                    $input.attr('data-value', $list.find('>li[data-value="' + i + '"]:first').attr('data-value'))
                        .val($list.find('>li[data-value="' + i + '"]:first').text());

                    $list.find('li').removeAttr('data-selected');
                    $list.find('>li[data-value="' + i + '"]:first').attr('data-selected', 'selected');
                }
            }
        });
    };
});/*
 * DropDown Control
 *