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

Question

Элементы HTML отображаются ранее, тогда загружается onload или document.ready.

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

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

Какова наилучшая практика для работы с ним?

Answer 1

Если вы посмотрите документацию JQuery UI, let's take tabs for example, если вы посмотрите на вкладке тематизации, вы можете увидеть классы применить, чтобы избежать вспышки без стилей содержания:

<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 с классом «startsugly», а затем поместить строку в CSS, который скрывает неподходящие элементы:

.blahblah .startsugly {display: none;} 

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

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

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

Answer 3

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

Answer 4

здание от второго предложения Nick Craver в - У меня нет намерения красть свой ответ, просто добавив еще один вариант - вы можете использовать красоту 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, я бы пошел с предложением Ника Крейвера.