jquery.customselect.js 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205
  1. 
  2. //select表示select本身,view表示跳出的�?�項
  3. ;(function($){
  4. $.fn.extend({
  5. //計算文字Byte數,並回傳
  6. getByteLength: function(strIN){
  7. var i, cnt=0;
  8. for (i=0; i<strIN.length; i++){
  9. if (escape(strIN.charAt(i)).length >= 4) cnt+=2;
  10. else cnt++;
  11. }
  12. return cnt;
  13. }
  14. });
  15. $.fn.extend({
  16. //檢查文字的Byte數,超�?�limit指定的個數的話,就回傳true 和 未超�?�之�?的文字index
  17. getIndexByByte: function(strIN,limit){
  18. var i, cnt=0;
  19. for (i=0; i<strIN.length; i++){
  20. if (escape(strIN.charAt(i)).length >= 4) cnt+=2;
  21. else cnt++;
  22. if(cnt>limit)
  23. {
  24. return [true,i];
  25. }
  26. }
  27. return false;
  28. }
  29. });
  30. $.fn.extend({
  31. finalselect: function(options) {
  32. var settings =
  33. {
  34. id:null,
  35. animalSpeed:100,
  36. selectWidth:"190px",
  37. selectImage:"image/select.png",
  38. selectText:"My friend",
  39. zIndex: 0,
  40. viewHeight:"100px",
  41. viewWidth:"300px",
  42. viewMouseoverColor:"#cfdfff",//#dcdcdc
  43. viewTop:"28px",//top,bottom
  44. viewLeft:" -1px"//left,right
  45. };
  46. if (typeof(options)!='undefined')
  47. {
  48. //將整批options的值assign給settings
  49. jQuery.extend(settings, options);
  50. }
  51. var tmp='<div id="'+settings.id+'-select" style="cursor:default;font-size:12px;z-index:'+settings.zIndex+';border: solid 0px #999; padding: 0px; width: 180px; position: relative;">'
  52. tmp+='<div id="'+settings.id+'-Text" style="background: url('+settings.selectImage+') no-repeat 0 0; width: '+settings.selectWidth+'; height: 21px; color: Black; padding: 0 0 0 0;">';
  53. tmp+='<div class="textshow" style="padding: 0px;">'+settings.selectText+'</div><div class="valueshow" style="display:none;"></div></div><div id="'+settings.id+'-selectshow" style="overflow-y:auto; overflow-x:hidden; height:'+settings.viewHeight+';width:'+settings.viewWidth+'; display:none; position: absolute; left:'+settings.viewLeft+'; top:'+settings.viewTop+'; border: solid 1px #999; background: white;"></div></div>';
  54. var _handler = function() {
  55. // 從這裡開始
  56. $(this).html(tmp);
  57. bindArrowClick();
  58. bindSelectMouseover();
  59. bindSelectMouseleave();
  60. };
  61. var bindArrowClick=function(){
  62. var tmp=$('#'+settings.id+'-Text');
  63. $("#"+settings.id+'-Text').bind("click", function(e){
  64. var obj=$('#'+settings.id+'-selectshow');
  65. if(obj.css('display')=='none')
  66. {
  67. // obj.slide();
  68. obj.slideDown(settings.animalSpeed,function(){
  69. obj.show();
  70. obj.css('overflow','auto');
  71. obj.css('overflow-x','hidden');
  72. });
  73. }
  74. else
  75. {
  76. obj.slideUp(settings.animalSpeed,function(){
  77. obj.hide();
  78. });
  79. }
  80. });
  81. };
  82. var bindItemMouseover=function(){
  83. var inx=0;
  84. while($(".selectitem",$("#"+settings.id+"-selectshow")).get(inx)!=null)
  85. {
  86. var item=$(".selectitem",$("#"+settings.id+"-selectshow")).get(inx);
  87. $(item).bind("mouseover", function(e){
  88. $(this).css('background-color',settings.viewMouseoverColor);
  89. });
  90. $(item).bind("mouseout", function(e){
  91. $(this).css('background-color','#fff');
  92. });
  93. $(item).bind("click", function(e){
  94. var tmpstr=$(".thistext",$(this)).html();
  95. var arr=$().getIndexByByte(tmpstr,30);
  96. if(arr[0]==true)
  97. tmpstr=tmpstr.substring(0,arr[1])+'...';
  98. $(".textshow",$("#"+settings.id+"-Text")).html(tmpstr);
  99. document.getElementById(settings.id+'-selectshow').style.display="none";
  100. $(".valueshow",$("#"+settings.id+"-Text")).html($(".selectvalue",$(this)).html());
  101. });
  102. inx++;
  103. }
  104. }
  105. var bindSelectMouseover=function(){
  106. $('#'+settings.id+'-Text').bind("mouseover",function(){
  107. if($.browser.msie==false)
  108. $('#'+settings.id+'-Text').css("background-position","0 -21px");
  109. });
  110. }
  111. var bindSelectMouseleave=function(){
  112. $('#'+settings.id+'-Text').bind("mouseout",function(){
  113. if($.browser.msie==false)
  114. $('#'+settings.id+'-Text').css("background-position","0 0px");
  115. });
  116. }
  117. this.setViewTop = function(top){
  118. $('#'+settings.id+'-selectshow').css('top',top+'px');
  119. }
  120. this.setViewLeft = function(left){
  121. $('#'+settings.id+'-selectshow').css('left',left+'px');
  122. }
  123. this.getLength = function(){
  124. return $('.selectitem',$('#'+settings.id+'-selectshow')).length;
  125. }
  126. //add item到select裡�?�
  127. //在傳itemtext時,用<span class="thistext"></span>包起�?顯示的 "文字"
  128. //例如:<span class="thistext">哇哈哈</span>,這樣select�?�擇後,就會顯示 "哇哈哈"
  129. this.addItem = function(itemtext,itemvalue){
  130. var itemhtml='<div class="selectitem"><div class="selecttext">'+itemtext
  131. +'</div><div class="selectvalue" style=" display:none;">'+itemvalue+'</div></div><div class="selectborder"><div>';
  132. $("#"+settings.id+'-selectshow').html($("#"+settings.id+'-selectshow').html()+itemhtml);
  133. bindItemMouseover();
  134. };
  135. this.removeItem = function(index){
  136. if($('.selectitem',$('#'+settings.id+'-selectshow')).length>index)
  137. $($('.selectitem',$('#'+settings.id+'-selectshow')).get(index)).remove();
  138. if($('.selectborder',$('#'+settings.id+'-selectshow')).length>index)
  139. $($('.selectborder',$('#'+settings.id+'-selectshow')).get(index)).remove();
  140. }
  141. this.getValue = function(){
  142. return $('.valueshow',$('#'+settings.id+'-Text')).html();
  143. }
  144. this.getText = function(){
  145. return $('.textshow',$('#'+settings.id+'-Text')).html();
  146. }
  147. return this.each(_handler);
  148. }
  149. });
  150. })(jQuery);