加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 （https://www.lidatong.com.cn/）- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置： 首页 > 百科 > 正文

jQuery UI结合Ajax创建可定制的Web界面

发布时间：2020-12-15 23:25:49 所属栏目：百科 来源：网络整理
导读：如今，网站比以往更具可定制性，允许用户更改其空间，根据自己的喜好对其进行个性化。个性化的主页或仪表板页面（例如 iGoogle、MyYahoo! 和 MyAOL）日渐普及，大多数 Web 应用程序内甚至也整合了类似的功能。jQuery 库简化了此类复杂 JavaScript 交互的编写

如今，网站比以往更具可定制性，允许用户更改其空间，根据自己的喜好对其进行个性化。个性化的主页或仪表板页面（例如 iGoogle、MyYahoo! 和 MyAOL）日渐普及，大多数 Web 应用程序内甚至也整合了类似的功能。jQuery 库简化了此类复杂 JavaScript 交互的编写，随着 jQuery UI 的引入，这项功能得到了进一步的简化，该库以易于访问的 jQuery 插件的形式提供了常用用户界面类型。 本文介绍了如何利用 Ajax 和 jQuery UI 创建具有各种定制功能的高度可定制的 UI。您将了解如何定制 Web 页面的各个方面，以及如何使用 Ajax 保存首选项。此外，您还将利用拖放操作等技术来排序列表项，以及组织页面元素和 UI 小部件来切换主题和配色方案 —一切都能在单独一个 Web 页面中完成。

创建定制 UI 功能

jQuery UI 是一个 UI 库，其中包含易于编写的交互、动画和效果，还包括可轻松定制主题的小部件。您可以对下载进行定制，选择您希望包含的主题，还可以提取组件，例如 UI 内核（必需）、交互、小部件或效果。要使用 jQuery UI，您还需要最新版本的 jQuery 库。下载部分包含此库，但您也可以在稍后需要更新此库时直接从 jQuery 网站下载最新版本的库。清单 1 展示了如何在 Web 页面中包含 jQuery UI 库和其他必备文件。

清单 1.

创建包含 jQuery UI 代码的 Web 页面

Creating Customizable Web Interfaces with the jQuery UI and Ajax

所包含的第一个 CSS 提供了所选主题 ui-lightness 的代码。 这是默认主题，是在 jQuery UI 下载过程中选定的，但您可以将其更改为所提供的任意主题。如果您已经下载了该库，希望更新正在使用的主题，只需访问 ThemeRoller，从库中下载现有主题即可，也可以利用它来定制您自己的主题。代码中包含的第二个 CSS 提供了定制类，用于设定页面样式，或者覆盖所选主题内使用的属性。最后，代码中包含的 JavaScript 文件是 jQuery 和 jQuery UI 库。

利用 jQuery UI 创建拖放式界面

拖放功能如今越来越常见，可用于排序列表和组织页面元素，许多 Web 应用程序的个性化主页中也使用了这种功能。jQuery UISortable 插件提供了为 Web 页面添加可排序功能的快捷方法，带有许多选项和事件，支持您按照自己希望的方式定制交互。 清单 2 中的示例展示了如何利用 Sortable 插件创建简单的可排序列表。您可以利用此插件让简单的 HTML 列表成为可排序的拖放式列表。首先要为此列表添加一个标识符 —本例中指定 sortable 作为 ID，以便使用 jQuery 轻松找到此列表，并为其添加可排序函数调用。还要为各项添加 ui-state-default 类，以便保持其样式与所选主题一致。

清单 2.

利用 jQuery UI Sortable 插件创建一个简单的可排序列表

Creating Customizable Web Interfaces with the jQuery UI and Ajax

Creating Customizable Web Interfaces with the jQuery UI and Ajax

<ul id="page">
<li class="column">
<div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
<div class="portlet-header ui-widget-header ui-corner-all">ToDo List


