В различных процессах разработки веб -разработки обработка диалоговых окнов и полевых поксов является очень распространенной технологией обработки интерфейса. При хорошем использовании он может дать пользователям хороший опыт страницы. То же самое относится и к разработке начальной загрузки. Мы часто используем слои диалогового окна всплывающего окна для отображения данных на интерфейсах, таких как добавление, редактирование и просмотр деталей. При удалении можно использовать краткое подтверждение. Если операция успешна, мы можем использовать более богатую коробку подсказки для ее обработки. Эта статья в основном сравнивает эти технические моменты, используемые в разработке начальной загрузки.
1. Использование диалогового окна Bootstrap
Регулярная начальная загрузка имеет несколько размеров диалоговых окно, в том числе небольшие диалоговые окно с состоянием по умолчанию, диалоговые окно средней ширины и полноразмерные диалоговые окны. Интерфейс диалогового окна Bootstrap очень дружелюбный. Когда мы используем клавишу ESC или нажимаем другие пустые пространства с мышью, диалоговое окно будет автоматически скрыто.
Их определения просто отличаются, например, следующее приведено код интерфейса малого диалога по умолчанию:
<! ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------. data-toggle="validator" enctype="multipart/form-data"> <div> <div> <div> <div> <div> <label>Parent ID</label> <div> <select id="PID" name="PID" type="text" placeholder="parent ID..." ></select> </div> </div> </div> </div> <div> <div> <label>Name</label> <div> <input id="Name" name="Name" type="text" placeholder="name..." /> </div> </div> </div> <div> <div> <label>Remarks</label> <div> <textarea id="Note" name="Note" placeholder="Note..."></textarea> </div> </div> </div> </div> </div> </div> </div> <div> <input type = "hidden" id = "id" name = "id"/> <button type = "opper"> подтвердить </button> <button Type = "кнопка" data-dismiss = "modal"> Cancel </button> </div> </form> </div> </div> </div> </div> </div> </form> </div> </div> </div> </div>
Приблизительный интерфейс заключается в следующем:
Обратите внимание на код стиля диалога в приведенном выше коде, следующим образом:
<div>
Если это база данных из двух других размеров, вам нужно только изменить ее здесь. Два кода, показанные ниже:
<div>
а также
<div>
Мы можем решить, какой размер определения диалогового слоя принять на основе макета элементов интерфейса, но методы вызова этих диалоговых окнов являются согласованными.
Интерфейс диалогового окна заключается в следующем:
// show может выбрать клиента $ ("#btnselectcustomer"). Show ();Интерфейс закрытия диалогового окна заключается в следующем:
$ ("#add"). Modal ("Hide");Вообще говоря, диалоговое окно, которое мы появляемся, представляет собой форму, которая может выполнять операции представления, аналогичные сохранению данных. Следовательно, необходимо проверить данные формы. Если есть ошибка, нам может потребоваться напомнить ей по интерфейсу. Следовательно, когда страница инициализирована, правила проверки формы должны быть инициализированы. Ниже приведены наши обычные операции инициализации формы.
// Связанная функция события bindevent () {// Судить, передает ли информация формы проверку $ ("#ffadd"). Validate ({meta: "validate", errorelement: 'span', errorclass: 'help-block-block-error', FocusInValid: false, function (element) {$ (element). }, Успех: Функция (Метка) element.parent ('div'). Приложение (ошибка); (Data.success) {// СДЕЛАТЬСЯ ОБРАЗОВАНИЕ ПОРЕТРЕЙСТВА $ ('#file-portrait'). {Showtips («Вы не уполномочены использовать эту функцию, пожалуйста, свяжитесь с администратором, чтобы справиться с ней.»); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}}); }}}); }}Но, как правило, эти коды будут много повторяться, поэтому мы можем инкапсулировать функции и повторно использовать какой -либо код для использования более простого кода обработки, но мы также можем достичь цели.
// Связано связанные события функция bindEvent () {// Добавить и редактировать записи FormValidate ("ffADD", function (form) {$ ("#add"). Modal ("hide"); // Отправить параметры конструкции на фоновый var postdata = $ ("#ffadd"). Serializearray (); $ .parsejson (json); Чтобы справиться с этим. ");});}); }); }2. Удалить диалоговое окно подтверждения обработки
1) Использование плагина Bootbox
В дополнение к регулярному диалоговому окне выше, мы часто сталкиваемся с кратким диалоговым окном подтверждения. Хотя приведенный выше код также можно использовать для создания диалогового окна подтверждения, в целом нет необходимости быть таким неприятным. Вы можете использовать диалоговое окно подтверждения подключаемого Bootbox для его обработки.
Bootbox.js - это небольшая библиотека JavaScript, которая помогает быстро создать диалоговое окно при использовании Framework Bootstrap, а также может помочь вам создать, управлять или удалять любые необходимые элементы DOM или обработчики событий JS.
Bootbox.js использует три метода для разработки имитации своего родного JavaScript некоторые методы. Их точная подпись метода является гибкой для каждого из них, чтобы принимать различные параметры для настройки метки и указания значений по умолчанию, но их часто называют одинаковыми:
bootbox.alert (сообщение, обратный вызов)
bootbox.prompt (сообщение, обратный вызов)
bootbox.confirm (сообщение, обратный вызов)
Единственными требуемыми параметрами являются предупреждение, это сообщение; Обратный вызов необходим для подтверждения и подачи вызовов для определения ответа пользователя. Даже при вызове обратного сигнала тревоги определяется, когда пользователь отвергает диалоговое окно, потому что наш метод обертывания не может блокировать, как их родной язык, полезен: они асинхронны, а не синхронные.
Эти три метода называют четверть публичного метода, который вы также можете создать, используя свой собственный диалог:
bootbox.dialog (параметры)
Для получения дополнительной документации по справочной информации API, пожалуйста, см.
Тревога
bootbox.alert ("hello world!", function () {example.show ("hello world обратный вызов");});Подтверждать
bootbox.confirm ("Вы уверены?", function (result) {example.show ("Подтвердить результат:"+result);});Или код:
bootbox.confirm («Вы уверены, что удаляете выбранную запись?», function (result) {if (result) {// наконец -то удалить последнюю запятую, ids = ids.substring (0, ids.length - 1); // затем отправьте информацию о асинхронном запросе на фоновый postdata, function (json) {var data = $ .parsejson (json); }});Быстрый
bootbox.prompt ("Как ваше имя?", function (result) {if (result === null) {example.show ("Запрос уволен");} else {example.show ("hi <b>"+result+"</b>");}});Пользовательский диалог
Эффект использования кода и интерфейса заключается в следующем:
bootbox.dialog (…)
[2)
2) Использование плагина SweetAlert
Хотя вышеупомянутый эффект очень соответствует стилю начальной загрузки, интерфейс немного монотонен. Вышеуказанный эффект не то, что мне очень нравится, я столкнулся с эффектом, который выглядит красивее, как показано ниже.
Этот эффект реализуется путем представления плагина SweetAlert (http://t4t5.github.io/sweetalert/).
Swal ({заголовок: «операция», текст: новички, тип: «Предупреждение», ShowCancelButton: True, RefintButtonColor: «#dd6b55», Cancelbuttontext: «Cancel».Код реализации с аналогичными эффектами интерфейса выше следующего:
Как правило, его всплывающий код можно сделать очень простым, как показано ниже.
3. Обработка информации о приглашении на информацию
Вышеуказанные две обработки реализованы с использованием диалогового окна всплывающего окна и блокируют интерфейс. Как правило, мы делаем информационные подсказки, надеясь, что это не повлияет на наши дальнейшие операции или, по крайней мере, обеспечит очень короткий эффект автоматического исчезновения.
Итак, здесь мы представим плагин Jnotify Plugin и Toast.
1) Использование коробки Jnotify Rismer
Jnotify rample Box, отличный плагин с приглашенным на подсказку. После отправки формы мы отвечаем на фон через AJAX и возвращаем результаты и отображаем информацию о возврате на переднем плане. Jnotify может отображать информацию о результатах работы очень элегантно. Jnotify-это плагин для подсказок информации на основе JQUERY, который поддерживает три метода информации: успех работы, отказ работы и напоминание о работе. Brower Jnotify имеет очень хорошую совместимость, поддерживает изменение контента быстрого приглашения, поддерживает расположение местоположения полетов и может настроить параметры плагина.
jsuccess (сообщение, {option}); jerror («Операция не удалась, попробуйте еще раз !!»); Jnotify («Примечание: пожалуйста, улучшите свою личную информацию <strong>! </strong>»);Подробная конфигурация параметров Jnotify:
Autohide: True, // автоматически скрыть шпильку с помощью Bar Bar ClickoverLay: false, // Нажимать ли на слое маски, чтобы закрыть просьбу просьбу Minwidth: 200, // Минимальная ширина Timeshown: 1500, // Время отображения: Milliseconds Showtimeeffect: 200, // Время на отображение на странице. : 15, // Смещение, когда отображается приглашение, и скрытая горизонтальпозиция: «справа», // горизонтальное положение: слева, центр, правая защита: «Внизу», // Вертикальное положение: вверху, центр, нижний шахталл: истинный, // отображать маску. Прозрачность слоя маски на онклере: FN // После закрытия окна подсказок выполните функцию, вы можете снова вызвать другие Jnotify. Как упомянуто выше, три вызова вызываются последовательно.
Ниже приведен общедоступный метод, который я инкапсулировал в класс сценария для достижения показа быстрых эффектов.
// Показать сообщение об ошибке или приглашении (требует Jnotify, связанного с файлом) Функция Deashlor (Tips, Timeshown, Autohide) {jerror (Tips, {Autohide: Autohide || true, // Добавлен в v2.0 Timeshown: Timeshown || 1500, Horizontalposition: «Центр», вертикали: () {// Добавлено в v2.0 // alert ('Jnofity завершена!'); Showoverlay: True, Coloroverlay: '#000', Oncompleted: function () {// Добавлено в v2.0 // alert ('jnofity завершен!');Таким образом, когда мы используем метод Post Ajax, мы можем запрашивать различные потребности.
var postdata = $ ("#ffadd"). serializearray (); $ .post (url, postdata, function (json) {var data = $ .parsejson (json); if (data.success) {// Добавить обработку загрузки портрета $ ('#file-portrait'). FileInput ('upload'); // save SaveSemese (Else SaveSelece SaveSelece SaveSelece SaveSelemese); {ShowerRor ("Сохранить не удастся:" + data.errormessage, 3000);2) Использование плагина TOAST
TOASTRE-это библиотека JavaScript для создания напоминаний о сообщении о странице в стиле GNOME/GROWL. , Toastr может установить четыре режима уведомления: успех, ошибка, предупреждение и подсказка. Расположение эффектов окна и анимации может быть установлено по количеству энергии. На официальном веб -сайте вы можете выбрать параметры для генерации JS, который очень удобен в использовании.
Адрес плагина: http://codeseven.github.io/toastr/
Он может создать следующие эффекты: предупреждение, опасность, успех, быстрый диалог, эффект заключается в следующем.
Его использование кода JS показан ниже.
// Покажите предупреждение, без названия toastr.warning («Мое имя - Иниго Монтойя. Вы убили моего отца, готовитесь к смерти!») // Покажите успех, название toastr.success («Имейте удовольствие от шторма замка! toastr.clear ()
Определение параметра этого плагина заключается в следующем.
// Настройка параметров, если используется значение по умолчанию, следующее поколение toastr.options = {"closebutton": false, // отображать ли кнопку «Debug": false, // будь то режим отладки "PositionClass": "toast-top-full-width" // позиция всплывающего окна «Основной»: «300», // время анимации, отображаемое «hiddaturation»: «300», // время анимации «///время анимация», отображаемое «hiddaturation»: «300». //The animation time disappearing "timeOut": "5000", //The display time "extendedTimeOut": "1000", //Extended display time "showEasing": "swing", //The animation buffering method during display "hideEasing": "linear", //Animation buffering method when disappearing "showMethod": "fadeIn", //Animation method when displaying "hideMethod": "fadeOut" // метод анимации при исчезновении}; // успех побуждает связывать $ ("#успех"). Click (function () {toastr.success ("поздравляю с вашим успехом");})Выше приведено мое краткое изложение моего опыта в обработке и оптимизации диалоговых окно и приглашенных в проекте. Я надеюсь, что для всех будет полезно изучать и улучшить веб -интерфейс. Если вы хотите узнать больше информации, обратите внимание на веб -сайт wulin.com!