领先:使用jQuery生成丰富用户界面MicrosoftLearn

请升级到MicrosoftEdge以使用最新的功能、安全更新和技术支持。

领先

使用jQuery生成丰富用户界面

DinoEsposito

内容

jQueryUI库示例方案准备一个选项卡式的窗格正在准备对话框填充对话框显示前的初始化过帐到该控制器的数据升级Web

在对话框是图形用户界面的一个基本元素。您或许知道它可以模式或无模式。如果它存在进一步防止与该应用程序的交互，直到用户解决问题对话框中的，则模式。如果在用户只需关闭对话框中，然后会进一步的操作，可能会触发由对话框。

在Windows开发对话框是一常见的种方式构建用户对应用程序交互的。特别，对话框通常用于向下钻取到一些显示项的内容或编辑内容。许多Windows应用程序中的常见模式要求单击以编辑某些内容用户，，应用程序显示一个模式对话框，使用您输入更新的数据输入字段。

此模式从未常见Web应用程序中。浏览器必须始终，支持弹出窗口，但功能上讲它们不完全与Windows对话框相同。弹出式窗口是只是一个子Web浏览器窗口缺少某些窗口功能，如地址栏或工具栏。窗口显示非常根据显示其他内容的Web页。但是，从弹出式窗口发布到服务器的数据从未便于的原因。将添加到这弹出窗口阻止程序通常在弹出窗口阻止打开的用户的计算机上运行。因此，如果需要在您的Web应用程序的对话框，弹出窗口不是答案。

如许多其他库和框架，jQuery库不会使用浏览器的弹出窗口实现的对话框。相反，jQuery依赖脚本代码，以弹出文档对象模型(DOM)的片段，并在用户确认内容或中止操作在执行时关闭它。因为显示的内容是当前页面的DOM的一部分，有回发时没有出现问题，并且可以更是重要实现AJAX功能。

jQueryUI库

jQueryUI库包含中列出的组件图1和图2.

交互是实质上是可应用于一换行组中选择的DOM元素的一个方面。交互代表跨剪切行为的并且被设计为使目标元素更具交互性。是例如通过将与Draggable和可调整大小的交互的对话框Widget，您可以构建一个可以被移动并调整其尺寸在将类似于Windows的对话框。

如名称的建议小部件将是代表用户界面组件选项卡或对话框，可以在页中使用的单个组件。

现在，不进一步ado让我们查看合并选项卡和对话框的示例。我将使用ASP.NETMVC示例应用程序。虽然ASP.NETMVC框架附带核心jQuery库，还有jQuery和ASP.NETMVC之间没有特殊依赖性。您可以获得相同的性能和功能jQuery使用传统的ASP.NETWeb窗体。

示例方案

让我们设想带有客户的列表的示例页面。每个列出的客户所关联的按钮，通过该用户可以删除或编辑客户信息（参见图3）。

图3若要编辑位置中的客户列表

其理念是用户单击编辑按钮在位置进行更改。但是，图3中的表不会作为在就地编辑模式下DataGrid和GridView像传统的服务器控件中交换包含文本框的标签。在这种情况下一个对话框将弹出显示预填充窗体可以编辑并保存。

为简单起见，所有UI元素都塞到示例ASP.NETMVC应用程序的主页页。若要编辑此页的标记，您需要求助于关联的视图文件。默认，情况是Index.aspx位于views\home。

图4主页代码视图

客户选项卡窗格通常基于由uc_ListCustomersMVC用户控件的内容。用户控件接收在父视图中显示的数据。要显示的数据引用由ViewData.model表达式，包含列表对象。不必说在此上下文中客户是在使用ADO.NET实体框架、LINQtoSQL，或其他任何创建您的域模型中定义的实体类。控制器操作负责主页页面位于负责的检索此数据，并传递其，如下所示：

