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

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

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

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

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

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

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

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

Источник

3 ответа

Решение

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

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

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

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

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

Источник

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

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

Источник

Я не совсем уверен, что вы хотите показать / скрыть в отсутствие 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 элемент, для соответствия с UI-ожиданиями). Ясно, что без 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.

Источник
Другие вопросы по тегам