ПРЕДИСЛОВИЕ: Я уже поделился многими общими компонентами начальной загрузки, включая формы, проверку форм, загрузку файлов, проверку раскрывающихся ящиков, всплывающие окна и т. Д. В течение этого периода блоггер собрал некоторые полезные компоненты (некоторые из которых использовались в проекте). Через два дня он разобрался с некоторыми из них. Основываясь на принципе «хороших вещей, которые должны быть переданы с другими», сегодня мы дадим некоторые преимущества, чтобы поделиться вещами, собранными блоггером для справки, садовниками, нуждающимися. Большинство компонентов являются компонентами с открытым исходным кодом, и некоторые из них являются эффектами, найденными и переписанными блоггерами в Интернете. Они не могут быть удовлетворительными. Если вы заинтересованы, посмотрите.
1. Компонент времени
Есть много временных компонентов в стиле начальной загрузки. Вы можете искать ключевое слово «DatePicker» на GitHub, и вы можете найти много временных компонентов. Блоггер использовал два из них раньше и обнаружил, что будут некоторые проблемы с большим или маленьким размером. После некоторого скрининга мы обнаружили компонент времени, который имеет хорошие результаты и может использоваться для различных сценариев. Давайте посмотрим на его стиль ниже.
1. Эффект дисплея
Начальный эффект
Настройка культуры и форматов даты в компоненте: отображаются только даты
Показать дату и время (опыт мобильных телефонов и планшетных устройств может быть лучше)
2. Описание исходного кода
Чучу посмотрел на эффект компонента и дал адрес исходного кода
3. Примеры кода
Во -первых, ссылка на необходимый файл
<link href = "~/content/bootstrap/css/bootstrap.css" rel = "stylesheet"/> <link href = "~/content/bootstrap-datetimepicker-master/build/css/bootstrap-datetimepicker.css" rel = "stylesheet"/> <script src = "~/content/jquery-1.9.1.js"> </script> <script src = "~/content/bootstrap/js/bootstrap.js"> </script> <script src = "// cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-tocale.j.j.j.j.j.j.j.j.j.j.j.j.j.j.j.j.j.j.j.j.j.jax/libs/moment.js/2.9. <script src = "~/content/bootstrap-dateTimepicker-master/build/js/bootstrap-datetimepicker.min.js"> </script>
JQuery и начальная загрузка требуются. Кроме того, вы также должны ссылаться на файл Moment-with-locales.js. Конечно, вы также можете загрузить этот файл JS в свой локальный район без использования этого метода CDN. Вы можете полностью загрузить этот файл JS в свой локальный район, а затем добавить локальную ссылку.
(1) Начальный эффект
<bakel> Дата: </label> <div class = 'date group date' id = 'dateTimepicker1'> <input type = 'text'/> <pan> <pan> </span> </span> </div> <script type = "text/javascript"> $ (function () {$ ('#dateTimepicker1'). </script>Это даст эффект, как показано на рисунке выше.
(2) Китайская культура и форматирование даты
HTML -часть остается неизменной. Просто добавьте параметры при инициализации JS.
<script type = "text/javascript"> $ (function () {$ ('#DateTimepicker1'). DateTimePicker ({format: 'Yyyy-mm-dd', // форматирование даты, только локаль даты: 'zh-cn' // Китайская культура});}); </script>(3) время отображения
<bakel> время: </label> <div class = 'date Date' date 'id =' dateTimepicker2 '> <input type =' text '/> <pan> <pan> </span> </span> </div> <script type = "text/javascript"> $ (function () {$'#datetimepicker2 '). HH: MM: SS ', Locale:' ZH-CN '}); </script>(4) Максимальная дата и минимальная дата
$ ('#DateTimePicker1'). DateTimePicker ({format: 'yyyy-mm-dd', // форматирование даты, только местонахождение даты отображения: 'zh-cn', // китайская культура Maxdate: '2017-01-01', // максимальная дата Mindate: '2010-01-01' // Минимальная дата};(5) Включить кнопку удаления
ShowClear: True
(6) Атрибут режима просмотра. Установите браузер, чтобы выбрать режим для копирования кода следующим образом: ViewMode: 'Годы'
(7) другие
Для более мощных функций, пожалуйста, обратитесь к API, поэтому я не буду перечислять их все здесь. Существует большое количество атрибутов, событий и методов для удовлетворения ваших различных особых потребностей.
2. Компоненты самостоятельного усиления устройства
Что касается Bootstrap Autoincrementer, это может не понадобиться в каждом проекте. Существуют некоторые специальные сценарии, такие как: определенное текстовое поле требуют числа данных, и размер массива должен быть точно настроен. После долгого разговора некоторые садовники могут не знать, как это выглядит, поэтому, пожалуйста, нажмите на картинку.
1. Эффект дисплея
Фактически, эффект очень прост, но он может автоматически устанавливать максимальное значение, минимальное значение и значение самооплаты и может автоматически выполнять цифровую проверку. Самое удобное, что его необходимо инициализировать с помощью JavaScript, и его необходимо инициализировать только в HTML.
2. Описание исходного кода
Исходный код и адрес документа
3. Примеры кода
Первый файл, на который ссылаются, заключается в следующем:
<link href = "~/content/bootstrap/css/bootstrap.css" rel = "styleSheet"/> <link rel = "styleSheet" href = "https://maxcdn.bootstrapcdn.com/font-awesom href="~/Content/jquery.spinner-master/dist/css/bootstrap-spinner.css" rel="stylesheet" /> <script src="~/Content/jquery-1.9.1.js"></script> <script src="~/Content/bootstrap/js/bootstrap.js"></script> <script src = "~/content/jquery.spinner-master/dist/js/jquery.spinner.js"> </script>
Файл font-aweaome.min.css также является ссылочным файлом CDN, и вы также можете обратиться к нему в свой локальный.
(1) Инициализация
<div Data-trigger = "spinner"> <input type = "text" value = "1" data-rule = "Количество"> <pan> <a href = "javascript:;" "" data-spin = "up"> <i> </i> </a> <a href = "javascript:;" data-spin = "down"> <i> </i> </a> </span> </div>
Просто простой раздел HTML, вы можете увидеть эффект, как показано на рисунке выше. Это легко?
(2) Самостоятельный тип
При просмотре исходного кода компонента вы можете видеть, что для нас определены несколько типов самостоятельных интеграций:
Вы можете определить атрибут правила данных к этим типам, например:
Правила, которые могут контролировать компонент самообладания, выполняются в соответствии с ежемесячными правилами.
(3) Установите максимальное значение, минимальное значение, самооплаченное значение
В дополнение к вышеуказанным конкретным типам, компоненты также поддерживают пользовательское максимальное, минимальное и самооплаченное значение.
<div Data-trigger = "spinner"> <input type = "text" value = "1" data-min = "-10" Data-max = "10" Data-Step = "2" Data-rule = "Количество"> <pan> <a href = "javascript:;" data-spin = "up"> <i> </i> </a> <a href = "javascript:;" data-spin = "down"> <i> </i> </a> </span> </div>
data-min = "-10": минимальное значение data-max = "10": максимальное значение data-step = "2": самостоятельное значение
Это легко понять, и я не буду слишком много объяснять. Эффект:
(4) Захват события
Компонент предоставляет два изменения и изменяющихся события, которые соответствуют численному изменению и обращению события после изменения.
$ ('#id'). spinner ('medice', function (e, newval, oldval) {}); $ ('[data-trigger = "spinner"]'). spinner ('изменение', функция (e, newval, oldval) {});3. Эффект загрузки
Несколько дней назад участник группы спросил, какие компоненты использовать для загрузки Bootstrap. На самом деле, поиск на Baidu также может найти много результатов. Здесь блогер поделится несколькими загруженными виджетами, основанными на его или ее опыте использования, надеясь, что каждый сможет их использовать. В основном он разделен на практические и крутые. Практическая модель имеет средний эффект, но ее можно использовать для различных браузеров; Прохладная модель записывается с использованием последних CSS3 и HTML5, и эффект очень крутой, но в основном нижняя версия IE (ниже 10) не совместима.
1. Практический
1. Идеальная загрузка компонента
Этот компонент - JS, найденный блоггером в Интернете, но после его загрузки я обнаружил несколько больших и небольших проблем. Таким образом, блогер переписал его и назвал его компонентом загрузки начальной загрузки. Его принцип состоит в том, чтобы вспять слой крышки при запуске компонента, а затем, когда компонент закрыт, DOM наложного слоя удаляется, а эффект загрузки использует изображение GIF.
PerfectLoad.js Файл Содержание:
/********************************* • Скорость интернета чрезвычайно жесткая, особенно для веб -сайтов, висящих на иностранных серверах. После того, как вы откроете кучу материалов, вы можете медленно загружать места, а местоположения не соответствуют. Therefore, this method is written to facilitate everyone to use **********************************************************/jQuery.bootstrapLoading = { start: function (options) { var defaults = { opacity: 1, //loading page transparency backgroundColor: "#ffff", //loading page background color borderColor: "#bbb", //prompt Цвет границы пограничной ширины: 1, // Приглашение ширины границы Borderstyle: «Solid», // Приглашение загрузки в стиле границы: «Загрузка, пожалуйста, подождите ...», // Приглашение текстового совета равен 0, нет необходимости приостановить} var options = $ .extend (по умолчанию, опции); // Получить ширину страницы и высота var _pageHeight = document.documentelement.clientHeight, _PageWidth = document.documentelement.clientWidth; // Загрузка пользовательского содержимого, отображаемое до того, как страница не загружена var _loadinghtml = '<div id = "loadingpage" style = "Положение: исправлена; слева: 0; op: 0; _position: Absolute; Width: 100%; Height:' + _pageHeight + 'px; фон:' + опции. '; фильтр: альфа (opacity =' + options.opacity * 100 + '); z-index:' + options.zindex + '; "> <div id =" loadingtips "style =" Положение: Absolute; Опции. '; font-size: 20px; ">' + options.loadingtips + '</div> </div>'; // представлять эффект загрузки $ ("body"). Append (_Loadhtml); // Получить ширину и высоту поля приглашения загрузки var _loadingtip = document.getElementbyId ("загрузки"). ClientHeight, _LoadingTip = document.getElementById ("загрузка"). ClientWidth; // Рассчитайте расстояние и сохраните поле для загрузки, вниз, вниз, влево и вправо, центрированное var _loadingtop = _pageHeight> _LoadingTipsh? (_PageHeight - _LoadingTipsh) / 2: 0, _Loadingft = _PageWidth> _LoadingTipsw? (_PageWidth - _loadingTipsw) / 2: 0; $ ("#loadingtips"). CSS ({"Left": _Loadingleft + "px", "top": _loadingTop + "px"}); // прослушивание страницы загрузки статуса Document.onreadyStateChange = pageLoaded; // Выполнить функцию pageLoaded () {if (document.ReadyState == "foot") {var загрузка massk = $ ('#загрузка пеня'); setTimeout (function () {загрузка massk.animate ({"opacity": 0}, options.delaytime, function () {$ (this) .hide ();});}, Options.sele); }}}, end: function () {$ ("#загрузка пеня"). remove (); }}Этот JS в основном находится в Интернете, но на этом основании блоггер добавил конечный метод.
Давайте посмотрим, как используются компоненты. Вот тестовый код:
<html> <head> <meta name = "viewport" content = "width = device-width"/> <title> загрузка </title> <link href = "~/content/bootstrap/css/bootstrap.css" rel = "styleshyship"/> <script src = "~/content/jquery-1.9.1.j.js"> src = "~/content/bootstrap/js/bootstrap.js"> </script> <script src = "~/content/bootstrap-loading/perfectload.js"> </script> <script type = "text/javascript"> $ (function () {$ ("#btn_submit"). $ .bootStraploading.Start ({загрузки: «Данные обрабатываются, пожалуйста, подождите ...»}); </script> </head> <body> <div style = "padding: 0px"> <div style = "height: 450px;"> <div> Условия запроса </div> <div> <form id = "formearch"> <div> <div> <futne = "кнопка" id = "btn_submit"> <pran aria-dhidden = "true"> </spanting> testing </stoping </stoping </stoping </stoping </stoping </spaniting </stoping </stoping </stoping </stoping <//submit "> <pran aria-hidden =" </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </body> </html>Инструкции для использования: Компонент не требует какого -либо HTML -кода, ему нужно только вызвать метод запуска компонента при выполнении загрузки. Метод start () запускает слой всплывающего окна и может установить все параметры в переменной по умолчанию. Когда загрузка будет завершена, будет вызван метод конечного компонента, и всплывающий слой будет автоматически удален. Посмотрим на эффект:
Если вы не удовлетворены эффектом, вы можете установить параметры в познаниях сами. Аннотации написаны подробно, поэтому я не буду перечислять их здесь один за другим.
2. Компонент загрузки хризантемы Spin.js
Использование изображений для отображения эффектов загрузки имеет свои неотъемлемые недостатки, поэтому многие компоненты загрузки теперь используют CSS+JS для достижения эффектов анимации. spin.js - один из этих примеров. Spin.js - это компонент с открытым исходным кодом с адресом с открытым исходным кодом.
После загрузки исходного кода инициализация обнаруживает, что компонент не имеет маски, так что это может быть только так:
После долгого поиска его параметров, я не смог их найти, или я не нашел их там, где была «организация». Нет никакого способа, блоггер может только добавить эффект самой маски. Таким образом, новый файл стиля CSS был создан и временно назван Spin.css, с одним стилем в нем:
.fade {позиция: фиксирован; Верх: 0; Справа: 0; Внизу: 0; слева: 0; Z-Index: 9999; непрозрачность: 1; фоновый цвет: grey;}Затем spin.js был переписан в двух местах, а контент переписывания следующим образом:
/** * Copyright (C) 2011-2014 Felix GNASS * Лицензирован по лицензии MIT * http://spin.js.org/ * * Пример: var warts = {lines: 12, // Количество линий, чтобы нарисовать длину: 7, // Длина ширины линии: 5, // толщина линии: 10, // Радиус цикл. Спиннерские углы: 1, // круглый (0..1) Цвет: ' #000', // #rgb или #rrggbb непрозрачность: 1/4, // непрозрачность линий вращается: 0, // Смещение вращения: 1, // 1: по часовой стрелке, -1: Скорость против часовой стрелки: 1, // раунд по второму следу: 100, // послеглад. setTimeout () ZINDEX: 2E9, // Использование высокого Z-индекса по умолчанию ClassName: 'Spinner', // CSS Class для назначения элемента Top: '50%', // Центр вертикально слева: '50%', // Центр горизонтально-горизонтальный }; var target = document.getElementbyId ('foo'); var spinner = new Spinner (opts) .spin (Target); */; (function (root, factory) {if (typeof module == 'object' && module.exports) module.exports = factory (); // commonjs else if (typeof define == 'function' && define.amd) define (factory); // amd module else root.spinner = factory); Префикс = [Webkit ',' Moz ',' MS ',' O ']; * Div создан. <n; * 100), Lines] .join ('-'); Префикс + '-' || '%{opacity:' + alpha + '}' + '100%{opacity:' + z + '}' + '} I; CSS (el, prop) {for (var in prop) {el.style [vendor (el, n) === ontefice) obj [n] = def [n]; Длина каждой ширины линии: 5, // Радиус толщины линии: 10, // радиус шкалы внутреннего круга: 1,0, // масштабирует общий размер углах спиннеров: 1, // Окружной (0..1) Цвет: ' #000', // #RGB или #RRGGBB OPATEY: 1/4, // Университет. Опутание линейки. -1: Скорость против часовой стрелки: 1, // раунды в секунду Тропа: 100, // Процент встречи FPS: 20, // кадры в секунду при использовании SetTimeout () ZINDEX: 2E9, // Использовать высокий Z -индекс по умолчанию класс: «Spinner», // CSS Class для назначения элемента Top: '50%', // Центр. // Свидетельствует ли теневой hwaccel: false, // использовать аппаратное положение: «Абсолютно» // позиционирование элемента}; Merge (spinner.prototype, { / ** * Добавляет спиннер к данному целевому элементу. Если этот экземпляр уже * спиннирует, он автоматически удаляется из своего предыдущего целевого вызова b * stop () внутренне. * / spin: function (target) {this.stop (); var self = this; var o = selfts; var el = self = ulleel (null, {var o. CSS (EL, {O.Position, ширина: 0, Zindex: O.Zindex, слева: O.Left, Top: O.Top}); selfts); ASTEP = F / O.Lines; settime (anim, ~~ (1000/fps) el.parentnode.classname = el.parentnode.classname.reploce (reg, ''); (O.Lines - 1) * (1 - O.Direction) / 2; Преобразование: «rotate (' + ~~ (360/o.lines * i + o.rotate) +' deg) translate (' + o.scale * o.radius +' px ' +', 0) ', Borderradius: (O.Corners * O.Scale * O.Width >> 1) +' px '}); css (createel (), {position: 'Absolute', top: 1 + ~ (o.scale * o.width / 2) + 'px', transform: o.hwaccel? o.lines) + '' + 1 / o.speed + 's Linear Infinite'}); rgba (0,0,0, .1)); initvml () { / * Функция утилиты для создания тега VML * / function vml (Tag, attr) {return createel ('<' + Tag + 'xmlns = "urn: схема-microsoft.com: vml">', attr); «Поведение: url (#по умолчанию#vml) '); {Ширина: S, Shight: S}); 360 / o.lines * i + 'deg', слева: ~~ dx}), ins (css (vml ('roundrect', {arcsize: o.corners}), {ширина: r, высота: O.scale * o.width, слева: o.scale * o.radius, top: -o.scale * o.width >> 1, 1, Filtrath: 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, filth vml ('fill', {color: getcolor (o.color, i), непрозрачность: o.opacity}), vml ('ход', {непрозрачность: 0}) // Прозрачный ход для исправления цветного кровотечения при изменении непрозрачности)); 'Progid: dximageTransform.microsoft.blur (pixelradius = 2, makehadow = 1, shadowopacity = .3); o = o.shadow && o.lines || 0; EL =) VISTER) VISTER); 'Transform') && roved.adj) initvml ();spin.js
Два изменения:
(1) При инициализации, если она отображается, добавьте стиль затухания в соответствующий тег.
(2) Удалить стиль затухания каждый раз.
После того, как модификация сделана, интерфейс испытаний теперь доступен.
<html> <head> <meta name = "viewport" content = "width = device-width"/> <title> load2 </title> <link href = "~/content/bootstrap/css/bootstrap.css" rel = "stylesheet"/> <link href = "~/content/spin.js-master/csssse.cssele.cessele.cessel"/> <link href = "~/content/spin.-master/csssse.csele.cessele. <script src = "~/content/jQuery-1.9.1.js"> </script> <script src = "~/content/bootstrap/js/bootstrap.js"> </script> <script src = "~/content/spin.js-master/js/spin.js"> </script> <script type = "ytext/js/js/js/js/spin.js" $ ("#btn_submit"). On ("click", function () {// var opts = {// lines: 9, // количество лепесток // Длина: 1, // Длина лепешки // Ширина: 10, // Ширина лепестки // радиус: 15, // платежный радиус с углами // Угла: 1,////плавность Петла (0-1) // 0-ortation: 0//rottation: 0//rottation:////crot Направление: 1, // направление вращения лепестков 1: по часовой стрелке -1: Counterclockwopeplockpection // Цвет: '#000', // Petal Color // Speed: 1, // Скорость вращения лепестков // Тропа: 60, // Shadow, когда лепал вращается (процент) // Shadow: False, // Будь то лепешник // hwaccel: false, // Спинне. «Spinner», // Spinner CSS Имя // ZINDEX: 2E9, // Z-ось Spinner (по умолчанию-2000000000) // Верх: Spinner ({}). Spin (Target); Центр: True, непрозрачность: 1/8}; </script> </head> <body> <div style = "padding: 0px"> <div style = "height: 450px;"> <div> Условия запроса </div> <div> <form id = "formearch"> <div> <div> <futne = "кнопка" id = "btn_submit"> <pran aria-dhidden = "true"> </spanting> testing </stoping </stoping </stoping </stoping </stoping </spaniting </stoping </stoping </stoping </stoping <//submit "> <pran aria-hidden =" </div> </div> </div> </div> </div> </div> <div id = "foo"> </div> </body> </html> test_spin.cshtmlИнструкции для использования: Если на вашей странице не используется jQuery, см. Файл spin.js, этот файл не требует поддержки jQuery; Если вы хотите использовать jQuery, обратитесь к файлу jquery.spin.js. Приведенный выше код не использует jQuery. Компонент должен определить пустой дивинг, а затем инициализировать его на этом Div. Полученные результаты следующие:
Конечно, если вы не удовлетворены этим эффектом, вы также можете установить прозрачность слоя маски и стиль всей маски. Существуют также различные параметры для вращения, которые можно настроить во время инициализации, и в приведенном выше коде есть подробные комментарии.
2. Кладный стиль
1. jquery.shcircleloader.js компонент
Само собой разумеется, этот компонент также прост в использовании, но он не поддерживается для версий ниже IE10. Давайте сначала посмотрим на эффект:
Что касается конкретного использования кода, то блогер не собирается углубиться в него, поэтому вы можете искать на Baidu или GitHub.
2. Fakeloader.js Component
Больше вариантов, лучший сглаживающий эффект, лучший опыт работы с мобильными телефонами и планшетными устройствами. Просто посмотрите на фотографии, и вы узнаете. Адрес с открытым исходным кодом.
4. Плагин блок-схемы
Мне пришлось сделать рабочий процесс некоторое время назад, и мне нужно было показать, куда продолжался текущий процесс. Я нашел процесс плагина YSTEP. Преимущество этого компонента заключается в том, что он прост в использовании и легком.
1. Эффект дисплея
Посмотрим на эффект сначала
Синяя уменьшенная версия
2. Описание исходного кода
Адрес с открытым исходным кодом.
3. Примеры кода
Во -первых, ссылка на необходимый файл
<link href = "~/content/bootstrap/css/bootstrap.css" rel = "stylesheet"/> <link href = "~/content/ystep-master/css/ystep.css" rel = "stylesheet"/> <script src = "~/jquery-1.9.1.js" src = "~/content/bootstrap/js/bootstrap.js"> </script>
Этот компонент требует поддержки от двух компонентов: jquery и bootstrap.
Затем определите пустой дивинг
<div id = "div_ystep1"> </div>
Наконец, инициализируйте компонент при нажатии кнопки
<script type="text/javascript"> $(function () { $("#btn_submit").click(function () { $("#div_ystep1").loadStep({ //ystep appearance size//Optional value: small,large size: "small", //ystep color scheme//Optional value: green,blue color: "blue", //The steps included in ystep: [{ // Имя шага Название: «Start», // Step Content (когда мышь перемещается к узлу этого шага, оно будет предложено) Содержание: «Запуск процесса»}, {название: «Утверждение», контент: «Каждые роли начинают утверждение»}, {название: «Реализация», контент: «Требования начинать»}, {Title: «End:« Контент: «conte» eLed «et end»}); $ ("#div_ystep1"). Setstep (3); </script>Если это динамический шаг, может потребоваться динамически построить атрибут Steps. Затем используйте SetStep (), чтобы установить, какой шаг вы достигли.
Общие методы:
// Пропустите следующий шаг $ (". Ystep1"). Nextstep (); // пропустите предыдущий шаг $ (". Ystep1"). Prevstep (); // пропустить указанный шаг $ (". Ystep1"). Setstep (2); // Получить текущий шаг $ (". Ystep1"). Getstep ();5. Компонент приглашения кнопок на основе приглашения кнопок
Компонент подсказки кнопки немного похож на функцию подтверждения в JS, но это подтверждение-эффект всплывающего окна подъема инструментов, дающий пользователям решение о определении и отмене, а интерфейс более дружелюбен. Перед тем, как представить этот компонент, вы можете сначала взглянуть на эффект коробки с приглашением в начальной загрузке:
Компонент Bootstrap-Confirmation реализован на основе эффекта этой коробки с приглашением. На GitHub есть много компонентов начальной численности, но они в основном одинаковы. Полем
1. Эффект дисплея
Самый оригинальный эффект
Пользовательский заголовок, текст кнопки
2. Описание исходного кода
Адрес с открытым исходным кодом
3. Примеры кода
(1) Цитируйте файлы:
<link href = "~/content/bootstrap/css/bootstrap.css" rel = "styleSheet"/> <script src = "~/content/jQuery-1.9.1.js"> </script> <script src = "~/content/bootstrap/js/bootstrap.js> </script>
Стили требуют поддержки Bootstrap.css. JavaScript требует поддержки jQuery и Bootstrap.js.
(2) Соответствующий тег Click (может быть любой тег)
<button type = "button" id = "btn_submit1"> <span aria-hidden = "true"> </span> delete </button>
(3) Инициализация JS
<script type = "text/javascript"> $ (function () {$ ('#btn_submit1'). Подтверждение ({animation: true, platement: «внизу», название: «Вы уверены oncancel: function () {// alert ("Нажмите Cancel"); </script>(4) Больше атрибутов, событий, методов
В дополнение к инициализированным свойствам, упомянутым выше, есть некоторые обычно используемые свойства. например:
btnokclass: определить стиль кнопки; BtncancelClass: отмените стиль кнопки; Синглтон: разрешено ли только одно окно определения; POPOUT: Смотреть ли окно определения, когда пользователь нажимает на другое место;
Например, вы можете установить btnokclass на Btnokclass: 'btn btn-sm btn-primary',
6. Компоненты классификации изображений и фильтрации muxitup
Это компонент группировки и фильтрации с очень крутым эффектом и адрес с открытым исходным кодом. Блоггер увидел демонстрацию в Интернете и подумал, что это действительно эффективно. Без лишних слов изображение выше.
Как насчет этого, эффект в порядке. Этот компонент в настоящее время не используется в проекте, но я чувствую, что существует вероятность того, что он нуждается в его будущем, поэтому я собрал его. Код реализации скопирован онлайн. Я не изучал это глубоко. Если вам интересно, вы можете посмотреть. Код HTML+JS реализуется следующим образом:
<html><head> <meta name="viewport" content="width=device-width" /> <title>mixitup</title> <link href="~/Content/image/css/normalize.css" rel="stylesheet" /> <link href="~/Content/image/css/layout.css" rel="stylesheet" /> <script src="~/Content/jquery-1.9.1.js"></script> <script src="~/Content/mixitup-master/jquery.easing.min.js"></script> <script src="~/Content/mixitup-master/build/jquery.mixitup.min.js"></script> <script type="text/javascript"> $(function () { var filterList = { init: function () { debugger; // MixItUp plugin $('#portfoliolist').mixitup({ targetSelector: '.portfolio', filterSelector: '.filter', effects: ['fade'], easing: 'snap', // call the hover effect onMixEnd: filterList.hoverEffect() }); }, hoverEffect: function () { // Simple parallax effect $('#portfoliolist .portfolio').hover( function () { $(this).find('.label').stop().animate({ bottom: 0 }, 200, 'easeOutQuad'); $(this).find('img').stop().animate({ top: -30 }, 500, 'easeOutQuad'); }, function () { $(this).find('.label').stop().animate({ bottom: -40 }, 200, 'easeInQuad'); $(this).find('img').stop().animate({ top: 0 }, 300, 'easeOutQuad'); } ); } }; // Run the show! filterList.init(); }); </script></head><body> <div> <ul id="filters"> <li><span data-filter="app card icon logo web">所有分类</span></li> <li><span data-filter="app">手机应用</span></li> <li><span data-filter="card">卡片</span></li> <li><span data-filter="icon">图标</span></li> <li><span data-filter="logo">Logo</span></li> <li><span data-filter="web">网页</span></li> </ul> <div id="portfoliolist"> <div data-cat="logo"> <div> <img src="~/Content/image/Logo/5.jpg" /> <div> <div> <a>Bird Document</a> <span>Logo</span> </div> <div></div> </div> </div> </div> <div data-cat="app"> <div> <img src="~/Content/image/app/1.jpg" /> <div> <div> <a>Visual Infography</a> <span>APP</span> </div> <div></div> </div> </div> </div> <div data-cat="web"> <div> <img src="~/Content/image/web/4.jpg" /> <div> <div> <a>Sonor's Design</a> <span>Web design</span> </div> <div></div> </div> </div> </div> <div data-cat="card"> <div> <img src="~/Content/image/card/1.jpg" /> <div> <div> <a>Typography Company</a> <span>Business card</span> </div> <div></div> </div> </div> </div> <div data-cat="app"> <div> <img src="~/Content/image/app/3.jpg" /> <div> <div> <a>Weatherette</a> <span>APP</span> </div> <div></div> </div> </div> </div> <div data-cat="card"> <div> <img src="~/Content/image/card/4.jpg" /> <div> <div> <a>BMF</a> <span>Business card</span> </div> <div></div> </div> </div> </div> <div data-cat="card"> <div> <img src="~/Content/image/card/5.jpg" /> <div> <div> <a>Techlion</a> <span>Business card</span> </div> <div></div> </div> </div> </div> <div data-cat="logo"> <div> <img src="~/Content/image/logo/1.jpg" /> <div> <div> <a>KittyPic</a> <span>Logo</span> </div> <div></div> </div> </div> </div> <div data-cat="app"> <div> <img src="~/Content/image/app/2.jpg" /> <div> <div> <a>Graph Plotting</a> <span>APP</span> </div> <div></div> </div> </div> </div> <div data-cat="card"> <div> <img src="~/Content/image/card/2.jpg" /> <div> <div> <a>QR Quick Response</a> <span>Business card</span> </div> <div></div> </div> </div> </div> <div data-cat="logo"> <div> <img src="~/Content/image/logo/6.jpg" /> <div> <div> <a>Mobi Sock</a> <span>Logo</span> </div> <div></div> </div> </div> </div> <div data-cat="logo"> <div> <img src="~/Content/image/logo/7.jpg" /> <div> <div> <a>Village Community Church</a> <span>Logo</span> </div> <div></div> </div> </div> </div> <div data-cat="icon"> <div> <img src="~/Content/image/icon/4.jpg" /> <div> <div> <a>Domino's Pizza</a> <span>Icon</span> </div> <div></div> </div> </div> </div> <div data-cat="web"> <div> <img src="~/Content/image/web/3.jpg" /> <div> <div> <a>Backend Admin</a> <span>Web design</span> </div> <div></div> </div> </div> </div> <div data-cat="icon"> <div> <img src="~/Content/image/icon/1.jpg" /> <div> <div> <a>Instagram</a> <span>Icon</span> </div> <div></div> </div> </div> </div> <div data-cat="web"> <div> <img src="~/Content/image/web/2.jpg" /> <div> <div> <a>Student Guide</a> <span>Web design</span> </div> <div></div> </div> </div> </div> <div data-cat="icon"> <div> <img src="~/Content/image/icon/2.jpg" /> <div> <div> <a>Scoccer</a> <span>Icon</span> </div> <div></div> </div> </div> </div> <div data-cat="icon"> <div> <img src="~/Content/image/icon/5.jpg" /> <div> <div> <a>3D Map</a> <span>Icon</span> </div> <div></div> </div> </div> </div> <div data-cat="web"> <div> <img src="~/Content/image/web/1.jpg" /> <div> <div> <a>Note</a> <span>Web design</span> </div> <div></div> </div> </div> </div> <div data-cat="logo"> <div> <img src="~/Content/image/logo/3.jpg" /> <div> <div> <a>Native Designers</a> <span>Logo</span> </div> <div></div> </div> </div> </div> <div data-cat="logo"> <div> <img src="~/Content/image/logo/4.jpg" /> <div> <div> <a>Bookworm</a> <span>Logo</span> </div> <div></div> </div> </div> </div> <div data-cat="icon"> <div> <img src="~/Content/image/icon/3.jpg" /> <div> <div> <a>Sandwich</a> <span>Icon</span> </div> <div></div> </div> </div> </div> <div data-cat="card"> <div> <img src="~/Content/image/card/3.jpg" /> <div> <div> <a>Reality</a> <span>Business card</span> </div> <div></div> </div> </div> </div> <div data-cat="logo"> <div> <img src="~/Content/image/logo/2.jpg" /> <div> <div> <a>Speciallisterne</a> <span>Logo</span> </div> <div></div> </div> </div> </div> </div> </div><!-- container --></body></html>muxitup7. Резюме
以上是博主最近收藏的一些前端组件，在此分享给大家，有实用型，也有炫酷型，不管如何，希望能帮助需要的园友节省寻找组件的时间。还有一些组件没有整理出来，待整理好后放到后面分享。如果你觉得本文对你有帮助，不妨推荐下。再次感谢园友们的支持，不管是物资奖励还是精神支持，都是对博主分享精神的肯定，博主一定继续努力。
The above is the relevant knowledge of the Bootstrap component series welfare chapter (recommended) that the editor introduced to you. Я надеюсь, что это будет полезно для вас. If you have any questions, please leave me a message and the editor will reply you in time. Большое спасибо за вашу поддержку сайту wulin.com!