Кнопки jquery-ui иногда медленно рендерится, альтернатива css?

Question

Я использую jquery-ui.Поддержка кнопок выглядит хорошо, стилизованные кнопки хороши.Единственным недостатком является то, что рендеринг кнопки выполняется в javascript, поэтому иногда при загрузке страницы возникает пауза, и вы видите, как все кнопки меняют форму с собственных кнопок на кнопки в стиле jquery-ui.

Есть ли какие-нибудь «производители кнопок», которые могут просто генерировать CSS для кнопки, которую я могу просто применить к div для получения того же эффекта?Думал, может быть, если я сделаю стилизацию кнопки сам, браузер подготовит ее до того, как страница когда-либо будет показана пользователю, избегая этой неловкой паузы.

Спасибо

Answer 1

Пара вещей - прежде всего, если вы делаете это только для создания статических кнопок (читай: не как замены для флажков или радиокнопок), вы всегда можете использовать HTML, сгенерированный JavaScript, без необходимости вызыватьфункция .button на них.При проверке элемента после вызова функции button вы заметите, что HTML-код немного изменился, и к элементу добавлено несколько классов:

<a class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" href="#" role="button">
    <span class="ui-button-text">Button Content</span>
</a>

К сожалению, jQueryСгенерированный CSS пользовательского интерфейса не включает псевдоклассы :hover и :active, но мы можем легко это исправить.Поиск в CSS для ui-state-hover и ui-state-active и добавление соответствующих псевдоклассов вручную.

---

В качестве альтернативы, вы также можете бросить свои собственные, как, например, то, что я сделал в примере, представленном ниже.Он реплицирует шрифт и цвет фона исходных кнопок в классе, который удаляется при применении стилей интерфейса jQuery:

http://www.jsfiddle.net/ZkWP8/

В примереМы используем тему пользовательского интерфейса jQuery themeroller без модификаций CSS, упомянутых выше.Выполнение .button задерживается на несколько секунд, чтобы эмулировать сетевые задержки при загрузке скрипта и изображений.

Answer 2

Это называется Flash Unstyled Content (FOUC). Есть способ обойти это, добавив display:none; к элементу, в котором появляются кнопки, а затем используя .show() на $(document).ready(). Это гарантирует, что ваши кнопки всегда будут выглядеть в стиле.

Есть один недостаток - ваш сайт не будет грациозно ухудшаться, если пользователь отключит JavaScript.

Answer 3

jQuery UI добавляет класс элемента «ui-button» к элементу (или метку элемента в случае флажков и переключателей).Таким образом, вы можете использовать это, чтобы скрыть элемент с помощью CSS до того, как на него воздействует jQuery UI, и показать его после запуска скрипта.

Пример, если у вашей кнопки есть класс "button":

.button {
    display: none;
}

.button.ui-button {
    display: inline-block;
}

Answer 4

Ответы на этот вопрос были довольно устаревшими, поэтому я решил поделиться этим обновленным решением.

• Он был специально разработан для jQuery 1.10.4 (макет по умолчанию может измениться в будущих версиях)
• Он поддерживает: hover и: активные эффекты, так что те же эффекты могут быть достигнуты без JavaScript

Непрозрачный фон: http://jsfiddle.net/spinal007/FntBG/

.button{
    cursor:pointer;
    display:inline-block;

    line-height:1.4;
    margin: 0 0.1em 0 0;
    padding: 0.3em 1em 0.4em;
    border: 1px solid #ccc;

    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;

    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 0 1px #FFF inset;
    -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 0 1px #FFFFFF inset;
    -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 0 1px #FFF inset;

    color: #666;
    background: #EFEFEF;

    text-decoration: none;
    text-align: center;
    font-family: Segoe UI, Trebuchet MS, Tahoma, Arial, sans-serif;
    font-size:1.1em;
}
.button:hover{
    background-color:#f9f9f9;   
    border-color:#999999;
    color: #212121;
}
.button:active{
    background-color:#71B800;   
    border-color:#64A300;
    color: #ffffff;
}

А вот альтернатива CSS3 Gradient background: http://jsfiddle.net/spinal007/pVVs3/ (вы можете захотеть это, в зависимости от вашей темы!)

Answer 5

Я использую div, чтобы покрыть все тело, пока не будут применены все стили.После того, как все будет сделано, я скрываю div. См. Здесь.

В div для покрытия тела используются следующие стили:

.load-mask 
{
    position:absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    z-index: 10000;
    background-color: #DFE8F6;
    display:block;
}

Answer 6

У меня была та же проблема, и я решил, найдя оптимальное место для выполнения вещей в стиле кнопок jquery, а не в готовом обработчике.Оптимальное место Я имею в виду место в html-коде после кнопок и перед материалом, который генерирует задержки и, конечно, не в состоянии готовности (так что действительно перед событием готовности, относится к моменту времени, а не к месту html).

Нижекод, который мы обычно помещаем как готовый обработчик, но теперь мы помещаем его в оптимальное место

<script type="text/javascript">
$("input[type=submit], a, input[type=button], button").button();
    });
</script>

Кроме того, для уверенности, что все будет оформлено правильно (другие кнопки размещены позже и о которых мы забыли), мы можем выполнить егов готовом тоже.