publicclassuc_ListCustomer:ViewUserControl>{voidPage_Load(objectsender,EventArgse){if(!IsPostBack){GridView1.DataSource=ViewData.Model;GridView1.DataBind();}}voidGridView1_RowDataBound(objectsender,GridViewRowEventArgse){//Furthercustomizethegridhereifrequired}}如果您使用数据绑定服务器控件生成标记，然后您在数据绑定到它在Page_Load中。图6显示了在标记为包含指向JavaScript函数使用jQuery网格。

图6网格标记

准备一个选项卡式的窗格

若要创建选项卡式内容窗格，换行集中的任何元素上调用tabs()方法。jQueryUI库中的所有小部件需要要用作模板以及一些可选配置的DOM子树。通常，您提供默认页加载和等待应用更高版本基于上下文的其他设置的配置设置。下面的代码演示如何准备一个选项卡式窗格。

$(document).ready(function(){$("#AppConsole>ul").tabs();});选项卡方法才有效在所有的

子元素的元素为AppConsoleID。在
中的每个
• 成为一个选项卡。在
• 必须然后链接到一个
  提供内容的页面中。

  该选项卡方法具有指示的选项卡将被禁用怎样当用户单击，并且在显示时，必须选择任一选项卡的设置。下面的代码演示如何配置选项卡禁用第三个选项卡、切换鼠标悬停上,选项卡和选项卡之间切换时使用某些动画的小组件。

  $(document).ready(function(){$("#AppConsole>ul").tabs({disabled:[2],event:'mouseover',fx:{opacity:'toggle'}});});若要成功使用页面中的选项卡Widget，您需要链接下面的脚本文件，除了核心jQuery库文件。

  选项卡方法功能一个更丰富的API，您添加，删除，或选择选项卡，然后下载动态地通过AJAX的内容。

  正在准备对话框

  对话框基于一个换行集上调用的方法了类似API，配置它在某些选项将。

  标记位置位于页中定义对话框的内容。在图4，对话框的内容插入为页调用它的DOM中的用户控件。

  以下JavaScript代码页面DOM准备好的事件处理程序中运行，创建和初始化对话框但不显示。

  $("#__dlgEditCustomer").dialog({autoOpen:false,modal:true,overlay:{opacity:0.2,background:"cyan"},width:550,height:400,position:[600,250]});如代码所示您将获得使用给定的宽度和高度显示与半透明贴在给定位置处的一个模式对话框。在autoOpen=false设置禁止显示页面加载对话框。

  一些脚本文件是使用对话框所必需的。在将非常小，您需要以下两个脚本文件：

  此外，您需要链接所必需的两个常见交互，如draggability和resizabilityJavaScript文件：

  但是，请注意，draggable和可调整大小方面可以禁用通过设置。在这种情况下不必前面的脚本文件再。

  在dialog()方法可创建动态的IFRAME并中它复制对话框模板的内容。如果内容超出最大区域，将自动显示滚动条。随后出现的对话框在右上角有标题栏和X关闭按钮。此外，以便对话框可以提供通常组合的确定/取消和是/否/取消按钮，非常类似于桌面的总体的用户体验的上下文中，可以配置底部按钮栏。图7显示了一个标准的jQuery对话框的典型样式。

  图7AjQueryDraggable和大小可调整的对话框

  蓝绿色背景导致覆盖设置对话框构造函数中定义。

  overlay:{opacity:0.2,background:"cyan"}对话框放在页中的每个其他元素的顶部，并且图层分开页面中其他可单击的元素对话框。对话框之外的任何用户单击将只是丢失。可以通过在面上拖动控点调整对话框。

  填充对话框

  已提到，对话框是主要DOM子树。随后，要显示用户的输入窗体文本框、下拉列表和复选框，您首先创建HTML窗体和基于表的布局，可以输入的字段提供描述性标签。图8显示了一个摘要对话框的内部标记。

  图8标记对话框

  <%Html.BeginForm("UpdateCustomer","Home");%>

  :

  ID
  Company
  Country	<%=Html.DropDownList("Country",newSelectList(ViewData.Model)%>

  <%Html.EndForm();%>可以使用ASP.NETMVC助手生成

  标记的标记。BeginForm帮助器使用至少两个参数，将触发控制器措施提交和控制器名称。它是不说是否您希望一个对话框，向服务器，然后需要有对话框中的HTML表单。

  表单包含您喜欢的方法和功能和您喜欢的样式的布局的输入的字段。定义对话框的布局时,您不要注意多要显示实际数据。在此时放入对话框，只能显式数据是常量的数据。例如，每个客户一个国家/地区名称中有其记录因此您可能希望显示的所有国家/地区的下拉列表。在此示例中，通过，我使得有点更严格。您可以更改客户的国家，但是不能指定一个新的国家，其中有任何其他客户。这意味着必须将客户列表传递到用户控件的父级。

  对话框框用户控件的父级是index.aspx视图。如前面所看到，此视图将从该控制器操作接收客户的列表。如果您希望选取国家/地区列表中的用户，则需要通过提供国家一起列表客户的列表。index.aspx视图类如图9所示。

  图9index.aspx视图类

  publicpartialclassIndex:ViewPage{}publicclassHomeIndexViewData{publicHomeIndexViewData(){Customers=newList();Countries=newList();}publicListCustomers{get;set;}publicListCountries{get;set;}}在HomeIndexViewData是一个自定义的类，以及传递到index.aspx视图的所有信息都组合在一起的。在neater比它的代码中使用的特殊类结果正在使用非类型化ViewData通用容器。

  对话框将收到国家（地区）通过下面的代码的列表：

  <%Html.RenderPartial("uc_dlgEditCustomer",ViewData.Model.Countries);%>若要创建下拉列表，可以使用内置的DropDownList帮助器。在这种情况下但，您必须包装可枚举对象与项目列表到视图特定SelectList对象。

  <%=Html.DropDownList("Country",newSelectList(ViewData.Model)%>图10显示了最终的对话框。

  图10中的对话框

  显示前的初始化

  保持为的是解释如何在可以适应客户数据一个对话框。可以看到在图6中，获取会为用户单击网格的同一行中的图像按钮上显示对话框。图像按钮的onclick事件链接到fnEditCustomerJavaScript函数。此函数负责最终初始化并显示对话框（见图11）。

  图11JavaScript编辑客户

  $("#__dlgEditCustomerinput[@id=CompanyName]").val(custName);行显示如下：选择一个名为的_dlgEditCustomerID属性等于"公司名称"的元素中的所有输入的字段，并将其值设置为指定的内容。不必说在此上下文中使用是jQuery的任意的。使用MicrosoftAJAX客户端库中的功能强化的传统DOM代码也工作。

  jQuery选择器的功能也很明显时可不事先知道索引时选择一个下拉列表中的元素。时开始编辑客户记录您知道；她所在的国家，但您必须在您手中的全部是字符串。DOM级别SELECT元素中进行选择您需要指定索引。如何可以匹配，说，将字符串"意大利"到相应的索引列表中？可以自己编写一个循环，并找到一个匹配的元素，或者您可以依靠jQuery选择器：

  $("#__dlgEditCustomerselect>option[@text="+custCountry+"]").attr("selected","selected");该表达式显示如下：在元素名为_dlgEditCustomer内,查找所有OPTION元素SELECT其中Text属性等于指定变量的值的子。对于任何匹配的元素，您设置所选的属性。

  最后，在完成所有初始化工作后您显示对话框。调用"打开"命令字符串对话框方法就足够了。

  过帐到该控制器的数据

  最后一步过帐数据到Web服务器和精确到指定的控制器方法UpdateCustomer主控制器上的。

  在ASP.NETMVC，您可能希望每个重要的URL和完全代表目标资源。若要更新客户FRANS，应与请求正文中详细信息时使用一些代码使用诸如住宅/UpdateCustomer/FRANS而非一个公共/家庭UpdateCustomerURLURL。这意味着您应该更新对话框中的窗体的操作URL每当您弹出该对话框。以下是如何执行该操作：

  $("#__dlgEditCustomerform").attr("action","/home/updatecustomer/"+custID);正如您所看到jQuery选择器取得回再次。您选择窗体在名为__dlgEditCustomer元素内的，并为该窗体更改action属性到选择的URL。图12显示刷新数据是真正提交到Web服务器和由右控制器方法处理。（查看图12和图7以发现任何差异)。

  图12发布控制器方法更新的数据对话框

  升级Web

  如果在Web上需要更多的交互，则需要效果、Widgets，和方面；以及所有严格编写JavaScript。jQuery库已变得对于所有世界各地Web开发人员非常流行的选择，并Microsoft本身提供最新版本1.3与刚发布ASP.NETMVC框架。

  THE END