自製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


Posted by

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)

橫式廣告