|
|
|
|
|
//select陦ｨ遉ｺselect譛ｬ霄ｫ<EFBFBD>計iew陦ｨ遉ｺ霍ｳ蜃ｺ逧<EFBFBD>?ｸ鬆<EFBFBD>
|
|
|
;(function($){
|
|
|
|
|
|
$.fn.extend({
|
|
|
|
|
|
//險育ｮ玲枚蟄唯yte謨ｸ<EFBFBD>御ｸｦ蝗槫さ
|
|
|
getByteLength: function(strIN){
|
|
|
var i, cnt=0;
|
|
|
|
|
|
for (i=0; i<strIN.length; i++){
|
|
|
if (escape(strIN.charAt(i)).length >= 4) cnt+=2;
|
|
|
else cnt++;
|
|
|
}
|
|
|
|
|
|
return cnt;
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
$.fn.extend({
|
|
|
|
|
|
//讙｢譟･譁<EFBFBD>ｭ礼噪Byte謨ｸ<EFBFBD>瑚ｶ<EFBFBD>?四imit謖<EFBFBD>ｮ夂噪蛟区丙逧<EFBFBD>ｩｱ<EFBFBD>悟ｰｱ蝗槫さtrue 蜥<EFBFBD> 譛ｪ雜<EFBFBD>?惹ｹ句<EFBFBD>?逧<EFBFBD>枚蟄擁ndex
|
|
|
getIndexByByte: function(strIN,limit){
|
|
|
var i, cnt=0;
|
|
|
|
|
|
for (i=0; i<strIN.length; i++){
|
|
|
if (escape(strIN.charAt(i)).length >= 4) cnt+=2;
|
|
|
else cnt++;
|
|
|
|
|
|
if(cnt>limit)
|
|
|
{
|
|
|
return [true,i];
|
|
|
}
|
|
|
}
|
|
|
|
|
|
return false;
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
$.fn.extend({
|
|
|
|
|
|
finalselect: function(options) {
|
|
|
|
|
|
var settings =
|
|
|
{
|
|
|
id:null,
|
|
|
animalSpeed:100,
|
|
|
selectWidth:"190px",
|
|
|
selectImage:"image/select.png",
|
|
|
selectText:"My friend",
|
|
|
zIndex: 0,
|
|
|
viewHeight:"100px",
|
|
|
viewWidth:"300px",
|
|
|
viewMouseoverColor:"#cfdfff",//#dcdcdc
|
|
|
viewTop:"28px",//top,bottom
|
|
|
viewLeft:" -1px"//left,right
|
|
|
};
|
|
|
|
|
|
|
|
|
if (typeof(options)!='undefined')
|
|
|
{
|
|
|
//蟆<EFBFBD>紛謇ｹoptions逧<EFBFBD>ｼassign邨ｦsettings
|
|
|
jQuery.extend(settings, options);
|
|
|
}
|
|
|
|
|
|
var tmp='<div id="'+settings.id+'-select" style="cursor:default;font-size:12px;z-index:'+settings.zIndex+';border: solid 0px #999; padding: 3px; width: 180px; position: relative;">'
|
|
|
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 10px;">';
|
|
|
tmp+='<div class="textshow" style="padding: 4px 0 0 0;">'+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>';
|
|
|
|
|
|
|
|
|
|
|
|
var _handler = function() {
|
|
|
// 蠕樣呵｣｡髢句ｧ<EFBFBD>
|
|
|
$(this).html(tmp);
|
|
|
bindArrowClick();
|
|
|
bindSelectMouseover();
|
|
|
bindSelectMouseleave();
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
var bindArrowClick=function(){
|
|
|
var tmp=$('#'+settings.id+'-Text');
|
|
|
$("#"+settings.id+'-Text').bind("click", function(e){
|
|
|
var obj=$('#'+settings.id+'-selectshow');
|
|
|
if(obj.css('display')=='none')
|
|
|
{
|
|
|
// obj.slide();
|
|
|
obj.slideDown(settings.animalSpeed,function(){
|
|
|
obj.show();
|
|
|
obj.css('overflow','auto');
|
|
|
obj.css('overflow-x','hidden');
|
|
|
});
|
|
|
}
|
|
|
else
|
|
|
{
|
|
|
obj.slideUp(settings.animalSpeed,function(){
|
|
|
obj.hide();
|
|
|
});
|
|
|
}
|
|
|
|
|
|
});
|
|
|
};
|
|
|
|
|
|
var bindItemMouseover=function(){
|
|
|
|
|
|
var inx=0;
|
|
|
while($(".selectitem",$("#"+settings.id+"-selectshow")).get(inx)!=null)
|
|
|
{
|
|
|
var item=$(".selectitem",$("#"+settings.id+"-selectshow")).get(inx);
|
|
|
|
|
|
$(item).bind("mouseover", function(e){
|
|
|
$(this).css('background-color',settings.viewMouseoverColor);
|
|
|
});
|
|
|
|
|
|
$(item).bind("mouseout", function(e){
|
|
|
$(this).css('background-color','#fff');
|
|
|
});
|
|
|
|
|
|
$(item).bind("click", function(e){
|
|
|
|
|
|
var tmpstr=$(".thistext",$(this)).html();
|
|
|
var arr=$().getIndexByByte(tmpstr,30);
|
|
|
if(arr[0]==true)
|
|
|
tmpstr=tmpstr.substring(0,arr[1])+'...';
|
|
|
|
|
|
$(".textshow",$("#"+settings.id+"-Text")).html(tmpstr);
|
|
|
document.getElementById(settings.id+'-selectshow').style.display="none";
|
|
|
|
|
|
$(".valueshow",$("#"+settings.id+"-Text")).html($(".selectvalue",$(this)).html());
|
|
|
|
|
|
});
|
|
|
|
|
|
inx++;
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
var bindSelectMouseover=function(){
|
|
|
$('#'+settings.id+'-Text').bind("mouseover",function(){
|
|
|
if($.browser.msie==false)
|
|
|
$('#'+settings.id+'-Text').css("background-position","0 -21px");
|
|
|
});
|
|
|
}
|
|
|
|
|
|
var bindSelectMouseleave=function(){
|
|
|
$('#'+settings.id+'-Text').bind("mouseout",function(){
|
|
|
if($.browser.msie==false)
|
|
|
$('#'+settings.id+'-Text').css("background-position","0 0px");
|
|
|
});
|
|
|
}
|
|
|
|
|
|
this.setViewTop = function(top){
|
|
|
$('#'+settings.id+'-selectshow').css('top',top+'px');
|
|
|
}
|
|
|
|
|
|
this.setViewLeft = function(left){
|
|
|
$('#'+settings.id+'-selectshow').css('left',left+'px');
|
|
|
}
|
|
|
|
|
|
this.getLength = function(){
|
|
|
return $('.selectitem',$('#'+settings.id+'-selectshow')).length;
|
|
|
}
|
|
|
|
|
|
|
|
|
//add item蛻ｰselect陬｡<EFBFBD>?｢
|
|
|
//蝨ｨ蛯ｳitemtext譎ゑｼ檎畑<span class="thistext"></span>蛹<EFBFBD>ｵｷ隕?鬘ｯ遉ｺ逧<EFBFBD> "譁<EFBFBD>ｭ<EFBFBD>"
|
|
|
//萓句ｦ<EFBFBD>:<span class="thistext">蜩<EFBFBD>嶋蜩<EFBFBD></span><EFBFBD>碁呎ｨ｣select<EFBFBD>?ｸ謫<EFBFBD>ｾ鯉ｼ悟ｰｱ譛<EFBFBD>｡ｯ遉ｺ "蜩<EFBFBD>嶋蜩<EFBFBD>"
|
|
|
this.addItem = function(itemtext,itemvalue){
|
|
|
|
|
|
var itemhtml='<div class="selectitem"><div class="selecttext">'+itemtext
|
|
|
+'</div><div class="selectvalue" style=" display:none;">'+itemvalue+'</div></div><div class="selectborder"><div>';
|
|
|
|
|
|
$("#"+settings.id+'-selectshow').html($("#"+settings.id+'-selectshow').html()+itemhtml);
|
|
|
|
|
|
bindItemMouseover();
|
|
|
};
|
|
|
|
|
|
this.removeItem = function(index){
|
|
|
if($('.selectitem',$('#'+settings.id+'-selectshow')).length>index)
|
|
|
$($('.selectitem',$('#'+settings.id+'-selectshow')).get(index)).remove();
|
|
|
if($('.selectborder',$('#'+settings.id+'-selectshow')).length>index)
|
|
|
$($('.selectborder',$('#'+settings.id+'-selectshow')).get(index)).remove();
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
this.getValue = function(){
|
|
|
return $('.valueshow',$('#'+settings.id+'-Text')).html();
|
|
|
}
|
|
|
|
|
|
this.getText = function(){
|
|
|
return $('.textshow',$('#'+settings.id+'-Text')).html();
|
|
|
}
|
|
|
|
|
|
|
|
|
return this.each(_handler);
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
})(jQuery); |
