自製jQuery Plugin - 9. jquery.urlparams
1. 功能: 取得網頁URL的參數
2. 風格: 沒有畫面
3. 依賴: 無
4. 用途: 取得網頁參數來做後續程式開發
5. 函式:
5.1 $.url.params: 參數(name),取得指定name的參數值
5.2 $.url.getAllParams: 參數(無),取得所有參數值
6. 範例:
JQuery:
<script type="text/javascript" src="jquery-1.5.1.min.js"></script> <script type="text/javascript" src="jquery.urlparams.js"></script> <script type="text/javascript"> $(function () { var paramList = $.url.getAllParams(); var data = ""; for (key in paramList) { data += key + "=" + paramList[key] + "<br/>"; } $('#allParams').html(data); $('#getParam').click(function () { $('#result').html($.url.params($('#name').val())); }); }); </script>
7. 後續改善: 無,除非有bug
自製jQuery Plugin - 8. jquery.ui.themeswitcher
1. 功能: 切換網頁jquery ui theme,由官方版本調整而來.
2. 風格: jQuery UI所有Theme
3. 依賴: jQuery.cookie.js
4. 用途: 切換jQuery UI Theme
5. 函式: themeswitch - 待補完
6. 範例:
<script type="text/javascript" src="jquery-1.5.1.min.js"></script> <script type="text/javascript" src="jquery.cookie.js"></script> <script type="text/javascript" src="jquery.ui.themeswitcher.js"></script> <script type="text/javascript"> $(function () { $('#changeTheme').themeswitcher({ webrootpath: '../' });
// when theme location= ../css/theme , webrootpath=../ }); </script>
7. 後續改善: 還在評估自動改變page的ifarme theme是否有必要性.
自製jQuery Plugin - 6. popPanel
1. 功能: 於指定物件位置開啟小視窗
2. 風格: jQuery UI CSS Framework
3. 依賴:jquery.random.js,jquery.GUID.js,jquery.getPostion.js
4. 用途: 在觸發事件元件開啟小視窗，在自行設計挑選資料(如:日期、時間、人員),在此僅提供空白div提供再加工.
5. 函式:
5.1 popPanel,參數{
width:指定視窗寬度,預設300
height:指定視窗高度,預設400
offset{x,y}:指定開啟時與該物件位移量{x,y}座標,預設{10,10}
class:popPanel額外套用class,預設null
title: popPanel標題,預設Pop Panel Window
show:是否顯示,預設true(開啟)
smartLocation:啟動自動偵測超過目前視窗時,往左或上顯示,預設true(開啟)
closehide:關閉是否僅隱藏,預設true(開啟),否則關閉則刪除
center:是否置中
url:內嵌iframe之url
urlclass:iframe class
resizeable:是否允許縮放視窗
postback:回傳資料呼叫之function
onclose:關閉時,呼叫之function
}
5.2 popPanelReturnData(data): 傳遞參數給postback method.
6. 範例:
JQuery:
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script> <script type="text/javascript" src="js/jquery.random.js"></script> <script type="text/javascript" src="js/jquery.GUID.js"></script> <script type="text/javascript" src="js/jquery.getPosition.js"></script> <script type="text/javascript" src="js/jquery.ui.getPosition.js"></script> <script type="text/javascript" src="js/jquery.ui.popPanel.js"></script> <script type="text/javascript"> $(function () { $('#button').click(function () { var panel = $(this).popPanel({'closehide':false,'resizeable':false}); }); }); </script>
7. 後續改善: 無,除非有bug
自製jQuery Plugin - 5. getPosition
1. 功能:取得元件絕對位置(x,y).
2. 風格:沒有畫面.
3. 依賴:無.
4. 用途:便於在觸發事件元件開啟小視窗挑選(如:日期、時間、人員)資料.
5. 函式: getPosition,參數{無}.
6. 範例:
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script> <script type="text/javascript" src="js/jquery.ui.getPosition.js"></script> <script type="text/javascript"> $(function () { $('#button1').click(function(){ var position=$(this).getPosition(); alert(position.x+','+position.y); }); $('#div1').click(function(){ var position=$(this).getPosition(); alert(position.x+','+position.y); }); }); </script>
7. 後續改善: 無,除非有bug.
自製jQuery Plugin - 4. GUID
1. 功能: 產生GUID..
2. 風格: 沒有畫面.
3. 依賴: jquery.random.js
4. 用途: 產生GUID.
5. 函式:
$(this).GUID()
6. 範例:
JQuery:
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script> <script type="text/javascript" src="js/jquery.random.js"></script> <script type="text/javascript" src="js/jquery.GUID.js"></script> <script type="text/javascript"> $(function () { $('#RunGuid').click(function(){ $('#ResultGuid').val($(this).GUID()); }); }); </script>
7. 後續改善: 無
自製jQuery Plugin - 3. random
1. 功能: 取得整數亂數、字串型態整數亂數、十六進制亂數
2. 風格: 無
3. 依賴: 無
4. 用途: 產生隨機整數、亂數取名或產生GUID使用。
5. 函式:
5.1 random: 取得亂數整數，參數：length -最大位數，1<length<9，預設5.
5.2 randomString: 取得亂數字串，參數{length - 最大位數，不足自動補0，1<length<9，預設5}.
5.3 randomHex: 取得16進制亂數，參數{length - 最大位數，不足自動補0，l1<length<9，預設5}.
6. 範例:
<script src="http://code.jquery.com/jquery-1.6.2.min.js" type="text/javascript"> <script type="text/javascript" src="js/jquery.random.js"></script> <script type="text/javascript"> $(function () { $('.RunRandom').click(function () { $('.ResultRandom').val($(this).random()); }); $('.RunRandomString').click(function () { $('.ResultRandom').val($(this).randomString()); }); $('.RunRandomHex').click(function () { $('.ResultRandom').val($(this).randomHex()); }); }); </script>
7. 後續改善: 無
自製jQuery Plugin - 1. showItem
* 用途: 隱藏實際value,改由該元件指定屬性或固定值顯示.
* 注意事項: 於IE以外瀏覽器(Firefox/Chrome/Safari等),執行showitem之input元件須先定義width/height,否則showitm元件無法套用原始寬高.
* ChangelLog:
* Version 1.0.0 (06/29/2011)
* 初版
* Version 1.1.0 (08/26/2011)
* 新增參數 - 提供runtime變更display/value變更功能
* 新增事件 - 提供onclick事件,回傳showitem提供更多的應用.
* Version 1.2.0 (08/29/2011)
* 新增參數 - 新增remove參數,提供移除showitem.
* remove - $(this).showitem('remove');
* 變更參數 - 顯示與保存值由原本display/value調整為label/value
* 變更參數 - 提供runtime變更label/value與同時變更3種參數：
* setlabel - $(this).showitem('setlabel','new display label');
* setvalue - $(this).showitem('setvalue','new value');
* setlabelvalue - $(this).showitem('setlabelvalue','new display label','new value');
* Version 1.3.0 (09/16/2011)
* 新增參數 - 新增tooltipText參數,提供mousemover時顯示提示.
'class': 指定顯示item的class,預設不指定(null).
'usejQueryTheme': 是否套用jQuery UI theme,套用則預設採用ui-state-default風格,並於mouseover/mousedown時,分別套用ui-state-hover/ui-state-active style.
'labelBy': 顯示item依據指定屬性值做為顯示內容,預設參考label屬性.
'labelText': 直接指定固定值為顯示內容,預設null表示不使用,顯示內容於null時改參考labelBy參數.
'height': 設定顯示item的高度,預設null表示等同原本顯示項目高度.
'width': 設定顯示item的寬度,預設null表示等同原本顯示項目寬度.
'disabled': 關閉顯示item的onclick事件.
'tooltipText': 指定顯示item的title屬性(提示功能)內容,預設為不指定任何提示.
remove - 移除showitem元件,恢復顯示原本元件.
// create showitem $('.showitem').showitem(); // remove showitem $('.showitem').showitem('remove');
setlabel - 設定showitem元件顯示內容.
// create showitem $('.showitem').showitem(); // modify label $('.showitem').showitem('setlabel','newLabelText');
setvalue - 設定showitem元件實際儲存內容.
// create showitem $('.showitem').showitem(); // modify value $('.showitem').showitem('setvalue','newValue');
setlabelvalue - 同時設定showitem元件顯示/儲存內容.
// create showitem $('.showitem').showitem(); // modify label/value $('.showitem').showitem('setlabelvalue','newlabel','newValue');
onclick - showitem被滑鼠click時觸發,當disabled=true狀態時不觸發:
$(this).showitem({ 'onclick':function(){ } });
Example 1: 將input隱藏後,顯示label屬性值,傳回Server端時,仍保留原本value
HTML |
<input id="example1" value="081520" label="王志仁" /> |
Java Script |
$('#example1').showitem(); |
Demo |
Example 2: 指定顯示文字參考該元件特定屬性
HTML |
<input id="example2" value="081520" title="王志仁" /> |
Java Script |
$('#example2').showitem({'labelBy':'title'}); |
Demo |
Example 3: showitem支援onclick事件,並允許變更lable/value隨時變更內容
HTML |
<input id="example3" value="value" label="click it" /> |
Java Script |
var example3ClickCount = 0; $('#example2').showitem({ 'onclick': function () { example3ClickCount++; $(this).showitem('setlabel', 'clicked' + example3ClickCount); } }); |
Demo |
Example 4: showitem使用jQuery UI Theme
HTML |
<input id="example4" value="value" label="click it" /> |
Java Script |
$('#example4').showitem({ 'usejQueryTheme':true }); |
Demo |
Example 5: showitem disabled: 停止onclick事件,當使用jQuery UI Theme時,套用disabled風格
HTML |
<input id="example5" value="value" label="showitem disabled" /> |
Java Script |
$('#example5').showitem({ 'usejQueryTheme':true, 'disabled':true }); |
Demo |
Example 6: showitem 直接指定寬高
HTML |
<input id="example6" value="value" label="showitem disabled" /> |
Java Script |
$('#example6').showitem({ 'width':"100%" 'height':"30px" }); |
Demo |
Example 7: showitem 指定固定顯示值&指定Class
HTML |
<input id="example7" value="value" /> |
Java Script |
<style> .class-background-red:hover { background-color:#FF3333; } .class-background-red{ background-color:red; } </style> <script type='text/javascript'> $('#example7').showitem({ 'labelText':'指定固定內容', 'class':'class-background-red' }); </script> |
Demo |
訂閱：
文章 (Atom)