<div class="portlet-content">
<ul id="sortable">
<li class="ui-state-default">Item 1
<li class="ui-state-default">Item 2
<li class="ui-state-default">Item 3
<li class="ui-state-default">Item 4
<li class="ui-state-default">Item 5
<li class="ui-state-default">Item 6
<li class="ui-state-default">Item 7

<div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
<div class="portlet-header ui-widget-header ui-corner-all">Header
<div class="portlet-content">content

<li class="column">
<div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
<div class="portlet-header ui-widget-header ui-corner-all">Header
<div class="portlet-content">content

<li class="column">
<div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
<div class="portlet-header ui-widget-header ui-corner-all">Header
<div class="portlet-content">content

<div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
<div class="portlet-header ui-widget-header ui-corner-all">Header
<div class="portlet-content">content

为保持这些元素的样式与您选择的 jQuery UI 主题一致，您要使用某些 CSS 类将各元素定义为包含标头和内容的 portlet。 这些 CSS 类构成了 jQuery UI CSS 框架，允许您轻松设定 UI 元素的主题。

jQuery UI CSS 框架

至此为止，您已经用到了 jQuery UI CSS 框架中的一些类。在这一节中，我们将进一步探索，学习如何利用这些类让用户能动态更改其个性化仪表板页面的外观。该框架包含许多类，涵盖了常见的 UI 元素。应用这些类时，它们会根据您选择的主题自动为您的小部件设定主题。可用类的类别包括布局帮助元素、小部件容器、交互状态、交互线索、图标（包括状态、图像和图标类型）以及其他可视化元素，例如圆角帮助元素、覆盖和阴影。 使用该框架中的类时，可以轻松在可用主题间切换。清单 5 展示了利用 ThemeRoller 提供的主题切换器工具能多么轻松地完成此过程。

清单 5.

用于为示例 Web 页面上的定制 portlet 添加主题切换器的 JavaScript 和 HTML

$( ".column" ).sortable({
connectWith:".column"
});

$( "#sortable" ).sortable();
});

<div class="portlet-content">
<script type="text/javascript"
src="http://jqueryui.com/themeroller/themeswitchertool/"&gt;
<div id="switcher">

清单 5 中的示例展示了您能多么轻松地为现有示例 Web 页面中的 portlet 添加主题切换器工具。通过为小部件包含相关 JavaScript 文件，并创建一个作为容器的

，即可轻松定位该
，并为其应用 themeswitcher 。这种做法会得到一个包含 jQuery UI 提供的可用主题的下拉菜单。选中一个主题时，整个页面将立即更新来匹配该主题。在允许用户定制其页面时，此类小部件非常有用，其选项甚至可以保存到前面叙述的数据库中，以保存元素位置（但这种工具本身已经拥有基于 cookie 的存储，在用户刷新页面时，此前用户选中的主题将仍然保持可用）。 该库还包含有用的预构建小部件，您可轻松地将其添加到自己的页面中。每个小部件均已结构化为您的自定义主题或者您选定的主题呈现。清单 6 中的示例展示了如何在页面中利用 Tab 小部件来为用户组织某些内容，并使用现有主题加以呈现。

清单 6.

在现有主题内添加 jQuery UI 小部件

Creating Customizable Web Interfaces with the jQuery UI and Ajax

Creating Customizable Web Interfaces with the jQuery UI and Ajax

<div id="tabs">

