Question

HTML元素先显示onload或document.ready被触发。

所有jQuery UI小部件都加载到document.ready上，它会使页面看起来很难看，只需几秒钟。

处理它的可能选项 - 在使用jQuery UI进行拉伸之前隐藏元素，并在加载后用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 UI类仅适用于document.ready之后。你可以随心所欲地设计它们，但你不会摆脱没有风格的内容。这些类对于UI的使用非常有用，而不是在UI到位之前影响事物的外观。

其次，基本上要避免使用noscript标签，原因很多： 1）它没有真正告诉你javascript是否打开。例如，它可以在浏览器中启用但被防火墙阻止。 2）它是块级标记，因此只有某些地方可以有效地显示。这不是一个通用的解决方案。 3）标签不区分不同系统上的javascript实现程度。

您更接近原始帖子中的最佳做法。诀窍是在javascript中同时进行隐藏和显示。首先，设置您的页面样式，以便在禁用javascript时看起来可以接受。然后，为了防止无格式内容的闪现，通过为html元素分配一个类，在 document.ready（这是关键部分）之前隐藏javascript 中的丑陋元素：

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

因为html元素已经存在，所以在document.ready之前使用它是有效的。然后，就像尼克所说的那样，将违规元素放在一个带有“startsugly”类的div中，然后在你的css中添加一行隐藏有问题的元素：

.blahblah .startsugly {display: none;}

这里的要点是display：none仅在启用javascript时启动。禁用它的用户仍然可以访问您的内容。然后，在document.ready之后，输入你的jQuery UI“pimping”函数，并再次显示有问题的元素：

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

虽然如果它的内容只是在手风琴或标签结构中有条件可见，但最后一步甚至可能是不必要的。

Answer 3

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

Answer 4

建立尼克克拉弗的第二个建议 - 我无意窃取他的答案，只是添加另一个选项 - 你可以利用Modernizr的美丽。如果启用JavaScript，Modernizr将为html元素添加一个简单的js类。所以你可以做的是在主样式表中添加一个简单的样式，如下所示，只有在启用JavaScript时才会隐藏正文（因为我们以后必须使用JavaScript来显示正文）：

main.js body
{
    display: block;
}

然后在您的＆＃39;母版页中提供一系列简单的JavaScript，如下所示：

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

如果您已经将Modernizr用于其他事情，那么这是一个很好的解决方案。否则，如果您没有其他用于Modernizr的话，我会选择Nick Craver的建议。

在document.ready之前，Jquery UI界面看起来很丑陋

4 个答案: