通過標(biāo)準(zhǔn)的ASP.NET控件來使用jQuery UI
jQuery UI 提供了強(qiáng)大的前端功能,包括基于腳本和樣式表的日歷,拖放等等非??岬奶匦裕?,這些都是基于 javascript 編程的,對(duì)于不太屬性這門語言的程序員來說,掌握 jQuery UI 還是有一定難度的。
今天,我要向大家介紹一個(gè)標(biāo)準(zhǔn)的 ASP.NET 控件庫 JuiceUI ,從這個(gè)地址 http://www.juiceui.com/ 你就可以下載到。
JuiceUI 是開源的 WebForms 控件集,你可以簡(jiǎn)單地在 WebForm 項(xiàng)目中使用 jQuery UI 組件?,F(xiàn)在,你也可以在 ASP.NET 項(xiàng)目中輕易地使用流行的 JavaScript 界面庫。
比如說,你希望在頁面中實(shí)現(xiàn)一個(gè)彈出式的日歷選擇器,下面的代碼就可以做到。
- <asp:TextBox runat="server" ID="_Default" />
- <Juice:Datepicker runat="server" TargetControlID="_Default" />
拖個(gè)控件就可以了!
注意:必須先增加對(duì)于 ScriptManager 的使用。
- <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="JuiceUI_1.WebForm1" %>
- <!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">
- <head runat="server">
- <title></title>
- </head>
- <body>
- <form id="form1" runat="server">
- <div>
- <asp:ScriptManager ID="ScriptManager1" runat="server">
- </asp:ScriptManager>
- <asp:TextBox runat="server" ID="_Default" />
- <juice:Datepicker runat="server" TargetControlID="_Default" />
- </div>
- </form>
- </body>
- </html>
甚至還提供了如下的控制:
- page up/down - 上月/次月
- ctrl+page up/down - 上年/次年
- ctrl+home - current month or open when closed
- ctrl+left/right - 昨天/明天
- ctrl+up/down -上周/次周
- enter - accept the selected date
- ctrl+end - close and erase the date
- escape - close the datepicker without selection
可以從工具箱中直接拖過來。
什么?你希望在代碼中有更多的控制,沒有問題!你有大量的屬性可以用來進(jìn)行設(shè)置,比如 DateFormat 就可以設(shè)置日期的格式。
到這里下載吧!http://nuget.org/packages/JuiceUI
如果你已經(jīng)安裝了 NuGet, 直接使用這個(gè)命令就可以為你的項(xiàng)目增加這個(gè)支持。
Install-Package JuiceUI
注意:這個(gè)庫基于 jQuery 和 jQuery UI , 下面是其使用的版本:
jQuery 1.7.1
jQuery.UI.Combined 1.8.17
安裝之后,所有需要的文件都已經(jīng)在你的項(xiàng)目中了,包括 jQuery。
包括腳本
在你的項(xiàng)目文件夾中,包括所有的文件。
原文鏈接:http://www.cnblogs.com/haogj/archive/2012/02/29/2372757.html
【編輯推薦】