Переключатели в диалоге плагинов


Я использовал jQuery интерфейса плагина диалоговое окно , чтобы спросить пользователя "имя" и показать его в следующем диалоговом окне.

Есть ли лучший способ, чтобы добавить функцию кнопки "" для получения данных и для перехода на новый диалог?

    $("#message").dialog({autoOpen: false});
    $("#form").dialog({
        autoOpen: false,
        modal: true,
        title: "What is your name?",
        buttons:{
            "Submit": function(){
                $( this ).dialog( "close" );
                $("#message").dialog("open");
                var str = $("input").val();
                $("span").text(str);
            }
        }
    });
    $("#btn").click(function(){
        $("#form").dialog("open");
    });     


    <body>
    <button id="btn">Click me</button>
    <form id="form">
        <input type="text" name="">
    </form>
    <div id="message">Hello, <span></span>!</div>
    </body>


Комментарии
1 ответ

Ваш Вопрос


Есть ли лучший способ, чтобы добавить функцию кнопки "" для получения данных и для перехода на новый диалог?

Я не думаю, что есть "лучше", хотя вместо того, чтобы использовать объект для кнопки вариант, массив может быть использована, что позволит более настройки кнопок. Например, кнопки могут иметь пользовательский значок и несколько пользовательских обработчиков событий, как события мыши: mouseenter. Смотрите фрагмент кода в конце этого поста для примера.

Отзывы

Элементы без удостоверения личностис

Ваш пример содержит только одну форму ввода (т. е. <input type="text" name="">), хотя это, как правило, редко только одна форма ввода. Как только другой текст/радио/флажок входы добавляются, так что ссылки в JavaScript нужно изменить. Я бы посоветовал вам всегда добавить идентификатор атрибута стихии и использовать их при обращении их в JavaScript. Так что ввод текста может иметь идентификатор атрибута, как id="username". Затем JavaScript можете ссылаться на него, используя этот атрибут: $('#username').val().

То же самое верно для <span> элемент, который устанавливается с текста, введенного пользователем. Целесообразно также создать элемент с идентификатором атрибута и использовать его в JavaScript-код. Это фактически будет препятствовать заголовок диалогового окна сообщение от получать обновление с именем (см. скриншот ниже).

all spans updated

Это происходит потому, что $('span') соответствует несколько элементов, в том числе Заголовок сообщения диалог и элемент, который следует "Hello, "и тогда .text() обновляет все соответствующие элементы.

в jQuery дом готов обратного вызова

Лучше всего обернуть код jQuery в функцию, вызываемую, когда дом готов. Традиционно это было сделано с $.ready() но в последних версиях, что является устаревшим, в пользу $(function() {...}); синтаксис. Таким образом, все переменные будут иметь ограниченные масштабы, вместо того, чтобы глобальные переменные (т. е. window).

ссылок на jQuery

Разумно магазине Дом-адресам (например, $('#message')) в переменную (или на самом деле, постоянно было бы семантически лучше, хотя поддержка браузера может быть проблема там...), поскольку они могут быть дорогими.

Так например:


$("input").val()

можно было бы заменить

usernameInput.val();

если следующая строка добавляется в начало скрипта:

const usernameInput = $('#username');

Дополнительные советы, как эти, я предлагаю прочитать эту статью. Я знаю, что это 3 лет и рауты jQuery в начале, но есть некоторые действительно полезные советы есть.



$(function() { //DOM ready callback
//store references in DOM
const usernameInput = $('#username');
const usernameDisplay = $('#username_display');
//store a reference to the message dialog
const messageDialog = $("#message").dialog({autoOpen: false});
const formDialog = $("#form").dialog({
autoOpen: false,
modal: true,
title: "What is your name?",
buttons: [{
text: "submit",
icon: "ui-icon-contact",
mouseenter: function() { //when user starts to hover over button
$(this).effect('shake', 'swing', 100);
},
click: function() {
$( this ).dialog( "close" );
messageDialog.dialog("open");
var str = usernameInput.val();
usernameDisplay.text(str);
}
}]
});
$("#btn").click(function(){
formDialog.dialog("open");
});
})

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<button id="btn">Click me</button>
<form id="form">
<input type="text" name="" id="username">
</form>
<div id="message">Hello, <span id="username_display"></span>!</div>



1
ответ дан 25 февраля 2018 в 07:02 Источник Поделиться