新浦京81707con > 首页 > 基于jquery扩展漂亮的下拉框可以二次修改,基于

原标题:基于jquery扩展漂亮的下拉框可以二次修改,基于

浏览次数:103 时间:2019-09-13

<b class="select_type"></b>

复制代码 代码如下:

解释自定义下拉框:

$.fn.selectCss=function(_speed){
$(this).each(function(){
var speed=_speed||"fast";
if($(this).data("cssobj")){
$($(this).data("cssobj")).remove();
}
$(this).hide();
var divselect = $("<div></div>").insertAfter(this).addClass("tag_select");
$(this).data("cssobj",divselect);
var divoptions = $("<ul></ul>").insertAfter(divselect).addClass("tag_options").hide();
divselect.click(function(e){
if($($(document).data("nowselectoptions")).get(0) != $(this).next("ul").get(0)){
hideOptions(speed);
}
if(!$(this).next("ul").is(":visible"))
{
e.stopPropagation();
$(document).data("nowselectoptions",$(this).next("ul"));
showOptions(speed);
}
});
divselect.hover(function(){
$(this).addClass("tag_select_hover");
}
,
function(){
$(this).removeClass("tag_select_hover");
});
$(this).change(function(){
$(this).nextAll("ul").children("li:eq(" $(this)[0].selectedIndex ")").addClass("open_selected").siblings().removeClass("open_selected");
$(this).next("div").html($(this).children("option:eq(" $(this)[0].selectedIndex ")").text());
});
$(this).children("option").each(function(i){
var lioption= $("<li></li>").html($(this).text()).attr("title",$(this).attr("title")).appendTo(divoptions);
if($(this).attr("selected")){
lioption.addClass("open_selected");
divselect.html($(this).text());
}
lioption.data("option",this);
lioption.click(function(){
lioption.data("option").selected=true;
$(lioption.data("option")).trigger("change",true)
});
lioption.hover(
function(){$(this).addClass("open_hover");},
function(){ $(this).removeClass("open_hover"); }
);
});
});
}
})(jQuery);

复制代码 代码如下:

复制代码 代码如下:

一而再发一篇有关web前端自定义控件——ComboBox(下拉框),今后本身在利用下拉框控件老是为了样式丑陋而闹心,将来享受那个控件,希望有用的同事们得以收藏,或开展一遍修改,达到你想要的效能。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns=";
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="selectCss.css" rel="stylesheet" type="text/css" />
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="selectCss.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("select").selectCss();
});
</script>
</head>
<body>
<select name="" onchange="alert(this.value)" id="select1">
<option value="1" title="选项选项选项选项" >选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
</select>
<select name="" id="select2">
<option value="1">选项31</option>
<option value="2">选项32</option>
<option value="3">选33</option>
</select>
</body>
</html>

Html代码:

selectCss.Css 文件代码:

3.点击下拉框控件,显示下拉列表

