被遺忘的瞇瞇: jQuery UI

顯示具有 jQuery UI 標籤的文章。顯示所有文章

利用jQuery保留C# postback event

// cancel event & store event
function clickFunction(){
    // 取消Event
    window.event.returnValue = false;
    window.event.cancelBubble = true;
    // 儲存Event
    var event = window.event;
    var eventElement = $(window.event.srcElement);
    // restore event & continue event
    function continueEvent(){
        // 恢復Event
        $('#__EVENTTARGET').val(eventElement.attr('name'));
        $('#__EVENTARGUMENT').val('');
        // 執行Postback
        document.forms[0].submit();
    }
}

網頁圖庫分享 - 蠻多實用的圖庫網站

Icon Finder 可搜尋，有套包：http://www.iconfinder.com/

DryIcons 套包：http://dryicons.com/

Royalty Free Icons & Clipart Stock Images 套包：http://icons.mysitemyway.com/

Iconarchive 有分類：http://www.iconarchive.com/

Free Icon Web 有分類有套包：http://www.freeiconsweb.com/

Icones Pro 可搜尋：http://icones.pro/

Iconizer 可搜尋：http://iconizer.net/

Ajax圖片產生器：http://ajaxload.info/

Ajax現成圖片挑選：http://mentalized.net/activity-indicators/

Issue: jQuery UI DatePicker with jQuery UI CSS Framework bug(?)

jQuery UI DatePicker在使用CSS Framework的iframe下,預設會有一個div並未正確隱藏,造成mouseover事件時,DatePicker發生Exception.

1. 發生錯誤訊息的網頁

2. Script Exception

3. Trace code,instActive undefined.

解決方式:

將jQuery.ui.datepicker.js 112行:this.dpDiv = bindHover($('

'));

改為

this.dpDiv = bindHover($('

').hide());

預設隱藏則正常.

Framework Classes

Layout Helper

.ui-helper-hidden: 隱藏元素,Style{display:none}.

.ui-helper-hidden-accessible: 把元素的絕對位置設到無法閱讀處.

.ui-helper-reset: 重設元素的Style{ padding, margins, text-decoration, list-style }.

.ui-helper-clearfix: 設定給浮動元素之Parent元素,設定為inline-block

.ui-helper-zfix: 修正iframe元件覆蓋問題.

Widget Containers

.ui-widget: 定義元素為元件容器,如: Form、Window.

.ui-widget-header: 定義元素為元件容器標題.

.ui-widget-content: 定義元素為元件容器內容框.

Interaction States

.ui-state-default: 設定button處於一般狀態風格.

.ui-state-hover: 設定button處於Mouse Hover狀態風格.

.ui-state-focus: 設定button處於Foucs狀態風格.

.ui-state-active: 設定button處於Click/Active瞬間的狀態風格.

Interaction Cues

.ui-state-highlight: 設定元素處於Highlight狀態風格.

.ui-state-error: 設定元素處於錯誤狀態風格.

.ui-state-error-text: 設定錯誤文字顯示風格.

.ui-state-disabled: 設定元素處於disabled狀態風格.

.ui-priority-primary: 設定元素為首選button之風格.

.ui-priority-secondary: 設定元素為第二優先button之風格.

Icons - States and images

.ui-icon: 設定此元素為icon,實際圖形需依賴ui-icon-xxxx(173個圖形)相關class決定套用之圖形,

.ui-icon-xxxx: 參考ThemeRoller最末端圖形hint之class名稱，決定套用之圖形.

Misc Visuals - Corner Radius helpers

.ui-corner-tl: 元素之左上角為圓邊.

.ui-corner-tr: 元素之右上角為圓邊.

.ui-corner-bl: 元素之左下角為圓邊.

.ui-corner-br: 元素之右上角為圓邊.

.ui-corner-top: 元素之上方兩角為圓邊.

.ui-corner-bottom: 元素之下方兩角為圓邊.

.ui-corner-right: 元素之右方兩角為圓邊.

.ui-corner-left: 元素之左方兩角為圓邊.

.ui-corner-all: 元素之四角為圓邊.

Misc Visuals - Overlay & Shadow

.ui-widget-overlay: 定義該元素為全螢幕遮罩風格.

.ui-widget-shadow: 定義該元素具備陰影風格.

詳細位置 - sheauren的jquery紀錄

jQuery UI CSS Framework

jQuery UI CSS Framework是一套擴充性很強的CSS Styles, jQuery UI Release的元件都是利用這個CSS Framework來設計. 在此規範下,可以利用jQuery UI ThemeRoller網頁設計自己喜歡的配色風格,並且允許利用ThemeSwitcher技術在網頁上動態切換樣板.

優點：

直接套用jQuery UI既有26種樣板與自己設計於ThemeRoller設計樣板。
網站設計時,可利用ThemeSwitcher提供線上切換樣板功能，樣板預設直接引用官方網站,連Copy CSS/Img/JS回來都不需要。

缺點：

Core CSS提供數量不多(Layout 5個、Widget3個、Interaction 10個、效果11個、Icon 173個). 自訂元件時,通常要額外定義其他CSS才滿足設計
內建Icon圖示很小(16x16扣掉外框實際只有10x10),使用上不是很方便,需要在客製化

整體來看,因為jQuery UI CSS Framework提供的功能十分簡單,核心也才兩個css file,要客製化難度相對降低的情況下,學習此Framework,在需要在調整即可.

詳細位置 - sheauren的jquery紀錄

被遺忘的瞇瞇