Интерфейс Jquery UI выглядит некрасиво до документа.

Question

HTML-элементы отображаются раньше, чем onload или document.ready.

Все виджеты jQuery UI загружаются в document.ready, и это заставляет страницу выглядеть уродливо в течение нескольких первых секунд.

Возможный вариант решения этой проблемы - скрыть элементы до того, как они будут развёрнуты с помощью jQuery UI, и показать их с JS после загрузки. Но в случае, если JS выключен - пользователь не увидит ни элементов, ни стандартного HTML, ни пользовательского интерфейса jQuery.

Как лучше всего с ним работать?

Answer 1

Если вы посмотрите документацию по пользовательскому интерфейсу jQuery, давайте возьмем вкладки, например , если вы посмотрите на вкладку Theming , вы увидите классы, которые нужно применить, чтобы избежать вспышки контент без стиля:

<div class="ui-tabs ui-widget ui-widget-content ui-corner-all" id="tabs">
   <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
     <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#tabs-1">Nunc tincidunt</a></li>
      <li class="ui-state-default ui-corner-top"><a href="#tabs-2">Proin dolor</a></li>
   <div class="ui-tabs-panel ui-widget-content ui-corner-bottom" id="tabs-1">
      <p>Tab one content goes here.</p>
   </div>
    ...
</div>

Примечание. Это не является лучшей практикой, но если вы хотите не показывать контент, это вариант, вот другой:

Вы можете скрыть элементы с помощью CSS, дать этим обертывающим <div> элементам класс, скажем, .startsUgly, который в вашей таблице стилей имеет:

.startsUgly { display: none; }

.... и показать их в JavaScript, например, $(".startsUgly").show();

Затем, чтобы справиться с этими отключенными пользователями JavaScript, немного волшебства <noscript>:

<noscript>
  <style type="text/css">.startsUgly { display: block; }</style>
</noscript>

таким образом, те, у кого JavaScript отключен просто, не получают эффекта display: none, они все равно будут видеть содержимое.

Answer 2

Прежде всего, классы пользовательского интерфейса jQuery в документации применяются только после document.ready. Вы можете стилизовать их как хотите, но не избавитесь от вспышки нестандартного контента. Классы полезны для создания пользовательского интерфейса, а не для того, чтобы повлиять на внешний вид до того, как пользовательский интерфейс будет создан.

Во-вторых, тега noscript следует избегать по разным причинам: 1) Это на самом деле не говорит вам, включен ли JavaScript или нет. Например, он может быть включен в браузере, но заблокирован брандмауэром. 2) Это тег уровня блока, так что есть только определенные места, где он может появиться. Это не универсальное решение. 3) Тег не различает степени реализации javascript в разных системах.

Вы были ближе к лучшей практике в своем первоначальном посте. Хитрость заключается в том, чтобы скрыть и показать в JavaScript. Во-первых, стилизуйте свою страницу так, чтобы она выглядела приемлемой с отключенным JavaScript. Затем, чтобы предотвратить флеш нестандартного содержимого, сделайте сокрытие уродливых элементов в javascript до document.ready (это критическая часть), назначив класс элементу html:

jQuery('html').addClass('blahblah');

Поскольку элемент html уже существует, он работает с ним до document.ready. Затем, как говорит Ник, поместите нарушающие элементы в элемент div с классом «startugly», а затем вставьте в свой файл строку, которая скрывает нарушающие элементы:

.blahblah .startsugly {display: none;}

Суть в том, что дисплей: никто не вступает в игру только тогда, когда включен JavaScript. Пользователи, у которых он отключен, все равно смогут получить доступ к вашему контенту. Затем, после document.ready, вставьте в свои функции pimping пользовательского интерфейса jQuery и снова покажите нарушающий элемент:

$(".startsUgly").show();

хотя, если это содержание, которое только условно видно в аккордеоне или структуре табуляции, этот последний шаг может даже не понадобиться.

Answer 3

Опираясь на второе предложение Ника Крейвера - я не собираюсь красть его ответ, просто добавляю еще один вариант - вы можете использовать красоту Модернизра. Modernizr добавит простой js класс к элементу html, если JavaScript включен. Итак, что вы можете сделать, это добавить простой стиль в вашу основную таблицу стилей, как показано ниже, который будет скрывать тело, только если JavaScript включен (так как позже мы должны использовать JavaScript, чтобы показать тело):

main.js body
{
    display: block;
}

А затем добавьте на главную страницу простую строку JavaScript, подобную следующей:

<script type="text/javascript">
    $(function()
    {
        $("body").css("display", "block");
    }
</script>

Это хорошее решение, если вы уже используете Modernizr для других целей. В противном случае, если у вас нет другого использования Modernizr, я бы согласился с предложением Ника Крейвера.

Answer 4

$('[class*=" ui-"]').remove();