<!doctype html>

<html>

<head>

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

        body,ul,li{ margin:0; padding:0; font-size:13px;}

        ul,li{list-style:none;}

        .div-select{position:relative; }

        .div-select cite{width:150px; height:24px;line-height:24px; display:block; color:#807a62; cursor:pointer;font-style:normal;

            padding-left:4px; padding-right:30px; border:1px solid #333333;

            background:url(xjt.png) no-repeat right center;}

        .div-select ul{width:184px;border:1px solid #333333; background-color:#fff; position:absolute; z-index:10; margin-top:-1px; display:none;}

        .div-select li{height:24px; line-height:24px;}

        .div-select li a{display:block; height:24px; color:#333333; text-decoration:none; padding-left:10px; padding-right:10px;}

        .div-select li a:hover{background-color:#CCC;}

    </style>

    <script type="text/javascript" src="jquery-1.11.3.min.js"></script>

    <script type="text/javascript">

        //改写div模拟下拉菜单jquery插件 基本结构微动， id改成类名，原主方法不懂只是改写下

        $.fn.divSelect = function(){

            return this.each(function(index){

                var $this = $(this),

                        $cite = $this.find("cite"),

                        $list = $this.find("ul"),

                        $input = $this.find(".div-input");

                $this.on("click","cite",function(){

                    $list.is(":hidden") ? $list.slideDown("fast") : $list.slideUp("fast");

                    return false

                });

                $list.on("click","a",function(){

                    var $this = $(this);

                    $cite.text($this.text());

                    $input.val($this.attr("selectid"));

                    $list.hide();

                    return false

                });

                $(document).on("click.select"+index,function(){

                    $list.hide();

                });

            })

        };

        $(function(){

//调用 支持jquery连缀语法

            $(".div-select").divSelect();

        });

    </script>

</head>

<body style="padding: 50px;">

<form action="" method="post">

    <div class="div-select">

        <cite>请选择特效分类1</cite>

        <ul>

            <li><a href="javascript:;" selectid="1">导航菜单1</a></li>

            <li><a href="javascript:;" selectid="2">焦点幻灯片1</a></li>

            <li><a href="javascript:;" selectid="3">广告代码1</a></li>

            <li><a href="javascript:;" selectid="4">网页特效1</a></li>

            <li><a href="javascript:;" selectid="5">jquery 特效1</a></li>

        </ul>

        <input name="" type="hidden" value="" class="div-input"/>

    </div>

    <br/><br/>

    <div class="div-select">

        <cite>请选择特效分类2</cite>

        <ul>

            <li><a href="javascript:;" selectid="1">导航菜单2</a></li>

            <li><a href="javascript:;" selectid="2">焦点幻灯片2</a></li>

            <li><a href="javascript:;" selectid="3">广告代码2</a></li>

            <li><a href="javascript:;" selectid="4">网页特效2</a></li>

            <li><a href="javascript:;" selectid="5">jquery 特效</a></li>

        </ul>

        <input name="" type="hidden" value="" class="div-input"/>

    </div>

</form>

</body>

</html>

select下拉框插件（转）的更多相关文章

  1. select下拉框插件jquery.editable-select

    项目中有个需求,下拉框既可以下拉选择,也可以手动填写 html代码 <span>数据来源</span> </select> js代码 $('#noMean').ed ...

  2. 非常实用的select下拉框-Select2.js

    在Web开发中,Select下拉框是常用的输入组件.由于原生的Select几乎很难通过CSS样式控制.一些好看的Select下拉框就只能通过模拟来实现.PHP程序员雷雪松给大家推荐一筐款不错的Sele ...

  3. jquery Combo Select 下拉框可选可输入插件

    Combo Select 是一款友好的 jQuery 下拉框插件,在 PC 浏览器上它能模拟一个简单漂亮的下拉框,在 iPad 等移动设备上又能回退到原生样式.Combo Select 能够对选项进行 ...

  4. jQuery插件实现select下拉框左右选择_交换内容（multiselect2side）

    效果图: 使用jQuery插件---multiselect2side做法: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio ...

  5. 基于jQuery select下拉框美化插件

    分享一款基于jQuery select下拉框美化插件.该插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览   源码下 ...

  6. 自定义样式的select下拉框深入探索

    第一个版本: 首先实现自定义select下拉框应该具有的功能,我是选择将原来的select隐藏掉,自己在jquery代码中动态写进去<dl><dd><dt>这样的结 ...

  7. jQuery自定义漂亮的下拉框插件8种效果演示

    原始的下拉框不好看这里推荐一个jQuery自定义漂亮的下拉框插件8种效果演示 在线预览 下载地址 实例代码 <!DOCTYPE html> <html lang="en&q ...

  8. jQuery下拉框插件8种效果

    jQuery自定义漂亮的下拉框插件8种效果 jquery美化选择器实例有:边框.下划线. 伸缩 .滑动. 覆盖. 旋转. 弹出层选择 .环形效果. 在线预览 <body class=" ...

  9. jQuery无限级联下拉框插件

    自己编写jQuery插件 之 无限级联下拉框   因为是级联,所以数据必须是树型结构的,我这里的测试数据如下: 看下效果图: 1.>图一: 2.>图二: 3.>图三: 由图可知,下拉 ...

随机推荐

  1. World Wind .NET开发

    World  Wind  .NET开发

  2. 关于IE11版本下JS中时间判断的问题

    最近在做代码的优化及浏览器的兼容问题.遇到了谷歌.火狐.360兼容模式.IE(8以上)版本对时间判断大小的问题 . 在谷歌.火狐.360.IE11以下IE8以上版本下 var d1="201 ...

  3. Xstream解析XML

    <oschina> <catalog>1</catalog> <newsCount>0</newsCount> <pagesize&g ...

  4. MySQL乱码问题

      JSP的request 默认为ISO8859_1,所以在处理中文的时候, 要显示中文的话,必须转成GBK的,如下 String str=new String(request.getParamete ...

  5. apache commons math 示例代码

    apache commons Math是一组偏向科学计算为主的函数,主要是针对线性代数,数学分析,概率和统计等方面. 我虽然是数学专业毕业,当年也是抱着<数学分析>啃,但是好久不用,这些概 ...

  6. redis.conf配置详细翻译解析

    # redis 配置文件示例 # 当你需要为某个配置项指定内存大小的时候,必须要带上单位, # 通常的格式就是 1k 5gb 4m 等酱紫: # # 1k => 1000 bytes # 1kb ...

  7. Android守护进程

    这几天,一位做Android的朋友和我探讨了一个问题:因为业务需求的原因,在自己的App长时间不使用被kill掉之后,如何让它再重新运行起来. 虽然,我本身很排斥这种做法,有点类似“流氓软件”的行为, ...

  8. Java，double类型转换成String，String装换成double型

    今天,老师布置了小系统,银行用户管理系统,突然发现自己的基础知识好薄弱,就把这些记录一下, double类型转化string:Double.toString(double doub); String类 ...

  9. disable_irq与disable_irq_nosync使用场景

    disable_irq与disable_irq_nosync使用场景     Linux设备驱动,关于中断屏蔽有两个接口:disable_irq和disable_irq_nosync,该两接口使用场景 ...

  10. linux内存占用查看命令

    ps -e -o 'pid,comm,args,pcpu,rsz,vsz,stime,user,uid' | grep tomcat | sort -nrk5 其中rsz为实际内存,上例实现按内存排序 ...