ПРЕДИСЛОВИЕ: Недавно, когда я использовал компонент начальной загрузки, я нашел проблему простоты использования. Многие простой инициализации компонентов требуют написания много кода инициализации в JS, например, простой тег Select. Поскольку он должен только получить данные из фона и заполнить их в опцию, но получение данных из фона требует инициализации JS, поэтому он вызывает много дубликата в коде инициализации JS, когда страница инициализируется, что выглядит очень раздражающим. Поэтому я вспомнил атрибут данных в таблице начальной загрузки. Было бы так круто, если бы я мог использовать Data-* для инициализации простых компонентов непосредственно в HTML. Давайте сначала посмотрим на документацию на таблице Bootstrap:
Вы можете видеть, что почти все свойства и события в таблице начальной загрузки могут использоваться в данных-*, что кажется довольно хорошим. Тогда блогер начнет исследовать. ДАННЫЕ-*Откуда эта вещь?
1. Предварительное исследование данных jQuery ()
После поиска в Интернете я наконец нашел источник данных-*. Это оказалось от jquery и html5. Хорошие вещи, действительно хорошие вещи! Давайте посмотрим на API jQuery
Первоначальное использование следующее:
Функция на самом деле очень очевидна, то есть добавление определенных атрибутов и данных в элемент или принимать значения.
Давайте посмотрим на комбинацию метода data () и атрибут HTML5 Data-*
Ха -ха, эта вещь хороша. Значение, установленное HTML5 Data-*, может быть получено с использованием метода data () jQuery. Правила здесь следующие:
1) Все атрибуты данных должны начинаться с "Data-",
2) Атрибуты разделены «-»,
3) При принятии атрибутов в jQuery просто удалите «данные» и «-».
При этом мы знаем, как установить свойства в теге, а затем принять соответствующие свойства в JS. Давайте объясним это ниже в сочетании с примером последней инкапсуляции ComboBox.
2. jQuery Data () реализует компонент данных-*
Помните предыдущую серию компонентов JS - инкапсулируя ваши собственные компоненты JS. В этой статье вы также можете инкапсулировать простой CompoBox, который может извлекать данные из бэкэнда через URL. Итак, ниже мы все равно сделаем все возможное, чтобы основать этот компонент и напрямую добавим атрибут Data-* к тегу SELECT, чтобы инициализировать компонент раскрывающегося поле.
1. Код инкапсуляции компонентов JS
(Function ($) {// 1. Определить метод расширения jQuery ComboBox $ .fn.combobox = function (опции, параметры) {if (typeof options == 'string') {return $ .fn.combobox.methods [опции] (this, param);} // 2. $ .fn.combox.defaults, Option.Text (Options.Place Holder); Options.onbeforeLoad.call (Target, Options.Param); ITER) {var = $ ('<ploys> </option>'); Options.onchange (target.val ()); $ .getJson (url, function (data) {jq.empty (); var option = $ ('<ploict> </option>'); option.attr ('value', '' '); option.text (' Пожалуйста, выберите '); jq.append (опция); $. item [jq.attr ('valuefield')]; }}; // 6. Список параметров по умолчанию $ .fn.combobox.defaults = {url: null, param: null, data: null, valuefield: 'value', textfield: 'text', заполнитель: 'Пожалуйста, выберите', OnbeForeLoad: function (param) {}, OnloadSuccess: function () {}, OnChange: function (value)}; // Этот параграф добавлен вновь, и метод инициализации $ (document) .ready (function () {$ ('. Combobox'). Каждый (function () {var $ combobox = $ (this); $ .fn.combobox.call ($ combobox, $ combobox.data ());})});); }) (jQuery);Большинство кодов ничем не отличаются от последнего. Давайте сосредоточимся на следующем абзаце
// Этот абзац вновь добавлен. После завершения инициализации страницы метод инициализации $ (document) .ready (function () {$ ('. Combobox'). Каждый (function () {var $ combobox = $ (this); $ .fn.combobox.call ($ combobox, $ combobox.data ());})});Очевидно, что после завершения инициализации страницы компонент инициализируется через селектор стилей. Каждый используется, если есть несколько стилей .combobox, де-инициализируйте каждый из них по очереди. Позвоните в метод вызова, чтобы вызвать инициализацию ComboBox через $ .fn.combobox.call ($ combobox, $ combobox.data ());. Два параметра в методе вызова соответствуют:
1) В настоящее время инициализированный объект jQuery
2) Список параметров. Здесь атрибуты данных-*, полученные через $ combobox.data (), являются все атрибуты HTML Data-*. Передайте все атрибуты Data-* в качестве параметров в метод инициализации ComboBox.
2. Инициализировать в HTML через данные-*
<select id = "search_" name = "search_province" data-url = "/home/getprovince" data-param = '{"type": "0"}' data-text-field = "name" data-value-field = "id"> </select>Укажите атрибут Data-*. Из вышесказанного мы знаем, что инициализация здесь состоит в том, чтобы инициализация компонента через селектор стилей .bobox, поэтому необходимо, чтобы, если вы хотите использовать Data-* для инициализации компонента, вы должны установить стиль Class = "combobox", чтобы фон мог получить теги, которые необходимо инициализировать.
3. Бэкэнд C# Метод
Общедоступный класс HomeController: Controller {public list <string> lstprovince = new List <string> () {«Пекин», «Тяньцзин», «Чунцинг», «Шанхай», «Хэбэй», «Шаньси», «Лиаонинг», «jilin», «Хейлонджяг», «jiangsu», «jilin», «jilin», «jilin», «jilin», «jilin», «jilin», « «Anhui», «fujian», «jiangxi», «Shandong», «henan», «hubei», «Хунан», «Гуандун», «Хайнан», «Сичуань», «Гуйчжоу», «Юньнань», «Янан», «Шааньси», «Гансу», «qynce», ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", "Яньян", "," " «Автономный регион внутренней Монголии», «Автономный регион Гуанси Чжуан», «Автономный регион Тибет», «Автономный регион Ningxia Hui», «Автономный регион Xinxia Uygur», «Специальный административный регион Гонконг», «Специальный административный регион Макао»; public jsonResult getProvince (тип строки) {var lStres = новый список <vince> (); for (var i = 0; i <10; i ++) {var omodel = new Province (); omodel.id = i; omodel.name = lstprovince [i]; lstres.add (omodel); } return json (lstres, jsonrequestbehavior.allowget); }} открытый класс провинция {public int id {get; набор; } public String name {get; набор; }}Нечего сказать о тестировании кода.
4. Эффект отладки
Получите эффект
Это в основном завершает инициализацию компонента посредством данных-*.
3. Резюме
Вышеуказанное кратко демонстрирует использование метода JQUERY DATA () в сочетании с атрибутом HTML5 DATA-*. В основном он может удовлетворить потребности блоггеров: вам не нужно писать еще одну строку кода JS, чтобы напрямую инициализировать тег. При его использовании просто обратитесь к файлам jQuery.js и jQuery.extension.js. Но мы знаем, что, поскольку это особенность в HTML5, должны быть определенные требования к браузеру. Конечно, эта функция использования является относительно базовой, но ее достаточно для инициализации некоторых простых компонентов.
Если в статье есть неверное понимание, пожалуйста, укажите его, и блоггер будет очень благодарен.
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.