<!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. iOS简单动画

    知识架构 CALayer 图层类 CABasicAnimation 基础动画 CAKeyFrameAnimation 帧动画 CATransition 转场动画 CAAnimationGroup 动画 ...

  2. 诺基亚远去，《惊奇UCD》带你重塑用户体验

    我所说的成功的用户体验,是指我见过或听说过大量的用户非常喜爱我为手机行业做出的那些贡献.我的职业幸福感并不取决于我的经理或CEO说了什么,而是取决于我从实际用户那里听到了什么.             ...

  3. 自发行python版本制作（二）编译

    本系列文章第二篇主要说明windows环境的编译环境搭建以及编译过程. 编译环境选择: 1.选用作神一样存在的Microsoft Visual C++ Compiler for Python 2.7为 ...

  4. jquery_ui_api中文

    http://files.cnblogs.com/files/xjyggd/JQuery_UI_API.rar

  5. org.hibernate.AssertionFailure:collection[......] was not processed by flush()

    八月 12, 2016 11:00:49 上午 org.apache.catalina.core.StandardWrapperValve invoke 严重: Servlet.service() f ...

  6. windows10 下访问 virtualbox 虚拟机的linux15.10/16.04 系统 及 用 putty 访问虚拟机的配置

    参考: http://www.doc88.com/p-915707596190.html --- 安装samba http://my.oschina.net/u/2260265/blog/405598 ...

  7. DDS转换工具

    本工具用于将(长宽均为 2 的指数次幂的)图像文件如 PNG.TGA.BMP.JPG 等转换为 DDS 图像(DXT 压缩类型可选,DXT1~DXT5),也可将 DDS 图像转换回此几种格式图片. 截 ...

  8. video 播放

    视频播放是个坑... HTML5 Video API : https://www.w3.org/2010/05/video/mediaevents.html 虽然界面很丑,但是事件.属性很全. 进行视 ...

  9. 关于OJ1028的参考解法

    其中运用了最小公倍数与最大公约数乘积等于两数相乘的定理. #include <stdio.h> int main(int argc, char *argv[]) { int a,b,c,d ...

  10. UI进阶 跳转系统设置相关界面的方法

    跳转系统设置界面,例如提示用户打开定位.蓝牙或者WIFI,提醒用户打开推送或者位置权限等 在iOS6之后,第三方应用需要跳转系统设置界面,需要在URL type中添加一个prefs值,如下图: 跳转系 ...