<ul id="page">
<li class="column">
<div class="portlet
ui-widget
ui-widget-content
ui-helper-clearfix
ui-corner-all">
<div class="portlet-header ui-widget-header ui-corner-all">
ToDo List

    • <div class="portlet
    ui-widget
    ui-widget-content
    ui-helper-clearfix
    ui-corner-all">
    <div class="portlet-header ui-widget-header ui-corner-all">
    Header

    <li class="column">
    <div class="portlet
    ui-widget
    ui-widget-content
    ui-helper-clearfix
    ui-corner-all">
    <div class="portlet-header ui-widget-header ui-corner-all">
    Header

    <li class="column">
    <div class="portlet
    ui-widget
    ui-widget-content
    ui-helper-clearfix
    ui-corner-all">
    <div class="portlet-header ui-widget-header ui-corner-all">
    Theme

    <div class="portlet
    ui-widget
    ui-widget-content
    ui-helper-clearfix
    ui-corner-all">
    <div class="portlet-header ui-widget-header ui-corner-all">
    Header


    Show profile information here

    选项卡式界面包含一个作为容器的

    元素，该元素具有选项卡的 ID，还有两个用作实际选项卡的列表项，包含选项卡名称，两个带有 ID 的选项卡与选项卡列表项中的锚定标记匹配。如您所见，可以轻而易举地添加恰当的 HTML，以显示选项卡和选项卡内容，随后还能轻松地将 Tab 小部件应用于选项卡容器。这将自动显示一个选项卡式界面，并根据您选择的类，应用已选主题。

    使用效果增强 UI

    通过 jQuery UI 库可以利用许多类别的效果，其中许多过渡都是对现有 jQuery 方法的简单扩展。每个类别都包含带有自定参数的方法，例如：

    ------Animate.用于为一个 Web 页面实现动画和彩色效果 Visibility transitions:

    ------Toggle.开关一个元素的可视与否，隐藏或显示此元素 ------Show.显示一个元素，可以使用下列任何动画类型实现动画效果 ------Hide.隐藏一个元素，可以使用下列任何动画类型实现动画效果 Class transitions: ------addClass .可用于为一个元素添加类，可以包含类呈现的两种不同显示状态之间的动画效果 ------removeClass .可用于为一个元素删除类，可以包含类呈现的两种不同显示状态之间的动画效果 ------switchClass .可用于在两个类之间切换，可以包含类呈现的两种不同显示状态之间的动画效果 ------toggleClass .可根据元素中是否已经包含类来为一个元素添加或删除类，可以包含类呈现的两种不同显示状态之间的动画效果 如部分方法说明所示，还有一些可与其他效果方法联合使用的动画效果。这些效果包括 Blind、Bounce、Clip、Drop、Explode、Fade、Fold、Highlight、Puff、Pulsate、Scale、Shake、Size、Slide 和 Transfer。另外利用 jQuery 插件，您还可以轻松应用其他一些高级技术。 与 jQuery UI 库中的其他内容相同，效果的应用非常容易，只需在 Web 页面中定位一个 HTML 元素或元素组，然后应用恰当的方法即可。清单 7 展示了如何对示例 Web 页面中各 portlet 内容应用的方法，以使用 Toggle 效果。在这个例子中，Toggle 效果是通过双击一个 Portlet 的标题触发的，这会导致内容在隐藏和显示之间切换。

    清单 7.

    应用 Toggle 效果隐藏和显示 portlet 内容

    portlet 的内容是通过遍历标头元素实现的，随后利用 jQuery find 方法定位带有 portlet-content 类的相关元素。

    结束语

    利用 jQuery UI 增强 Web 页面非常简单，基本上只需要包含恰当的文件，并执行一次函数调用即可。在 jQuery 和 jQuery UI 　这样的库出现之前，构建高度交互式的界面极为困难，因为必须从零开始编写代码，而且需要执行大量测试来保证代码能在所有主流浏览器中正常工作。如今，您只要包含一个文件并执行一次函数调用即可创造效果和可排序的元素，或者更改主题。

    以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

    （编辑：李大同）

    【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
      相关内容
        推荐文章
          站长推荐
          热点阅读

            【免责声明】本站内容转载自互联网，其发布内容言论不代表本站观点，如果其链接、内容的侵犯您的权益，烦请提交相关链接至邮箱bqsm@foxmail.com我们将及时予以处理。

            建议您使用1920×1080分辨率、谷歌浏览器Google Chrome、Microsoft Edge以获得本站的最佳浏览效果

            Copygight © 2008-2022 https://www.lidatong.com.cn/ All Rights Reserved. 李大同