jquery 好的ui框架_使用jQuery UI和jQuery插件构建更好的Web应用程序

最新推荐文章于 2024-04-17 10:26:51 发布

cuyi7076

最新推荐文章于 2024-04-17 10:26:51 发布

阅读量956

点赞数

文章标签： vue html python css java ViewUI

原文链接：https://www.ibm.com/developerworks/web/library/wa-jquerywebapps/index.html

版权

jquery 好的ui框架

如果您是传统的桌面应用程序开发人员，而转向开发Web应用程序，那么选择HTML和CSS可能完全没有问题。但是为您的应用程序提供美观的视觉设计可能是一个挑战。 jQuery UI和各种jQuery插件可以极大地帮助您以最少的GUI设计时间将Web应用程序快速组合在一起。

JavaScript和jQuery

如果您希望网页具有任何程度的动态内容或交互性，JavaScript始终是构建任何网页的固有部分。如果没有JavaScript，您想要在运行时执行的任何更新页面的操作都需要刷新页面，这会使界面变得笨拙。近年来，随着JavaScript的发展以及Web应用程序的功能越来越强大，JavaScript的重要性已经飞涨。 JavaScript甚至通过服务器端JavaScript引擎Node.js等技术在服务器端找到了位置。请参阅相关主题的链接上的Node.js和JavaScript的详细信息在一般情况下，如果你要刷。

jQuery是主要用于客户端JavaScript代码的库。它可以极大地缩短编写UI代码所需的时间，为许多日常操作提供快捷方式。它还包括一个灵活的Ajax库，该库在创建动态接口时很有用，并且已经与浏览器交叉兼容。请参阅相关主题的更多信息的链接，包括一个下载链接库的开发和生产副本。生产代码已“最小化”，这意味着所有不必要的空格和注释均已删除。如果您正在探索库的内部结构，则强烈建议您阅读开发副本。在使用任何第三方库之前，需要付费对其进行检查，以确保您了解并喜欢它的质量和功能。

jQuery UI

jQuery UI是一组UI小部件和CSS样式，它们预先打包在一起以完成常见任务，例如，设置自定义窗口以通过JavaScript和CSS提示用户提供信息，而不是作为旧式弹出窗口。当您访问jQuery UI网站时（请参阅参考资料中的链接），您将看到没有直接下载选项。而是，该站点提供了一个Build自定义下载链接。单击此链接可以组装您自己的个性化软件包，在其中可以清除您不打算使用的任何组件（例如Accordion或Datepicker窗口小部件）以减小库的大小。

当您下载jQuery UI软件包时，您会注意到有很多文件。 development-bundle目录包含演示和文档，它们对您有用，但对于在生产环境中进行部署不是必需的。但是，css和js目录中的文件确实需要部署到您的Web应用程序。 js目录包括jQuery和jQuery UI库。 css目录包括CSS文件以及用于生成小部件和样式的所有图像。

内容主题/皮肤

您从主页上汇编的jQuery UI下载也使您可以选择使用特定主题。 jQuery UI页面提供了一种工具，可以查看网站上可用的各种主题以节省时间，或者您可以使用网站通过指定首选颜色来构建自己的主题。这样做基本上可以自动为您组装必要CSS设置，从而节省一些时间。例如，图1显示了Humanity主题（顶部）与Start主题（底部）的对比。每个主题都包括一整套匹配的图标。

图1. Humanity主题与Start主题的比较

主题提供了一种简便的方法来获取外观精美的整套UI组件，而无需花费大量时间修改CSS值或在图像编辑器中工作以生成静态图像元素。本文中的示例使用“人性”主题。但是，使用外观并不意味着您不能使用自己CSS来附加或覆盖jQuery UI CSS。清单1提供了一个基本HTML模板，该模板引入了jQuery和jQuery UI，并包括一个自定义CSS文件app.css，该文件将覆盖按钮中文本周围显示的填充量。它还包括app.js，您可以在其中放置特定于应用程序JavaScript代码。

清单1.加载jQuery UI的基本HTML模板

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<link rel="stylesheet" type="text/css" href="css/humanity/jquery-ui-1.8.10.custom.css" />
<link rel="stylesheet" type="text/css" href="css/app.css" />
<script src="js/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.10.custom.min.js" type="text/javascript"></script>
<script src="js/app.js"></script>
<body>
</body>
</html>

app.css:
body {
        font-size: smaller;
}

/* Override jQuery UI theme's padding on buttons: */
.ui-button-text-only .ui-button-text {
        padding: 0.2em 0.5em;
}

界面改进：对话框小部件

