В предыдущей статье я представил несколько полезных компонентов в серии компонентов Bootstrap (рекомендуется). Далее, эта статья представляет несколько полезных компонентов в серии компонентов начальной загрузки (рекомендуется 2). Заинтересованные друзья будут учиться вместе!
7. Манифест входного компонента многозначения
Что касается многознательного ввода текстовых поле, то это всегда было распространенным требованием. Сегодня блогер рекомендует для всех полезный многозначный входной компонент. Не спасибо, пожалуйста, назовите меня "красный шарф"!
1. Эффект дисплея
Локальная многозначная входная коробка
Удаленное многоцветное поле ввода
2. Описание исходного кода
Спасибо сообществу с открытым исходным кодом и тем милым людям, которые любят делиться. Адрес с открытым исходным кодом.
3. Примеры кода
(1) Локальный многозначный вход
Во -первых, вам нужно ссылаться на следующие файлы
<link href = "~/content/bootstrap/css/bootstrap.css" rel = "styleSheet"/> <link href = "~/content/jquery-manifest-master/src/jquery.manifest.css" rel = "styleshipe"/> <script src = "~/jquery/jquery-1.9.1.9.1.9.19. src = "~/content/bootstrap/js/bootstrap.js"> </script> <script src = "~/content/jquery-manifest-master/build/parts/jquery.ui.widget.js"> </script> <script src = "~/content/jquery-master/build/jquery.manif
Файлы JS и CSS Bootstrap не нужны. Эта статья предназначена ради хорошего стиля, поэтому на нее ссылаются. Манифестный компонент не зависит от начальной загрузки, но зависит от jQuery. Кроме того, он также должен ссылаться на три файла: jquery.manifest.css, jquery.ui.widget.js и jquery.marcolo.js.
Тогда есть инициализация HTML и JS
<input type = 'text' autocompletee = "off" id = "txt_man"/> <script type = "text/javascript"> $ (function () {$ ('#txt_man'). manifest ();}); </script>Через простые шаги, как указано выше, можно получить вышеупомянутый эффект. Разве это не очень просто? Давайте посмотрим на некоторые из его использования
// Общие свойства: Получите коллекцию всех элементов в текстовом поле VAR Values = $ ('#TXT_MAN'). MANIFEST ('значения'); // Общий метод 1: Удалить последний элемент $ ('#TXT_MAN'). MANIFEST ('Удалить', ': последний'); // Общий метод 2: Добавить новый элемент в текстовом поле. Формат второго параметра определяется в формате данных JSON $ ('#txt_man'). Manifest ('добавить', {id: "1", имя: "abc"}); // Общий метод 3: Получить список удаленных поисковых данных $ ('#txt_man'). $ ('#txt_man'). On ('manifestadd', function (событие, данные, $ item, initial) {// alert ("Новый добавленный элемент:"+data);}); // Общее событие 2: удалить событие элемента $ ('#txt_man'). On ('manifestremove', function (Event, data, $ item) {}); $ ('#TXT_MAN'). ON ('MANIFESTECT', FUNCTION (EVENT, DATA, $ item) {});(2) Удаленный многозначный вход
Способ к удаленному поисковому вводу требует, чтобы мы предоставили URL -адрес, получили данные, а затем вернулись в браузер. Для простоты эта статья напрямую использует URL на веб -сайте исходного кода для отображения эффекта.
Во -первых, вам нужно ссылаться на файл JS
<link href = "~/content/bootstrap/css/bootstrap.css" rel = "styleSheet"/> <link href = "~/content/jquery-manifest-master/src/jquery.manifest.css" rel = "styleshipe"/> <script src = "~/jquery/jquery-1.9.1.9.1.9.19. src = "~/content/bootstrap/js/bootstrap.js"> </script> <script src = "~/content/jquery-manifest-master/build/parts/jquery.ui.widget.js"> </script> <script src = "~/content/jquery-manifest-master/build/parts/jquery.marcolo.js"> </script> <script src = "~/content/jquery-manifest-master/build/jquery.manifest.js"> </script>
По сравнению с вышеизложенным, существует дополнительная ссылка на файл jquery.marcolo.js.
Тогда есть инициализация HTML и JS
<form action = "https://api.foursquare.com/v2/venues/search?callback=?" method = "get"> <div> <div> <input type = 'text' id = "txt_man2"/> <img src = "~/content/jquery-manifest-master/bound.gif"/> </div> </div> </form> <script type = "text/javascript"> $ () $ ('#txt_man2'). (Data, $ item, $ mpitem) {return data.name;}, formatvalue: function (data, $ value, $ item, $ mpitem) {return data.id;}, marcopolo: {data: {client_id: 'No2mtqvbqanw3q3sg23ofvmegyowizdt4e1qhrpzo0bfcn4x', client_secret: 'lg2wrkks1sxz2fmkdg01ldw1kdtekktulmxm0xevwrn0llhb, intent:', glab '20150601'}, formatdata: function (data) {return data.response.venues;}, formatiTem: function (data, $ item) {return data.name;}, minChars: 3, param: 'Query'}, требуется: true});}); </scipt>Что касается значения каждого параметра, то должно быть легко понять, если вам это нужно. Блогер кратко отслеживал возвращаемое значение этого метода удаленного поиска
Если друг -парк намерен использовать этот удаленный метод сам, вы можете обратиться к этому формату данных для его реализации.
8. Компонент поиска текстового поля Компонента начальной загрузки
Фактически, многие компоненты имеют эту функцию, касающуюся функции поиска текстового поля. Например, в пользовательском интерфейсе jQuery есть компонент автозаполнения, который блоггер использовал для достижения автоматического завершения. Автоматические поисковые компоненты текстовых поксов Bootstrap появляются в Интернете. Причина, по которой я выбрал этот компонент сегодня, заключается в том, что я думаю, что он похож на стиль начальной загрузки, а компоненты меньше, просты и практичны.
1. Эффект дисплея
Локальный статический поиск (источник данных локальный)
Удаленный поиск (источник данных получается удаленно с помощью запроса AJAX)
2. Описание исходного кода
Описание исходного кода
3. Примеры кода
Первый файл, на который необходимо указать: в основном содержит CSS и файл JS. Нужна поддержка от jQuery и Bootstrap.
<link href = "~/content/bootstrap/css/bootstrap.css" rel = "stylesheet"/> <link href = "~/content/twitter-bootstrap-typeahead-master/twitter-bootstrap-typeahead-master/demo/css/prettify.css" rel = " src = "~/content/jquery-1.9.1.js"> </script> <script src = "~/content/bootstrap/js/bootstrap.js"> </script> <script src = "~/content/witter-bootstrap-typeahead-master/twitter-bootstrap-typea-master/js/js-bootstrap-typeahead/twitter-bootstrap-typeahead/js/js-bootstrap-typeahead/twitter-bootstrap-typeahead/js/js-bootstrap-master-master
Затем инициализация компонента
<input type = 'text' id = "txt_man" />
Источник данных локально
<script type = "text/javascript"> $ (function () {$ ("#txt_man"). Typeahead ({source: [{key: 1, value: 'tonto'}, {key: 2, value: 'montreal'}, {key: 3, value: 'New York'}, key: 4, value: 'buffal }, {key: 6, значение: 'columbus'}, {key: 7, значение: 'dallas'}, {key: 8, value: 'vancouver'}, {key: 9, value: 'seattle'}, {key: 10, value: 'los angel'}], display: ", val:" wal: "});Источник данных получается с помощью запроса AJAX
<script type="text/javascript">$(function () {$("#txt_man").typeahead({ajax: {url: '/Home2/TypeaheadData',timeout: 300,method: 'post',triggerLength: 1,loadingClass: null,displayField: null,preDispatch: null,preProcess: null},display: "value", val: "key"});}); </script>Метод испытаний, соответствующий фону
public jsonResult typeaHeadData () {var lStres = новый список <object> (); для (var i = 0; i <20; i ++) lstres.add (new {key = i, value = guid.newguid (). toString (). substring (0, 4)}); return json (lStres, JsonRequestbeior;Общие свойства:
• Дисплей: отображается имя поля
• Val: фактическое значение
• Элементы: количество результатов поиска, отображаемых по умолчанию. Значение по умолчанию составляет 8
• Источник: локальный источник данных, отформатированный как массив.
• AJAX: объект, запрашиваемый AJAX, может быть напрямую строковым URL или объектом объекта. Если это объект объекта, я не буду говорить о URL. Свойство TriggerLength указывает, что ввод нескольких символов запускает поиск.
Обычно используемые события:
• Избранные элементы: запускается при выборе значения поиска.
<script type = "text/javascript"> $ (function () {$ ("#txt_man"). Typeahead ({ajax: {url: '/home2/typeaheaddata', timeout: 300, метод: 'post', triggerlength: 1, loadingclass: null, displayfield: null, null, null, null, null. "Key", itemsEled: function (item, val, text) {}});}); </script>Элемент параметра представляет выбранный объект, класс параметров представляет фактическое значение выбранного элемента, а текст представляет отображаемое значение выбранного элемента.
9. Компонент начальной загрузки
Что касается компонента начальной загрузки, предыдущая статья представила виджет YSTEP. Он может сыграть определенную роль в просмотре выполнения задачи, но для некоторых сложных предприятий немного бессильно иметь дело с соответствующим бизнесом в соответствии с текущими шагами. Сегодня блогер представит компонент Step, который имеет очень хороший эффект. С помощью этого компонента программистам больше не нужно беспокоиться о сложном дизайне шага.
1. Эффект дисплея
Заглянуть в стиль
Следуйте шагам на «Предыдущий шаг» и «Следующий шаг»
Больше шагов
2. Описание исходного кода
Этот компонент был найден блоггером онлайн. Я видел, что много стилей и использования от начальной загрузки. Единственное, на что мне нужно ссылаться, - это JS и файл CSS. Источник исходного кода еще не найден. Если кто -то знает источник исходного кода, вы можете сообщить блоггеру. Кроме того, чтобы уважать результаты труда автора, блоггер должен уважать оригинальность!
3. Примеры кода
Файлы, на которые нужно ссылаться
<link href = "~/content/bootstrap/css/bootstrap.css" rel = "styleSheet"/> <link href = "~/content/bootstrap-step/css/bs-is-fun.css" rel = "stylesship"/> <script src = "~/jquery-1.9.1. src = "~/content/bootstrap/js/bootstrap.js"> </script> <script src = "~/content/bootstrap/js/brush.js"> </script>
Необходимо ссылаться на BS-fun.css и rush.js, а компоненты нуждаются в поддержке jquery и bootstrap.
Тогда есть инициализация компонента.
(1) Стрелка
<ul> <li> <a> step1 </a> </li> <li> <a> step2 </a> </li> <li> <a> step3 </a> </li> </ul>
Если это статический шаг, вам нужен только приведенный выше HTML -код, чтобы увидеть эффект шага стрелки на рисунке выше. Активный стиль здесь представляет стиль, который прошел шаг.
(2) квадрат
<ul> <li> <a> step1 </a> </li> <li> <a> step2 </a> </li> <li> <a> step3 </a> </li> </ul>
(3) Круглая форма
<ul> <li> <a> step1 </a> </li> <li> <a> step2 </a> </li> <li> <a> step3 </a> </li> </ul>
(4) Прогресс
<ul> <li> <a> step1 <pran> </span> </a> </li> <li> <a> step2 <pran> </span> </a> </li> <li> <a> step3 <span > </span> </a> </li> <li> <a> step4 <pran> </span> </a> </li> <li> <a> step5 <pan> </span> </a> </li> </ul>
(5) Предыдущий шаг, следующий шаг
«Предыдущий шаг» и «Следующий шаг» на рисунке выше определяются самим собой в модальном компоненте начальной загрузки или являются кодом, размещенным для вашей ссылки.
<div id="myModalNext"><div><div><div><button type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button><h4>Option configuration</h4><ul><li><a>Step 1<span></span></a></li><li><a>Step 2 <pran> </span> </a> </li> <li> <a> Шаг 3 <pan> </span> </a> </li> <li> <a> Шаг 4 <pan> </span> </a> </li> </li> </li> </li> </div> <div> <div Data-ride = carousel ». ROLE = "ListBox"> <div> <p> Шаг 1 </p> <div> Настройка роли </div> <div> <input type = "text"/> </div> <div> <button type = "button"> Сохранить </button> </div> <div> <p> step 2 </p> <div> Настройте пользователь </div> <div> <div> <p>> </p> <div> </div> <div> <div> <p>> </p> <div> </div> <div> <div> <p> type = "button"> save </button> </div> <d Div> <p> шаг 3 </p> </div> <d Div> <p> шаг 4 </p> </div> <d Div> <p> Шаг 5 </p> </div> <div> <p> шаг 6 </p> </div> </div> </d Div> <div> <pttune </p> </div> </div> </div> <div> <div> <prectip type = "button"> next </button> </div> </div> </div>
Конечно, вам также нужно зарегистрировать событие Click для двух кнопок
$ ("#mymodalnext. Модальный футер кнопку"). Каждый (function () {$ (this) .click (function () {if ($ (this) .hasclass ("mn-next")) {$ ("#mymodalnext .carouseel"). Карусель ('next'); li.active "). Next (). AddClass (" Active ");} else {$ ("#mymodalnext .carouseel "). Carousel ('prev'); if ($ ("#mymodalnext .step li "). Длина> 1) {$ ($ ($ ("##mymodalxext .step. li.active "). Длина - 1]). removeClass (" Active ")}}})})Логика может быть неполной, а тесты требуются, если они используются формально.
10. Компонент загрузки кнопки Ladda-Bootstrap
Что касается загрузки кнопки, блоггер давно хотел найти подходящий компонент для оптимизации. Если это не обработано, определенно существует возможность повторных операций. Давайте посмотрим на такую маленькую вещь сегодня.
1. Эффект дисплея
Первая встреча
Пользовательский цвет, размер, панель прогресса
2. Описание исходного кода
Адрес исходного кода
3. Примеры кода
Файлы, на которые нужно ссылаться
<link href = "~/content/bootstrap/css/bootstrap.css" rel = "stylesheet"/> <link href = "~/content/ladda-bootstrap-master/ladda-bootstrap-master/dist/ladda-themess.min.css" rel = stylesheet "/> <script. src = "~/content/jquery-1.9.1.js"> </script> <script src = "~/content/bootstrap/js/bootstrap.js"> </script> <script src = "~/content/lada-bootstrap-master/ladda-bootstrap-master/dist/spin.min.js"> </script> </script> </spript src = "~/content/ladda-bootstrap-master/ladda-bootstrap-master/dist/ladda.min.js"> </script>
Инициализация компонента: инициализировать 4 кнопки
<button data-style="expand-left"><span>expand-left</span></button><button data-style="expand-right"><span>expand-right</span></button><button data-style="zoom-in"><span>zoom-in</span></button><button data-style="zoom-out"><span>zoom-out</span></button> $(function () {$ ('кнопка'). Click (e) {e.preventDefault (); var l = ladda.create (this); l.start (); l.setprogress (0 - 1); $. post ("/home2/typeaheaddata", {}, функция (data, statu) {console.log (statU); l.stop ();}); вернуть false;});});Код сомнение: это не должно быть трудно понять. Код, участвующий в инициализации компонента var l = ladda.create (this); L.Start (); Здесь это представляет собой объект кнопки, которая в настоящее время нажимает (обратите внимание, что это объект DOM вместо объекта jQuery), а затем Call L.Stop (); После завершения запроса закройте нагрузку.
(1) Все параметры в стиле данных следующие. Если вы заинтересованы, вы можете попробовать это и посмотреть, каковы эффекты:
Стиль данных = "Расширение левого"
Стиль данных = "Развернуть право"
Стиль данных = "Расширение"
Стиль данных = "Расширение"
Стиль данных = "Увеличение"
Стиль данных = "Увеличение"
стиль данных = "Слайд-левый"
Стиль данных = "Слайд-Право"
Стиль данных = "Слайд-вверх"
Стиль данных = "Слайд-вниз"
стиль данных = "Контракт"
(2) Если вам нужно настроить размер кнопки, компонент имеет встроенное свойство размером с данные. Все варианты размера данных следующие:
data-size = "xs"
data-size = "s"
data-size = "l"
(3) Если вам нужно установить цвет кнопки, используйте Data-Spinner-Color
data-spinner-color = "#ff0000"
(4) Настройки панели прогресса кнопки
Ladda.bind ('button', {callback: function (экземпляр) {var progress = 0; var interval = setInterval (function () {progress = math.min (progress + math.random () * 0.1, 1); ancess.setprogress (progress); if (progress === 1) {exants.stop (); clearinterval (интервал);Текущий прогресс выполнения в основном устанавливается через экземпляр предложения. SetProgress (Progress);, а значение прогресса составляет от 0 до 1. Конечно, вышеуказанное - это просто код для проверки эффекта прогресса. В официальном проекте нам необходимо рассчитать текущую ситуацию выполнения запроса для динамического возврата прогресса.
11. Переключатель компонента Bootstrap Switch
На домашней странице веб -сайта Bootstrap китайского, вы можете найти такой компонент
1. Эффект дисплея
Начальный эффект
Различные атрибуты и события
2. Описание исходного кода
Начальный код-адрес bootstrap-switch: https://github.com/nostalgiaz/bootstrap-switch
Документация и демонстрация Bootstrap-Switch: http://www.bootstrap-switch.org/examples.html
3. Примеры кода
Файлы, на которые нужно ссылаться
<link href = "~/content/bootstrap/css/bootstrap.css" rel = "stylesheet"/> <link href = "~/content/bootstrap-switch-master/bootstrap-switch-master/dist/css/bootstrap3/bootstrap-switch.css" rel = "letleshipe"/> <script src = "~/content/jquery-1.9.1.js"> </script> <script src = "~/content/bootstrap/js/bootstrap.js"> </script> <script src = "~/content/bootstrap-switch-master/bootstrap-switch-master/dist/js/bootstrap-switch.js>
Компоненты зависят от jQuery и начальной загрузки
Тогда есть инициализация HTML и JS
<input type = "fackbox" checked /> $ (function () {$ ('input [type = fackbox]'). bootstrapswitch ({size: "large"});})Атрибут размера не требуется. Если вы используете стиль по умолчанию, параметры не могут быть переданы.
Обычно используются свойства
• Размер: размер переключения. Необязательные значения - «mini», «маленький», «нормальный», «большой»
• Oncolor: цвет кнопки включения в переключатель. Необязательные значения включают «первичный», «Информация», «Успех», «Предупреждение», «Опасность», «По умолчанию»
• Offcolor: цвет переключателя в цвете кнопки выключения. Необязательные значения «Первичные», «Информация», «Успех», «Предупреждение», «Опасность», «По умолчанию»
• Ontext: текст кнопки ON в переключателе, по умолчанию «включено».
• OffText: текст переключателя «выключен» по умолчанию.
• Oninit: события, которые инициализируют компонент.
• OnswitchChange: события при изменении переключателя.
Общие события и методы могут быть использованы для непосредственного просмотра документов, а официальный состав дает очень подробное описание.
12. Компонент по начальной загрузке
Каждый должен знать рейтинги по рейтингам 10 -го и 10 -го Таобао. Я случайно нашел компонент рейтинга в стиле начальной загрузки. Я нашел это интересным. Это может быть полезно для систем электронной коммерции, сообщества и форумов в будущем, поэтому я поделюсь ею.
1. Эффект дисплея
2. Описание исходного кода
Скачать исходный код
3. Примеры кода
Этот компонент требует поддержки стилей jquery и bootstrap
<link href = "~/content/bootstrap/css/bootstrap.css" rel = "stylesheet"/> <link href = "~/content/bootstrap-star-rating-master/bootstrap-star-rating-мастер/css/star-rating.css" rel = "styleshepe"/> <script src = "~/content/jquery-1.9.1.js"> </script> <script src = "~/content/bootstrap-star-master/bootstrap-star-master/js/star-rating.js"> </script> <script src = "~/content/bootstrap-star-master/bootstrap-star-master/js/locales/zh.js"> </script>
Непосредственно через начальный компонент HTML
<input id = "input-2b" type = "number" min = "0" max = "5" step = "0,5" data-size = "xl" data-symbol = "" data-default-caption = "{rating} Hearts" Data-Star-captions = "{}"> <input-id = "input-21a" value = "0" type = "number" min = 5 = 0. data-size="xl"><input id="input-21b" value="4" type="number" min=0 max=5 step=0.2 data-size="lg"><input id="input-21c" value="0" type="number" min=0 max=8 step=0.5 data-size="xl" data-stars="8"><input id="input-21d" value="2" type="number" min=0 max=5 step=0.5 data-size="sm"><input id="input-21e" value="0" type="number" min=0 max=5 step=0.5 data-size="xs"><input id="input-21f" value="0" type="number" min=0 max=5 step=0.5 data-size="md"><input id="input-2ba" type="number" min="0" max = "5" step = "0,5" data-stars = 5data-symbol = "" data-default-caption = "{rating} Hearts" data-star-captions = "{}"> <input-id = "input-22" value = "0" type = "min = 0 max = 5 step = 0.5 data-rtl = 1 data-contatainer-class-class right-right-right-right-right-right-right-right-right-right-right-right-right-right-right-right-right?Компонент инициализируется с помощью класса = "рейтинга". Вот некоторые параметры, которые должны быть легко понять:
• Значение: представляет оценку по умолчанию при инициализации компонента
• Мин: минимальный балл
• Макс: максимальный счет
• Шаг: минимальная шкала добавляется каждый раз
• Размер данных: размер звезд
• Стары данных: количество звезд
Вы можете получить текущую оценку с помощью $ ("#input-21a"). Val ().
Выше приведено некоторые полезные компоненты серии компонентов Bootstrap, которые редактор представил вам (рекомендация 2). Я надеюсь, что это будет полезно для вас. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит вам вовремя. Большое спасибо за вашу поддержку сайту wulin.com!