夢幻之旅
          
				
          DEBUG - 天道酬勤
          
			          		
		
          
	
          

          

          
	
          
		
          
			
 
 ::
首頁 ::
新隨筆 ::
聯系 ::
聚合
 ::
管理 ::


			
			
				

          
	
          
		
          
			
			
			
				 
				671 
				隨筆 ::
				6 文章
				::
				256 評論
				::
				0 Trackbacks
			
		
          
	
          

          

			          		
		
          
	
          

          


          


          
	
					

          
	
	
	
          
		
          css
          

          

          /** 惠萬鵬(2010-8-13) */
          

          

          
ul, ol, li           {
          
    list-style          :none;
          
          }
          
ul, ol, li, img, dl, dt, dd           {
          
    margin          : 0;
          
    padding          : 0;
          
    border          : 0;
          
          }
          
div.selectbox-wrapper           {
          
    border-right          : #bfbfbf 1px solid; 
          
    border-top          : #bfbfbf 0px solid; 
          
    margin-top          : -3px; 
          
    border-left          : #bfbfbf 1px solid; 
          
    width          : 107px; 
          
    border-bottom          : #bfbfbf 1px solid; 
          
    position          : absolute; 
          
    background-color          : #fff; 
          
    text-align          : left
          
           }
          
div.selectbox-wrapper ul li.selected           {
          
        background-color          : #bfbfbf;
          
          }
          
div.selectbox-wrapper ul li.current           {
          
    color          : #fff; 
          
    background-color          : #9a9a9a
          
          }
          
div.selectbox-wrapper ul li 
          
          {
          
    padding-right          : 3px; 
          
    padding-left          : 3px; 
          
    padding-bottom          : 3px; 
          
    width          : 102px; 
          
    cursor          : pointer; 
          
    line-height          : 20px; 
          
    padding-top          : 3px
          
          }
          
.selectbox           { 
          
    border          :none;  
          
    display          : block; 
          
    padding-left          :4px; 
          
    width          : 130px; 
          
    cursor          : pointer; 
          
    padding-top          :5px; 
          
    height          : 19px; 
          
    background          :url(/js/select/select.gif) no-repeat;
          
          }
          

          
js
          

          jQuery.fn.extend({
          
    selectbox:           function(options) {
          
                  return this.each(function() {
          
                      new jQuery.SelectBox(this, options);
          
        }          );
          
    }
          
}          );
          

          

          
          /* pawel maziarz: work around for ie logging */
          
          if (!window.console) {
          
              var console = {
          
        log:           function(msg) { 
          
     }
          
    }
          
}
          
          /* */
          

          
