jquery-ui - 没有javascript的jqueryui

Question

有没有人在没有jQuery组件的情况下使用jQueryUI(比如CSS框架部分)？如果您正在为没有 javascript 或禁用它等的用户提供服务

一个特定的场景是对话框，它非常精彩和简单......没有javascript它只是一个div......一个潜在的解决方案是让对话框div带有一个绝对定位它并高于其他元素的类然后在 jQueryUI 设置对话框时删除该类...这样如果 javascript 无法运行对话框仍然有该类？

或者您会使用 css 框架手动创建对话框...

Answer 1

当 JavaScript 关闭时，我使用 jQuery UI 的类来“一致地”设置样式。您只需使用 jQuery UI 应用于元素的类，并包含 jQuery UI 样式表和资源。

例如，如果你有

<a href="#" id="abutton">This is a button</a>

然后您运行了 jQuery UI JavaScript:

$("#abutton").button();

它将标记更改为:

<a href="#" id="abutton" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button">
    <span class="ui-button-text">This is a button</span>
</a>

给你一个漂亮的 jQuery UI 按钮。但只有在 JavaScript 运行后才会应用。如果用户没有/不允许 JavaScript，那么您将得到一个丑陋的链接。相反，您应该在开始时使用 jQuery UI 类:

<a href="#" id="abutton" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only">This is a button</a>

它将在 JavaScript 运行之前具有基本的 jQuery UI 样式(尽管结构不同 - 跨度不存在，如果您最初有跨度，它无论如何都会添加另一个，恕我直言，这是一个错误)。问题是您希望 JavaScript 继续运行，因为它添加了其他东西，例如鼠标悬停效果(以及前面提到的跨度)，以便拥有 JavaScript 的用户获得完整的体验，但您还想使用 jQuery UI默认类，因为您想要一些一致的主题(即使它不是 100% 完美)。

有关他们的 CSS 框架的更多信息，请查看 http://jqueryui.com/docs/Theming/API .

如果你想让它不使用 JavaScript，你必须:

1. 初始页面，回发
2. 服务器决定需要完成弹出窗口，使用包含所有相关对话框类集的对话框呈现 View 。
3. 用户点击弹出窗口中的按钮，执行另一个回发。
4. 服务器呈现没有弹出窗口的 View 。

它很丑，但是如果没有脚本就不能做动态 HTML，对吧...