技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置首页 --> JavaScript --> 用 Jquery 模拟 select

用 Jquery 模拟 select

浏览:2702次  出处信息

查看demo
直接上代码:

(function($) {
  $.fn.combox = function(options) {
    var opts = $.extend({}, $.fn.combox.defaults, options);
    return this.each(function() {
      var self = $(this);
      $(this).attr("visibility",false);
      var j = self[0].selectedIndex;
 
      if(self.css("width") == "auto")
        var w = opts.sel_min_width;
      else if(parseInt(self.css("width")) != 0)
        var w = self.css("width");
      else
        var w =  opts.sel_min_width;
 
      var pid = opts.prefix_id+self.attr("name");
      $('<div>'+self.children().eq(j).text()+'</div>').css({
        "position":"absolute",
        "width":w,
        "height":self.css("height"),
        "top":self.offset().top,
        "left":self.offset().left,
        "background":"url(down.gif) no-repeat right -1px",
        "border":"1px solid #bbb",
        "fontSize":"12px",
        "lineHeight":self.css("height"),
        "textIndent":"5px"
      }).appendTo("body").show();
 
      $("#"+pid).click(function(){
        var cid = "child_"+self.attr("id");
        if($("#"+cid).length &gt; 0){
          $("#"+cid).css({"border":"1px solid #bbb"}).show();
          $("#"+cid).children().show();
        }else{
          var t = parseInt($("#"+pid).css("top")) + parseInt($("#"+pid).css("height")) + 1 + "px";
          var w = parseInt($("#"+pid).css("width")) + "px";
          $('<div></div>').css({
            "position":"absolute",
            "width":self.css("width"),
            "top":t,
            "left":$("#"+pid).css("left"),
            "width":w,
            "background-color":opts.div_bg_color,
            "border":"1px solid #bbb",
            "z-Index":opts.over_div_index+1
          }).appendTo("body");
 
          $('<ul></ul>').css({
            "listStyle":"none",
            "margin":0,
            "padding":0,
            "fontSize":opts.font_size
          }).mouseover(function(){
            $(this).show();
            $("#"+cid).css({"border":"1px solid #bbb"});
          }).mouseout(function(){
            $(this).hide();
            $("#"+cid).css({"border":"0px","z-ndex":opts.over_div_index-1});
          }).appendTo($("#"+cid));
 
          self.children().each(function(i){
            $("<li>"+$(this).text()+"</li>").css({
               "height":"20px",
               "lineHeight":"20px",
               "textIndent":"5px"
            }).mouseover(function(){
               $(this).css({"background-color":opts.over_bg_color,"color":"#fff"});
            }).mouseout(function(){
               $(this).css({"background-color":"#FFFFFF","color":"#000"});
            }).click(function(){
               $("#"+pid).html($(this).text());
               self[0].selectedIndex = i;
               $("#"+cid).hide();
            }).appendTo($("#ul_"+cid));
         });
       }
    });
    $(this).css("display","none");
  });
};
 
       $.fn.combox.defaults = {
	 prefix_id:"div_",
	 sel_min_width:"150px",
	 div_bg_color:"#fff",
	 over_bg_color:"#999966",
	 over_div_index:10,
	 font_size:"12px"
	}
})(jQuery);

调用方式:

建议继续学习:

  1. JQuery实现Excel表格呈现    (阅读:46468)
  2. 分享一个JQUERY颜色选择插件    (阅读:12395)
  3. jQuery插件---轻量级的弹出窗口wBox.    (阅读:9608)
  4. 10个强大的Ajax jQuery文件上传程序    (阅读:7682)
  5. jQuery的data()方法    (阅读:7444)
  6. jQuery性能优化指南    (阅读:7162)
  7. jQuery Color Animations颜色动画插件    (阅读:6932)
  8. 精于图片处理的10款jQuery插件    (阅读:6067)
  9. jQuery中getJSON跨域原理详解    (阅读:5551)
  10. 配合jquery实现异步加载页面元素    (阅读:5295)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
© 2009 - 2024 by blogread.cn 微博:@IT技术博客大学习

京ICP备15002552号-1