(二)js下拉菜单

默认的select标签比较难看,UI比较漂亮,如果想要实现UI上的下拉样式,好像必须用js写select,从网上拷贝而且修改了一个下拉框,为了方便以后引用所以记录下来。

/* diy_select */
.diy_select{height:30px;width:90px; position: relative;font-size:14px;margin:0px;background:#fff;color:#000;float:left; cursor:pointer;}
.diy_select_btn,.diy_select_txt{float:left;height:100%;line-height:30px}
.diy_select,.diy_select_list{border:0px solid #d8d8d8;}
.diy_select_txt{width:90px;background: url(../images/select_ico.png) no-repeat 70px 50% #fff;color:#666; }
.diy_select_txt,.diy_select_list li{text-indent:8px;overflow:hidden}
.diy_select_btn{width:28px;background:url(rec.gif) no-repeat center}
.diy_select_list{position:absolute;top:30px;left:0px;z-index:88888;border-top:none;width:100%;display:none;_top:29px;background:#fff;color:#333; }
.diy_select_list li{list-style:none;height:24px;line-height:24px;cursor:default;_background:#fff}
.diy_select_list li.focus{background:#257824;color:#fff}

js

<script type="text/javascript">
function diy_select(){this.init.apply(this,arguments)};
diy_select.prototype={
     init:function(opt)
     {
        this.setOpts(opt);
        this.o=this.getByClass(this.opt.TTContainer,document,‘div‘);//容器
        this.b=this.getByClass(this.opt.TTDiy_select_btn);//按钮
        this.t=this.getByClass(this.opt.TTDiy_select_txt);//显示
        this.l=this.getByClass(this.opt.TTDiv_select_list);//列表容器
        this.ipt=this.getByClass(this.opt.TTDiy_select_input);//列表容器
        this.lengths=this.o.length;
        this.showSelect();
     },
     addClass:function(o,s)//添加class
     {
        o.className = o.className ? o.className+‘ ‘+s:s;
     },
     removeClass:function(o,st)//删除class
     {
        var reg=new RegExp(‘\\b‘+st+‘\\b‘);
        o.className=o.className ? o.className.replace(reg,‘‘):‘‘;
     },
     addEvent:function(o,t,fn)//注册事件
     {
        return o.addEventListener ? o.addEventListener(t,fn,false):o.attachEvent(‘on‘+t,fn);
     },
     showSelect:function()//显示下拉框列表
     {
        var This=this;
        var iNow=0;
        this.addEvent(document,‘click‘,function(){
             for(var i=0;i<This.lengths;i++)
             {
                This.l[i].style.display=‘none‘;
             }
        })
        for(var i=0;i<this.lengths;i++)
        {
            this.l[i].index=this.b[i].index=this.t[i].index=i;
            this.t[i].onclick=this.b[i].onclick=function(ev)
            {
                var e=window.event || ev;
                var index=this.index;
                This.item=This.l[index].getElementsByTagName(‘li‘);

                This.l[index].style.display= This.l[index].style.display==‘block‘ ? ‘none‘ :‘block‘;
                for(var j=0;j<This.lengths;j++)
                {
                    if(j!=index)
                    {
                        This.l[j].style.display=‘none‘;
                    }
                }
                This.addClick(This.item);
                e.stopPropagation ? e.stopPropagation() : (e.cancelBubble=true); //阻止冒泡
            }
        }
     },
     addClick:function(o)//点击回调函数
     {

        if(o.length>0)
        {
            var This=this;
            for(var i=0;i<o.length;i++)
            {
                o[i].onmouseover=function()
                {
                    This.addClass(this,This.opt.TTFcous);
                }
                o[i].onmouseout=function()
                {
                    This.removeClass(this,This.opt.TTFcous);
                }
                o[i].onclick=function()
                {
                    var index=this.parentNode.index;//获得列表
                    This.t[index].innerHTML=This.ipt[index].value=this.innerHTML.replace(/^\s+/,‘‘).replace(/\s+&/,‘‘);
                    This.l[index].style.display=‘none‘;
                }
            }
        }
     },
     getByClass:function(s,p,t)//使用class获取元素
     {
        var reg=new RegExp(‘\\b‘+s+‘\\b‘);
        var aResult=[];
        var aElement=(p||document).getElementsByTagName(t || ‘*‘);

        for(var i=0;i<aElement.length;i++)
        {
            if(reg.test(aElement[i].className))
            {
                aResult.push(aElement[i])
            }
        }
        return aResult;
     },

     setOpts:function(opt) //以下参数可以不设置  //设置参数
     {
        this.opt={
             TTContainer:‘diy_select‘,//控件的class
             TTDiy_select_input:‘diy_select_input‘,//用于提交表单的class
             TTDiy_select_txt:‘diy_select_txt‘,//diy_select用于显示当前选中内容的容器class
             TTDiy_select_btn:‘diy_select_btn‘,//diy_select的打开按钮
             TTDiv_select_list:‘diy_select_list‘,//要显示的下拉框内容列表class
             TTFcous:‘focus‘//得到焦点时的class
        }
        for(var a in opt)  //赋值 ,请保持正确,没有准确判断的
        {
            this.opt[a]=opt[a] ? opt[a]:this.opt[a];
        }
     }
}

var TTDiy_select=new diy_select({  //参数可选
    TTContainer:‘diy_select‘,//控件的class
    TTDiy_select_input:‘diy_select_input‘,//用于提交表单的class
    TTDiy_select_txt:‘diy_select_txt‘,//diy_select用于显示当前选中内容的容器class
    TTDiy_select_btn:‘diy_select_btn‘,//diy_select的打开按钮
    TTDiv_select_list:‘diy_select_list‘,//要显示的下拉框内容列表class
    TTFcous:‘focus‘//得到焦点时的class
});//如同时使用多个时请保持各class一致.
</script> 

html

<div class=‘diy_select‘>
     <input type=‘hidden‘ name=‘‘ class=‘diy_select_input‘/>
     <div class=‘diy_select_txt‘>直播课堂</div>
     <div class=‘diy_select_btn‘></div>
     <ul class=‘diy_select_list‘>
         <li>课程</li>
         <li>直播课堂</li>
         <li>学校</li>
         <li>老师</li>
     </ul> </div>

效果图

时间: 03-16

(二)js下拉菜单的相关文章

CSS+JS下拉菜单和纯CSS下拉菜单

一.CSS+JS下拉菜单 原理:一级菜单的li中包含二级菜单ul.在鼠标没有移上去时,二级菜单的ul是display:none的状态,鼠标一移上去变成display:block.改变这个display属性值是通过JS来实现.鼠标hover时,把整个二级菜单的ul给display出来,用到的事件onmouseonver.鼠标移出又把整个二级菜单的ul 给隐藏掉. nav-js.html文件 <!DOCTYPE html > <html> <head> <meta c

纯css+js下拉菜单实例代码

纯css+js下拉菜单实例代码 分享一个css+js下拉菜单代码,js+css实现的简单下拉菜单,兼容性不错. 例子:<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <

js下拉菜单默认值为当前年份,下拉菜单的选项为当前年份往前推5年

1:在jsp或者HTML页面中新建一个下拉框 年度:<select id="cx_nd" name="cx_nd" style="width: 60px;"></select> 年 2:调用下面方法即可 window.onload = function(){ var sel = document.getElementById("cx_nd"); var date = new Date(); for(va

JS 下拉菜单

HTML 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>下拉菜单</title> 6 <link rel="stylesheet" href="css/style.css"> 7 <script src="https://ajax.googleapis.c

二三级下拉菜单

if (!Page.IsPostBack) { string sql = "select * from InfoType"; DataTable dt = SqlHelp.ExecuteDataTable(sql); string js = "",ss = ""; for (int i = 0; i < dt.Rows.Count; i++) { if (dt.Rows[i]["parenttypeid"].ToStri

JS 下拉菜单联动

示例代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Conte

Siebel 找字段、下拉菜单设置值、弹出新页面、弹出选择框、设置默认值 、按钮代码

产品缺陷太多,跟用户交互不人性化.例如搜索新建客户功能,用户输入后会自动保存数据,一旦保存后一. 找字段1.简单 CTRL+Q CTRL+Q 服务请求编号----对应的表.字段.长度: 客户编码-----对应的表.字段.长度(弹出新页面):- 点击上面的pick Applet会弹出“选取客户”对话框 有JOIN就不用TABLE:require代表必填 字段有两个值----项目编号 下图确定只有projectNum有用 3.表单中的字段(不在list column中,而是在control) 二.下

JavaScript下拉菜单的例子分享

css+js下拉菜单 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server&q

Html5+Css3制作下拉菜单的三种方式

一.渐变式改变ol的高度 1.外部为ul标签,在每个li里嵌套一个ol列表2.设置外部li左浮动,内部ol标签绝对定位,外部li标签相对定位3.设置ol的高为0,溢出隐藏4.外部li标签:hover 时,设置ol的高度,transition渐变 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>&l