Интерфейс JQuery UI выглядит уродливым до document.ready

Ответ 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, дать этим wrapping <div> element класс, пусть .startsUgly, который в вашей таблице стилей имеет:

.startsUgly { display: none; }

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

Затем для обработки этих пользователей с отключенным JavaScript несколько <noscript> magic:

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

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

Ответ 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", а затем помещаем строку в ваш css, который скрывает оскорбительные элементы:

.blahblah .startsugly {display: none;}

Дело здесь в том, что дисплей: никто не входит в игру, когда включен javascript. Пользователи с отключенным будут по-прежнему иметь доступ к вашему контенту. Затем, после document.ready, добавьте в свои функции jQuery UI "сутенерство" и снова покажите элемент нарушения:

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

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

Ответ 3

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

Ответ 4

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

main.js body
{
    display: block;
}

И тогда на вашей "главной странице" должна быть простая строка JavaScript, как показано ниже:

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

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