jQueryUI

当前位置:首页>jQuery>jQueryUI>Juice UI: 整合了jQuery UI的开源ASP.NET Web控件

Juice UI: 整合了jQuery UI的开源ASP.NET Web控件

时间:2015-07-14 17:01来源:网络整理 作者:KKWL 点击:
前言 这篇文章的原文来自Jon Galloway,想看原文的请猛戳链接。第一次接触这个Juice UI是看到同事分享的邮件,当时只是粗略看看,不过感觉把jQuery UI整合到ASP.NET Web控件里去确实是个不

前言 

这篇文章的原文来自Jon Galloway,想看原文的请猛戳链接。第一次接触这个Juice UI是看到同事分享的邮件,当时只是粗略看看,不过感觉把jQuery UI整合到ASP.NET Web控件里去确实是个不错的主意。今天偶然在网上看到了这篇文章,就动手把它翻译过来,和大家分享。以下是译文:

 

今天早上的MVP峰会上,Scott Hunter刚刚从appendTo网站新发布了一个开源项目,名字叫Juice UI。Juice UI是一个Web窗体控件的集合,并整合了jQuery UI。你可以通过添加JuiceUI NuGet package到你自己的应用中,立即就可以使用它。同时源码是提供下载的(go nuts with the source), 他的版权协议是基于MIT和GPL的。

 

 

Juice UI,能做什么?

jQuery UI 是一个构建在jQuery之上的UI库。它为平常的场景提供了非常多且强大的部件,例如日期选择期,对话框和选项卡等等;并且一些顶尖的js开发者(some of the sharpest Javascript developers in the field)参与开发提供了坚实的基础。虽然你总是可以利用一些使用了jQuery和jQuery UI的库,但是全新的Juice UI控件可以让这些工作更简单。

例如:

执行这段代码,就可以得到:

 

2012-02-28 09h16_03

 

 

组件和行为

Juice UI 发布的时候就已经包括了14个部件或行为。如果你想查看全部控件列表的话,请点击, 并且提供互动例子让我们更深入了解控件。

 

2012-02-28 09h17_29

 

下面也列出了所有控件,点击可直接转到相应文档:

  • Accordion

  • Autocomplete

  • Button

  • Datepicker

  • Dialog

  • Draggable

  • Droppable

  • Position

  • Progress Bar

  • Resizable

  • Selectable

  • Slider

  • Sortable

  • Tabs

 

实战
  • 添加JuiceUI NuGet package

打开VS2010,创建项目前请确保VS2010已安装了NuGet插件。创建一个ASP.NET 4 Web Forms项目。右击项目中的References文件夹,选择Manage NuGet Packages..., 然后找到 "juiceui",点击安装。

 

2012-02-28 08h10_11

 

 

  • JuiceUI 的名字空间

通过NuGet package添加JuiceUI时,NuGet会自动的把Juice UI的名字空间写入到你的web.config文件里, 比如:

如果确实需要Juice UI名字空间的话,通常我会移除上面这段config,在页面中使用<@Import Namespace="JuiceUI" />指令来添加名字空间。

 

使用Juice UI控件

首先,你需要一个<asp:ScriptManager> - 把它添加到一个页面上或者你site的Master页面上。

添加完成后,你就可以使用控件了。这些都是扩展控件,所以你需要使用TargetControlID属性来指出哪个Web窗体控件将扩展Juice UI的行为。这儿有一个精简了的例子,将DatePicker行为与一个TextBox挂钩:

另外我把一个可拖拽(Draggable )的行为指向一个Panel:

2: Hi. You can drag me around.

需要注意的是,这只是非常简单的例子并且没有CSS。在Juice UI源码里有很多更复杂的Juice UI样例。

 

运行这个页面,我们将会看见我们所期待的:一个拥有日期选择器的textbox和一个可以拖拽的panel。

 

2012-02-28 10h34_32

 

下面是这个页面的源代码:

1: <%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" 2: CodeBehind="Default.aspx.cs" Inherits="Juice_Sample._Default" %> 6:   8: 11: 13: Hi. You can drag me around. 16:

如果你有兴趣的话,在浏览器中查看网页的源代码,你会发现web控件和JuiceUI行为已经整合了,使用的是HTML5的data-属性:

7: Hi. You can drag me around.

似乎很熟悉...

确实,Juice UI用起来非常像Ajax Control Toolkit,但它的核心是jQuery UI。从另一方面说,它是为所有jQuery UI里的部件(widgets)和效果(effects)创建了Web窗体扩展和脚本控制。

 

更多...

想要寻找更多关于Juice UI的资料?最好的地方是Juice UI site,里面有提供互动的例子和文档。

需要源代码的,可以从GitHub repository下载,里面包含了一个样例项目。

最后,特别推荐的是StackOverflow (using the juiceui tag)和ASP.NET jQuery forum,经常逛逛可以获得不少帮助。

 

后记

------分隔线----------------------------