许多Web开发人员都是alert或confirm功能的支持者，这些功能用于向（或从）访问者获取消息。这些消息充其量是俗气的，特别是因为它们通常包含一个标题，例如“ www.yoursite.com上的页面说...”，但实际上并没有什么特别的含义。另一种常见的方法是打开一个弹出窗口。由于弹出窗口阻止程序引起的问题，此方法逐渐失去优势，但它也具有一定的粘性。

使用jQuery UI Dialog功能，可以显示任意内容或display: none隐藏的预定义<div>标签display: none当您需要与访问者进行交互时，不显示任何内容。图2显示了此功能对整体外观的影响。

图2.将一个普通的警报窗口与一个jQuery UI Dialog小部件进行比较

当您的文档中有一个单独的<div >标记来保存要显示的内容时，使用Dialog小部件最容易。通常，将一个空的<div>标记重新用于对话框是很好的。首先，设置内容，然后显示对话框，如清单2所示：

清单2.显示一个jQuery UI对话框小部件

<div style="display: none;" id="dialogHolder"><p id="dialogContent"></p></div>

in JavaScript code:
$('#dialogContent').html('Isn\'t this <b>cooler</b>?<br /><br />By setting 
   modal to true, you can require the user to dismiss this before interacting 
  with more of the page.');
$('#dialogHolder').dialog({
  autoOpen: true,
  title: 'Hello!',
  modal: true,
  buttons: {
    "Go Away": function() {
      $(this).dialog("close");
    }
  }
})

界面改进：手风琴和制表符

jQuery UI引入了一个名为Accordion的小部件，它使您可以拥有多个内容部分，其中通常只有一个部分可见（默认情况下）。单击其他部分将使可见部分被动画隐藏，并显示新部分。手风琴的一个优点是能够具有几乎不受限制的部分，因为其他部分是垂直排列的。此功能提供了流畅而简单的界面。

许多网站访问者将更加熟悉传统的选项卡式布局。在这里，当前选择的选项卡可见，而其他选项卡则隐藏，有效地限制了选项卡的数量，因为您受到水平宽度的限制。图3显示了Accordion小部件（顶部）和Tab小部件（底部）。

图3. jQuery Accordion和Tab小部件

使用一个包含<div>手风琴，然后是一系列的节。每个部分以<h3>和<a>标记开头，后跟一个子容器<div> ，该子容器保存每个手风琴部分的内容。同样，对于选项卡控件，将使用包含<div>内容，然后使用<ul>标记对选项卡本身进行定义。在每个<li> ，使用锚点（ <a> ）将选项卡绑定到内容的<div> 。接下来，一系列<div>元素（其ID与无序列表（ <ul> ）中定义的ID匹配）定义了实际的内容。在清单3中更容易看到这一点。一旦定义了内容，就可以通过调用.accordion();来初始化手风琴或制表符功能.accordion(); 或.tab(); 在适当的<div>元素的jQuery选择器上。

清单3.设置一个Accordion小部件和一个Tab小部件

<div id="accordionDemo" style="width: 50%; margin-left: auto; margin-right: auto;">
  <h3><a href=#">Top Section</a></h3>
  <div>
    <p>Initial content for the first "tab" of the accordion goes here.</p>
  </div>
  <h3><a href=#">Next Section</a></h3>
  <div>
    <p>More content...</p>
  </div>
  <h3><a href=#">Last section</a></h3>
  <div>
    <p>You can have as many accordion sections as needed.</p>
  </div>
</div>

<div id="tabDemo" style="width: 50%; margin-left: auto; margin-right: auto;">
  <ul>
    <li><a href="#t1">First Tab</a></li>
    <li><a href="#t2">Middle Tab</a></li>
    <li><a href="#t3">Last Tab</a></li>
  </ul>
  <div id="t1">
    <p>First tab content goes here. The anchor href for the tab titles must 
       match the div for the content.</p>
  </div>
  <div id="t2">
    <p>Second Tab Content</p>
    <br />
    <img src="//www.google.com/images/logos/ps_logo2.png" />
  </div>
  <div id="t3">
    <p>As with the Accordion, you can have as many tabs as you want, although 
       horizontal width places some practical limit there.</p>
  </div>
</div>

in JavaScript code:
$(document).ready(function() {
  $('#accordionDemo').accordion();
  $('#tabDemo').tabs();
}

窗口小部件：进度栏

jQuery UI还提供了一个进度条小部件，对于长时间运行的操作可能很有用。这个小部件非常易于使用。定义一个没有ID且没有内容的<div> ，然后在其上调用progressbar函数；例如， $('#yourDiv').progressbar(); 。实际上，此小部件可以与Ajax技术结合使用以反映操作的进度。

窗口小部件：日期选择器

严格要求以特定格式输入日期的网站令人讨厌，尤其是当其访问者来自不同国家（使用自己的日期格式）时。保留自由格式的输入字段也很危险，该字段需要后端验证，并且如果无法解析输入的日期，则可以通知访问者。一种简单的解决方案是使用日期选择器小部件，如jQuery UI提供的那样。它具有广泛的功能，包括限制日期范围，重命名日历中的日期（以进行国际化）和其他功能。使用起来很简单。创建一个标准的文本输入字段，例如：

<input type="text" id="dateDemo" size="10">

然后使用以下代码将其转换为日历：

$('#dateDemo').datepicker({ 'maxDate': '+4m'});

上面的代码定义了从当前日期（发生日期为2011年3月5日）起最多四个月的日期。图4中的屏幕快照反映了这一点。

图4. jQuery UI Datepicker小部件

建立在jQuery动画上

jQuery本身提供了使用animate进行动画处理的能力，该动画将任何属性从一个值转换为另一个值。定义自己的动画时，此功能很有用。但是始终编写自己的动画需要花费时间。 jQuery UI添加了预定义的动画，包括独立的“跳动”，“突出显示”，“脉动”，“摇动”，“大小”和“转移”效果，以及“盲”，“剪辑”，“放下”，“爆炸”，“淡入”，“折叠”，“折叠”，“滑动”和“附加”的显示和隐藏效果。规模。这些效果在通常的jQuery show和hide函数中使用。例如， $('#googleLogo').show('slide', {}, 1000); 或$('#googleLogo').hide('explode', {}, 2000); 。

jQuery插件

第三方已经为jQuery开发了数十种插件。这些插件通常独立于jQuery UI，并且不需要，尽管它们确实需要jQuery本身。让我们看一些特别有用的插件。

简单树

自从Microsoft®Windows®Explorer首次出现以来，基于树的菜单一直很受欢迎。它们是浏览一组复杂资源（如文档）的简便方法。 jQuery Simple Tree插件使单击菜单上的任何JavaScript操作都易于实现树菜单。如果需要，该插件还可以拖放树项目，重新组织它们，还具有在放置时触发的功能。（请参阅相关主题的下载链接，所有必需的组件也是在示例代码可用的下载部分。）图5显示了简单的树插件使用。

图5. Simple Tree jQuery插件

树内容由单个外部<ul>元素定义，该元素具有用于标识树的ID和样式设置CSS设置。在此内部，使用<li>元素定义根项目。在此元素内，放置了另一个<ul>元素，其中包含树项（每个元素都在其自己的<li>元素中）。清单4演示了这种布局。完成后，将simpleTree函数来激活树功能。

清单4.使用简单树设置树菜单

<head>
  <link rel="stylesheet" type="text/css" href="css/jquery.simple.tree.css" />
  <script src="js/jquery-1.5.1.min.js" type="text/javascript"></script>
  <script src="js/jquery.simple.tree.js" type="text/javascript"></script>
</head>
<body>
  <ul id="treeDemo" class="simpleTree">
    <li class="root"><span>Here are some items.</span>
      <ul>
        <li class="open" id="TopmostBranch"><span>Top Branch</span>
          <ul>
            <li id="SubItem1"><span>Sub items</span></li>
            <li id="SubItem2"><span>are in another</span></li>
            <li class="open" id="SubItem3"><span><ul> level.</span>
              <ul>
                 <li id="SubSubItem1"><span>like this!</span></li>
              </ul>
            </li>
          </ul>
        </li>
        <li id="AnotherBranch"><span>Another Branch</span></li>
        <li id="LastBranch"><span>Last Branch</span></li>
      </ul>
    </li>
  </ul>
</body>

in JavaScript code:
$(document).ready(function() {
  $('#treeDemo').simpleTree({
  autoclose: true,
  afterClick: function(node) {
    alert($('span:first',node).parent().attr('id') + " was clicked.");
  },
  animate: true,
  drag: false
  });
});

上载

Uploadify jQuery插件使您可以将文件上传到站点，而无需对新页面执行POST操作，并在文件上传时显示进度指示器。上传本身由Adobe®Flash®组件处理。该工具允许进行大量的自定义，包括指定允许的文件扩展名，大小限制以及是否可以一次选择多个文件。每个文件上传完成后，将调用onComplete函数；所有文件完成后，将调用onAllComplete函数。 Uploadify随附的默认上载处理程序通过回显上载文件的名称进行响应，但是可以轻松地自定义此上载处理程序以满足您的需要（例如，将文件发布到论坛中或采取其他措施）。清单5显示了如何使用Uploadify设置文件上传。

清单5.将标准文件输入转换为Uploadify上传器

<head>
  <script src="js/jquery-1.5.1.min.js" type="text/javascript"></script>
  <script src="uploadify/swfobject.js" type="text/javascript"></script>
  <script src="uploadify/jquery.uploadify.v2.1.4.min.js" type="text/javascript"></script>
</head>
<body>
  <div style="margin-left: auto; margin-right: auto; width: 200px">
    <b>Upload a file to test:</b> <input id="uploadifyDemo" 
       name="uploadifyDemo" type="file" />
  </div>
</body>

in JavaScript code:
$(document).ready(function() {
  $('#uploadifyDemo').uploadify({
    'auto': true,
    'folder': 'tmp',
    'cancelImg': 'uploadify/cancel.png',
    'script': 'uploadify/uploadify.php',
    'uploader': 'uploadify/uploadify.swf',
    onComplete: function(evt, id, file, resp, data) {
      alert('The file "' + file['name'] + '" with size "' + file['size'] + 
            '" was uploaded. (It will be deleted in a few minutes 
            automatically.)' + "\n\nThe upload script returned: " + resp);
    }
  });
});

最好确保公众无法访问您的上载目录或受到良好保护。否则，攻击者可能会上载自己的代码并在您的服务器上执行该代码。在此示例中，文件被写入文章示例目录中的tmp /中，因此您只需使用.htaccess规则禁止所有访问者访问tmp /。确保您的Web服务器正在运行的用户（例如，www-data或apache）具有对上载目录的写入权限也很重要。

简单提示

任何应用程序，无论是桌面应用程序还是基于Web的应用程序，都需要自我记录，以使用户发现它真正易于使用。工具提示是执行此操作的一种快速方法。在使用了数十年的工具提示后，大多数人都经过了本能训练，如果不确定它们是什么，可以让鼠标停留在屏幕上的某个项目上，等待弹出帮助。 Simpletip插件使此操作变得容易。使用Simpletip，您可以创建基本的工具提示或使用其他选项来控制放置。支持显示和隐藏工具提示的效果，包括JavaScript函数定义的自定义动画。工具提示的内容可以来自硬编码文本，也可以来自其他任何页面内容，例如使用$('#elementId').html()隐藏的<div>元素。您还可以使用Ajax以编程方式获取内容，或使用$('#simpleTip3').simpletip({ content: getToolTip()});类的东西从文档的另一个来源获取内容$('#simpleTip3').simpletip({ content: getToolTip()}); 。清单6展示了出现在句子中单词上的几种不同样式的工具提示。

清单6.使用Simpletip设置工具提示

<head>
  <script src="js/jquery-1.5.1.min.js" type="text/javascript"></script>
  <script src="js/jquery.simpletip-1.3.1.min.js" type="text/javascript"></script>
</head>
<body>
  <p>
    SimpleTip lets you add <a id="simpleTip1">simple tooltips</a>, 
    including <a id="simpleTip2">more advanced</a> tooltips or even 
    <span id="simpleTip3">tooltips with effects</span> with a minimum of fuss.
  </p>

  <div id="simpleTip2Content" style="display: none;">
    <div class="ui-state-highlight ui-corner-all" style="padding: 5px;">
      <b>Fancy</b> content can be defined in a separate div.
    </div>
  </div>
</body>

in JavaScript code:
$(document).ready(function() {
  $('#simpleTip1').simpletip({
      content: 'A basic tooltip.',
      fixed: false
  });

  $('#simpleTip2').simpletip({
      content: $('#simpleTip2Content').html(),
      fixed: true,
      position: ['100', '0']
  });

  $('#simpleTip3').simpletip({
    content: 'Some content to animate',
    hideEffect: 'slide',
    showEffect: 'custom',
    showCustom: function() {
      $(this).css({
        display: 'block',
        fontSize: '0.3em',
        color: '#0000ff',
        backgroundColor: '#ffffff'
      });
      $(this).animate({
        color: '#ff0000',
        fontSize: '1em'
      }, 400);
    }
  });
});

结论

使用本文中描述的工具，您可以快速创建Web应用程序的可视组件，而使您可以自由地专注于站点中的实际功能。您仍然需要仔细考虑自然的页面流程以及您在应用程序中编写的每个页面的可用性，并且jQuery UI和这些插件并不会消除对仔细的页面设计的需求。但是，它们确实加快了开发速度，并使实施更加容易。有关完整的网页，请参见“ 下载”部分，其中包括所有讨论的示例代码。欢迎您使用它作为您自己的项目的起点。

翻译自: https://www.ibm.com/developerworks/web/library/wa-jquerywebapps/index.html