首先在jqueryUI官網上根據你的需要下載適合你系統主題的樣式,jqueryUI主題:下載地址。-->下載后的文件;jquery-ui-1.10.3.custom文件夾;不同的主題的區別在于它們引用的css不同。默認下載的樣式如下:其它樣式比如我下載的樣式。下載的jqueryUI中除了css文件夾不同,其它文件均相同。-->頁面中的使用datePicker的步驟。(1)引入jquery-ui-1.10.3.custom.min.css樣式文件。(2)引入jquery-1.9.1.js和jquery-ui-1.10.3.custom.min.js腳本文件;注意:先引入jquery文件。" />
1.jqueryUI的datepicker的使用
-->首先在jqueryUI官網上根據你的需要下載適合你系統主題的樣式,jqueryUI主題:下載地址;
-->下載后的文件
jquery-ui-1.10.3.custom文件夾;不同的主題的區別在于它們引用的css不同
默認下載的樣式如下:
其它樣式比如我下載的樣式:
下載的jqueryUI中除了css文件夾不同,其它文件均相同
-->頁面中的使用datePicker的步驟
(1)引入jquery-ui-1.10.3.custom.min.css樣式文件
(2)引入jquery-1.9.1.js和jquery-ui-1.10.3.custom.min.js腳本文件;注意:先引入jquery文件
(3)我的需求是制作一個起始時間和一個終止時間的選擇。
代碼如下:
(1)$("#ui-datepicker-div").css("font-size", "12px"); 用來改變日期控件的大小
(2)dateFormat: "yy-mm-dd",改變日期格式(3)日期控件為英文版本,加入一段腳本將其漢化
(4)對于一些datepicker的屬性和方法的詳細使用,可以參考其API文檔,上面講的很詳細
-->再分享一招
$("[id$=txtASN]")的使用
定義好的asp.net的textbox控件id為txtASN,但是$("#txtASN")卻獲取不到textbox的dom元素了,原因查看源代碼后發現是其控件ID發生了變化,如果控件放在了panel中或者母版中,生成的html控件input ID就會發生變化,如pnlBaseInfo_txtASN
解決辦法: $("[id$=txtASN]"),其意義就是在于獲得id以txtASN結尾的dom元素-->完成效果
2.解決與asp.net中的UpdatePanel聯合使用時的失效問題
問題:運行之后,點擊"查詢",頁面局部刷新,發現日歷選擇器不出來了
DatePicker在asp.net的UpdatePanel中異步回傳后失效的問題
在頁面第一次加載時可以正常顯示DatePicker控件,但在點擊查詢后,由于異步回傳,DatePicker就失效了。
-->分析UpdatePanel
UpdatePanel在應用中主要用于局部刷新,避免整個頁面的Postback。
UpdatePanel實現局部刷新的核心在于MicrosoftAjaxWebForm.js文件,它的局部刷新過程就是將頁面提交到服務端(包 含ViewState),執行服務端代碼后異步將在UpdatePanel內的HTML進行重新呈現。-->分析jQuery
因為在UpdatePanel局部刷新之后,其中的文本框元素被重寫,而此時整個DOM樹并沒有重新加載,所以jQuery的ready事件并沒有觸 發,所以文本框元素就失去了原有的特效。
-->解決方法
將初始化DatePicker的代碼放在Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(function(evt, args) {});
大家還可以參考以下文章進行學習:
jquery UI Datepicker時間控件的使用方法(基礎版)
jquery UI Datepicker時間控件的使用方法(加強版)
jquery UI Datepicker時間控件的使用方法(終結版)
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com