(function($){
function hideOptions(speed){
if(speed.data){speed=speed.data}
if($(document).data("nowselectoptions"))
{
$($(document).data("nowselectoptions")).slideUp(speed);
$($(document).data("nowselectoptions")).prev("div").removeClass("tag_select_open");
$(document).data("nowselectoptions",null);
$(document).unbind("click",hideOptions);
$(document).unbind("keyup",hideOptionsOnEscKey);
}
}
function hideOptionsOnEscKey(e){
var myEvent = e || window.event;
var keyCode = myEvent.keyCode;
if(keyCode==27)hideOptions(e.data);
}
function showOptions(speed){
$(document).bind("click",speed,hideOptions);
$(document).bind("keyup",speed,hideOptionsOnEscKey);
$($(document).data("nowselectoptions")).slideDown(speed);
$($(document).data("nowselectoptions")).prev("div").addClass("tag_select_open");
}

2.绑定控件呈未来前台。

你可能感兴趣的小说:

  • jquery multiSelect 多选下拉框
  • 利用jQuery达成可输入寻觅文字的下拉框
  • jQuery操作select下拉框的text值和value值的法子
  • jquery获得下拉框值的代码
  • jquery及原生js获取select下拉框选中的值示例
  • jquery动态加载select下拉框示例代码
  • jQuery easyui中的combobox完成下拉框特效
  • Jquery操作下拉框(DropDownList)达成取值赋值
  • 依附jquery的Infiniti级联下拉框js插件
  • jQuery自定义多选下拉框效果

复制代码 代码如下:

1.减轻了有一点select 美化代码,不能触及原有select 控件的onchange 事件难题。
2.允许多次调用 $("...").selectCss(),以减轻Select的options更新后无法同步的主题素材。

代码如下:

selectbg.jpg 图片:
图片 1

2、示例代码:

运用格局如下:

Js代码:

珍视文件富含 selectCss.css 和 selectCss.js selectCss.js 文件代码:

  • '">' default_data.name '</font>');
    _tag.find('p').html(_html);
    } else {
    _html = '<div class="dropdown ' css '">';
    _html = '<span><font _id="' default_data.id '">' default_data.name '</font><a></a></span>';
    _html = '<p>';
    if (list) {
    $.each(list, function (i, value) {
    _html = '<a _id="' value.id '">' value.name '</a>';
    });
    }
    _html = '</p>';
    _html = '</div>';
    var parent = _tag.parent();
    _tag.replaceWith(_html);
    _tag = parent.find('.dropdown' (css.length > 0 ? '.' css.replace(' ', '.') : ''));
    }
    }
    //下拉风浪
    this.showEvent = function () {
    _tag.find('span').unbind('click').click(function () {
    var p = $(this).parent().find('p');
    if (p.css('display') == 'block') {
    p.css('display', 'none');
    $(this).removeClass('active');
    } else if (p.html().length > 0) {
    p.css('display', 'block');
    $(this).addClass('active');
    }
    });
    }
    //选中事件
    this.selectedIndex = function (index) {
    _tag.find('p a').unbind('click').click(function () {
    var parent = $(this).parent().parent();
    //给下拉框赋值
    if ($(this).text().length > 0) {
    var font = parent.find('font');
    font.text($(this).text());
    font.attr("_id", $(this).attr('_id'));
    _this.selectedIndexExpand(parent, $(this).index());
    parent.find('span').removeClass('active');
    }
    parent.find('p').css('display', 'none');
    });
    if (_tag.find('p a').length <= _index) _index = 0;
    if (_value && _value != '') {
    _index = _tag.find('p a[_id="' _value '"]').index();
    }
    _tag.find('p a:eq(' _index ')').click();
    }
    //选中事件扩张
    this.selectedIndexExpand = function (tag, index) { }
    }

复制代码 代码如下:

1、自定义类:

.tag_select{display:block;color:#000;width:179px;height:23px;background:transparent url("images/index_22.jpg") no-repeat 0 0;padding:0 10px;line-height:23px; color:#7D7D7D; font-size:12px; cursor:pointer}
.tag_select_hover{ color:#ff0000; background:transparent url("selectbg.jpg") no-repeat 0 0; }
.tag_select_open{ color:#0000ff; background:transparent url("selectbg.jpg") no-repeat 0 0;}
ul.tag_options{position:absolute;margin:0;list-style:none;background:#fff;padding:0 0 1px;margin:0;width:162px ; height:100px; overflow:hidden; overflow-y:auto; font-size:12px; margin-left:10px; cursor:pointer; z-index:1000 }
ul.tag_options li{background:#fff; display:block;width:140px;padding:0 10px;height:20px;text-decoration:none;line-height:20px;color:#000; font-weight:normal; font-size:12px}
ul.tag_options li.open_hover{background:#0000ff;color:#000; font-weight:normal; font-size:12px}
ul.tag_options li.open_selected{background:#ccc; font-size:12px;font-weight:bold; }

本文由新浦京81707con发布于首页,转载请注明出处:基于jquery扩展漂亮的下拉框可以二次修改,基于

关键词: 新浦京81707con

上一篇:鼠标滑在标题上显示图片的JS代码,鼠标滑在标题

下一篇:没有了