Как мне постепенно улучшать этот контент с помощью JavaScript? - PullRequest
Новая
       38

Как мне постепенно улучшать этот контент с помощью JavaScript?

3 голосов
/ 27 марта 2012

Основой этой проблемы является то, что я делаю вычислительный проект, который включает в себя некоторые выпадающие поля для ввода и текстовый ввод, где пользователь может ввести дату.

Я использовал YUI дляулучшите форму, чтобы при вводе календаря использовался виджет календаря YUI , а выпадающий список преобразовывался в горизонтальный список входов, в котором пользователь должен щелкнуть один раз, чтобы выбрать любой ввод, а не два нажатия свыпадающий список (надеюсь, что это имеет смысл, но не знаю, как это объяснить)

Проблема в том, что в разделе дизайна моего проекта я заявил, что буду следовать принципам прогрессивного улучшения.Однако я изо всех сил стараюсь обеспечить, чтобы пользователи без JavaScript могли просматривать раскрывающийся список / ввод текста на указанной странице.

Это не потому, что я не обязательно знаю как, но два метода, которые я пробовалкажется неудовлетворительным.

Метод 1 - я пытался использовать YUI, чтобы скрыть текстовое поле и раскрывающийся список, это казалось идеальным решением, однако при загрузке страницы было довольно заметное отставание (особенно в первый раз), текстовое поле и раскрывающийся список, где они видны не менее секунды.Я включил скрипт для этого перед концом тега body, есть ли способ запустить его с помощью YUI?Это поможет?

Метод 2 - Используйте тег noscript.,,однако я не хочу этого делать, потому что, хотя это будет простое решение, я прочитал много плохого о теге noscript.

Есть ли способ заставить метод работать один?Или есть лучший способ сделать это, с которым мне еще предстоит встретиться?

Ответы [ 3 ]

2 голосов
/ 27 марта 2012

Обычно скрипты для отображения / скрытия элементов выполняются довольно быстро. Единственная причина, по которой я могу придумать, почему первая медленная - это то, что скрипт выполняется долго после рендеринга элемента. Вероятно, перед выполнением скрытия или какой-либо другой задержкой выполняется дорогой скрипт.

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

1 голос
/ 27 марта 2012

У Юя есть событие domready (которое происходит немного до загрузки)

http://yuilibrary.com/yui/docs/api/classes/YUI.html#event_domready

function bootstrap(ev) {
    alert("This is the code to launch on domready");
}

YUI().use(
    "event", 
    function (Y) {
        Y.on("domready", bootstrap);  
    }
);

Должен делать то, что вы ищете

1 голос
/ 27 марта 2012

Я не совсем уверен, что вы хотите показать / скрыть в отсутствие JavaScript, однако можно использовать CSS для отображения и скрытия, если вы можете каким-то образом выбрать этот элемент. Например, на основе следующей разметки: 

<form action="#" method="post">
    <fieldset>
        <label for="dateStart">Start date</label>
        <input type="text" name="dateStart" id="dateStart" />
    </fieldset>
</form>

Вы можете показать / скрыть input с помощью следующего CSS: 

label {
    color: #f90;
    cursor: pointer;
}
label:hover {
    text-decoration: underline;
}
label + input {
    display: inline-block; /* or 'display: none' and omit the following two lines */
    height: 0;
    border-width: 0;
}
label + input:focus {
    height: auto; /* or 'display: inline', and omit the following line */
    border-width: auto;
}

(Здесь показан ввод dateStart после нажатия на label (который похож на элемент a, для согласования с ожиданиями пользовательского интерфейса). Очевидно, без JavaScript, виджет календаря YUI не может быть показано (поскольку оно добавлено / используется с JS), но основное поле ввода даты будет там и доступно.

<ч />

Отредактировано , после тестирования (с Chromium 17 / Ubuntu 11.04), которое (несмотря на предыдущее успешное тестирование на localhost) показало, что input не может получить :focus, пока он не появится на странице, следующий исправленный CSS, кажется, решает эту проблему: 

label + input {
    display: none;
}
label:hover + input, /* <- added this selector */
label + input:focus {
    display: inline-block;
}​

JS Fiddle demo .

...