jQuery.SelectBox           = function(selectobj, options) {
          
    
          
              var opt = options || {};
          
    opt.inputClass           = opt.inputClass || "selectbox";
          
    opt.containerClass           = opt.containerClass || "selectbox-wrapper";
          
    opt.hoverClass           = opt.hoverClass || "current";
          
    opt.currentClass           = opt.selectedClass || "selected"
          
    opt.debug           = opt.debug || false;
          
    
          
              var elm_id = selectobj.id;
          
              var active = 0;
          
              var inFocus = false;
          
              var hasfocus = 0;
          
              //jquery object for select element
          
              var $select = $(selectobj);
          
              // jquery container object
          
              var $container = setupContainer(opt);
          
              //jquery input object 
          
              var $input = setupInput(opt);
          
              // hide select and append newly created elements
          
              $select.hide().before($input).before($container);
          
    
          
    
          
    init();
          
    
          
    $input
          
    .click(          function(){
          
              if (!inFocus) {
          
          $container.toggle();
          
        }
          
    }          )
          
    .focus(          function(){
          
                 if ($container.not(':visible')) {
          
           inFocus           = true;
          
           $container.show();
          
       }
          
    }          )
          
    .keydown(          function(event) {       
          
                  switch(event.keyCode) {
          
                      case 38: // up
          
                          event.preventDefault();
          
                moveSelect(          -1);
          
                          break;
          
                      case 40: // down
          
                          event.preventDefault();
          
                moveSelect(          1);
          
                          break;
          
                      //case 9:  // tab 
          
                      case 13: // return
          
                          event.preventDefault(); // seems not working in mac !
          
                          $('li.'+opt.hoverClass).trigger('click');
          
                          break;
          
                      case 27: //escape
          
                        hideMe();
          
                        break;
          
        }
          
    }          )
          
    .blur(          function() {
          
                  if ($container.is(':visible') && hasfocus > 0 ) {
          
                      if(opt.debug) console.log('container visible and has focus')
          
        }           else {
          
                    // Workaround for ie scroll - thanks to Bernd Matzner
          
                    if($.browser.msie || $.browser.safari){ // check for safari too - workaround for webkit
          
                  if(document.activeElement.getAttribute('id').indexOf('_container')==-1){
          
          hideMe();
          
        }           else {
          
          $input.focus();
          
        }
          
      }           else {
          
        hideMe();
          
      }
          
        }
          
    }          );
          

          

          
              function hideMe() { 
          
        hasfocus           = 0;
          
        $container.hide(); 
          
    }
          
    
          
              function init() {
          
        $container.append(getSelectOptions($input.attr('id'))).hide();
          
                  var width = $input.css('width');
          

          
    }
          
    
          
              function setupContainer(options) {
          
                  var container = document.createElement("div");
          
        $container           = $(container);
          
        $container.attr('id', elm_id          +'_container');
          
        $container.addClass(options.containerClass);
          
        
          
                  return $container;
          
    }
          
    
          
              function setupInput(options) {
          
                  var input = document.createElement("input");
          
                  var $input = $(input);
          
        $input.attr(          "id", elm_id+"_input");
          
        $input.attr(          "type", "text");
          
        $input.addClass(options.inputClass);
          
        $input.attr(          "autocomplete", "off");
          
        $input.attr(          "readonly", "readonly");
          
        $input.attr(          "tabIndex", $select.attr("tabindex")); // "I" capital is important for ie
          
                  
          
                  return $input;    
          
    }
          
    
          
              function moveSelect(step) {
          
                  var lis = $("li", $container);
          
                  if (!lis || lis.length == 0) return false;
          
        active           += step;
          
              //loop through list
          
                  if (active < 0) {
          
            active           = lis.size();
          
        }           else if (active > lis.size()) {
          
            active           = 0;
          
        }
          
    scroll(lis, active);
          
        lis.removeClass(opt.hoverClass);
          

          
        $(lis[active]).addClass(opt.hoverClass);
          
    }
          
    
          
              function scroll(list, active) {
          
                var el = $(list[active]).get(0);
          
                var list = $container.get(0);
          
      
          
                if (el.offsetTop + el.offsetHeight > list.scrollTop + list.clientHeight) {
          
        list.scrollTop           = el.offsetTop + el.offsetHeight - list.clientHeight;      
          
      }           else if(el.offsetTop < list.scrollTop) {
          
        list.scrollTop           = el.offsetTop;
          
      }
          
    }
          
    
          
              function setCurrent() {    
          
                  var li = $("li."+opt.currentClass, $container).get(0);
          
                  var ar = (''+li.id).split('_');
          
                  var el = ar[ar.length-1];
          
        $select.val(el);
          
        $input.val($(li).html());
          
                  return true;
          
    }
          
    
          
              // select value
          
              function getCurrentSelected() {
          
                  return $select.val();
          
    }
          
    
          
              // input value
          
              function getCurrentValue() {
          
                  return $input.val();
          
    }
          
    
          
              function getSelectOptions(parentid) {
          
                  var select_options = new Array();
          
                  var ul = document.createElement('ul');
          
        $select.children('option').each(          function() {
          
                      var li = document.createElement('li');
          
            li.setAttribute('id', parentid           + '_' + $(this).val());
          
            li.innerHTML           = $(this).html();
          
                      if ($(this).is(':selected')) {
          
                $input.val($(          this).html());
          
                $(li).addClass(opt.currentClass);
          
            }
          
            ul.appendChild(li);
          
            $(li)
          
            .mouseover(          function(event) {
          
                hasfocus           = 1;
          
                          if (opt.debug) console.log('over on : '+this.id);
          
                jQuery(event.target, $container).addClass(opt.hoverClass);
          
            }          )
          
            .mouseout(          function(event) {
          
                hasfocus           = -1;
          
                          if (opt.debug) console.log('out on : '+this.id);
          
                jQuery(event.target, $container).removeClass(opt.hoverClass);
          
            }          )
          
            .click(          function(event) {
          
                        var fl = $('li.'+opt.hoverClass, $container).get(0);
          
                          if (opt.debug) console.log('click on :'+this.id);
          
                $('#'           + elm_id + '_container' + ' li.'+opt.currentClass).removeClass(opt.currentClass); 
          
                $(          this).addClass(opt.currentClass);
          
                setCurrent();
          
                          //$select.change();
          
                          $select.get(0).blur();
          
                hideMe();
          
            }          );
          
        }          );
          
                  return ul;
          
    }
          
    
          
    
          
    
          
}          ;
          

          

          
demo
          

          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
          
          <HTML xmlns="http://www.w3.org/1999/xhtml">
          
              <HEAD>
          
                  <META http-equiv=Content-Type content="text/html; charset=utf-8"/>
          
                  <link href="/js/select/mySelect.css" rel="stylesheet" type="text/css"/>
          
                  <SCRIPT src="/js/jquery/jquery.js" type=text/javascript></SCRIPT>
          
                  <SCRIPT src="/js/select/mySelect.js" type=text/javascript></SCRIPT>
          
              </HEAD>
          
              <BODY>
          
                  <select id="c" style="display: none;width:200px;" name="c"> 
          
                      <option value="1">生活信息</option>
          
                      <option value="2">店鋪商家</option>
          
                      <option  value="3" selected>新聞資訊</option>
          
                      <option value="4">團購活動</option>
          
                      <option  value="5">招聘信息</option>
          
                  </select>
          
                  <select id="d" style="display: none;width:200px;" name="c"> 
          
                      <option value="1">生活信息</option>
          
                      <option value="2">店鋪商家</option>
          
                      <option  value="3" selected>新聞資訊</option>
          
                      <option value="4">團購活動</option>
          
                      <option  value="5">招聘信息</option>
          
                  </select> 
          
    
          
                  <SCRIPT src="js/jQselect.js" type=text/javascript></SCRIPT>
          
                  <SCRIPT type=text/javascript>
          
            $(document).ready(          function() {
          
                $(          "#c").selectbox();
          
                $(          "#d").selectbox();
          
            }          );
          
                  </SCRIPT>
          
              </BODY>
          
          </HTML>
          

	
          
	
	
          
		posted on 2010-08-13 14:07 HUIKK 閱讀(1706) 評論(0)  編輯  收藏  所屬分類: Html 
	
          

          







          
	    
    




          








          

				

          




    







          
        
	




主站蜘蛛池模板：
永新县|
松桃|
新巴尔虎右旗|
镶黄旗|
卢龙县|
阳山县|
额济纳旗|
柞水县|
柳河县|
九龙城区|
福清市|
长丰县|
洱源县|
屏东市|
灯塔市|
石林|
蓬莱市|
阿拉善右旗|
琼海市|
若尔盖县|
宜良县|
华蓥市|
嘉善县|
祥云县|
昆山市|
新和县|
崇仁县|
黔西|
青阳县|
依安县|
两当县|
全椒县|
大关县|
商南县|
湖州市|
永新县|
绍兴县|
上栗县|
黑龙江省|
滁州市|
肥城市|