代码写多了，有些使用过的方法和技巧会一时半会想不起来，平日记录下来，方便自己和有需要的人日后查阅。

<html>

<head>

    <style type="text/css">

        div.searchButton

        {

            width: 68px;

            height: 24px;

            border: 1px solid #a8a8a8;

            font-family: 微软雅黑;

            color: #585959;

            font-size: 12px;

            line-height: 24px;

            text-align: center;

            cursor: pointer;

            float: left;

        }

        div.menuButton

        {

            width: 18px;

            height: 24px;

            border: 1px solid #a8a8a8;

            text-align: center;

            line-height: 24px;

            cursor: pointer;

            color: #d0d0d0;

            float: left;

            margin-left: 1px;

            font-size: 12px;

        }

        div.menuButton:hover

        {

            color: #000000;

        }

        div.menuButton.openMenuPanel

        {

            color: Orange;

        }

        div.menuPanel

        {

            width: 140px;

            height: 80px;

            border: 1px solid #a8a8a8;

            background-color: #ffffff;

            clear: both;

        }

        div.menuPanel div

        {

            width: 140px;

            height: 39px;

            font-family: 微软雅黑;

            color: #585959;

            font-size: 18px;

            line-height: 40px;

            text-align: center;

            border-bottom: 1px solid #a8a8a8;

            cursor: pointer;

        }

        div.menuPanel div:hover

        {

            background-color: #f1f1f1;

        }

        div.menuPanel div:last-child

        {

            border-bottom: none;

            height: 40px;

        }

    </style>

    <!-- 此处请引用jQuery和jQuery-ui库 -->

    <script type="text/javascript">

        $(function () {

            $('.menuButton').click(function () {

                $(this).addClass('openMenuPanel');

                $('.menuPanel').show();

                $(document).one('click', function () {

                    $('.menuPanel').hide();

                    $('.menuButton').removeClass('openMenuPanel');

                });

                return false;

            }).next().position({

                my: 'left top',

                at: 'left bottom',

                of: '.searchButton'

            }).hide();

            $('.menuPanel').children('div').click(function () {

                $('.searchButton').html($.trim($(this).html()));

            });

        });

    </script>

</head>

<body>

    <div class="searchButton">

        选项-1

    </div>

    <div class="menuButton">

        ▼

    </div>

    <div class="menuPanel">

        <div>

            选项-1

        </div>

        <div>

            选项-2

        </div>

    </div>

</body>

</html>

jQuery 分割按钮（Split Button）的更多相关文章

  1. 第二百零八节，jQuery EasyUI，SplitButton(分割按钮菜单)组件

    jQuery EasyUI,SplitButton(分割按钮)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解 EasyUI 中 SplitButton(分割按钮)组件的使用 ...

  2. easyui源码翻译1.32--SplitButton（分割按钮）

    前言 扩展自$.fn.linkbutton.defaults.用于$.fn.splitbutton.defaults重写默认值对象.下载该插件翻译源码 类似菜单按钮,分割按钮也与linkbutton和 ...

  3. JQuery 分割字符串

    JQuery 分割字符串 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  4. MFC控件(7):Split Button

    VS2008中可以看到MFC有一个叫Split Button的控件,要想看它的效果,瞧下QQ那聊天窗口的"发送", "消息记录"这两个按钮就知道了.实际上就是还 ...

  5. （三）Jquery Mobile按钮详细讲解

    Jquery Mobile按钮详细讲解 一.JM按钮说明 按钮如下图所示           1.HTML5中的button      效果:      2. JM中的普通button        ...

  6. jquery倒计时按钮常用于验证码倒计时

    <!doctype html><html><head> <meta charset="utf-8"> <title>jq ...

  7. 菜单和按钮-EasyUI Menu 菜单、EasyUI Linkbutton 链接按钮、EasyUI Menubutton 菜单按钮、EasyUI Splitbutton 分割按钮

    EasyUI Menu 菜单 通过 $.fn.menu.defaults 重写默认的 defaults. 菜单(Menu)通常用于上下文菜单.它是创建其他菜单组件(比如:menubutton.spli ...

  8. 主攻ASP.NET MVC4.0之重生:Jquery Mobile 按钮+对话框使用

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. Bootstrap 历练实例 - 按钮（Button）插件复选框

    复选框(Checkbox) 您可以创建复选框按钮 组,并通过向 btn-group 添加 data 属性 data-toggle="buttons" 来添加复选框按钮组的切换. & ...

随机推荐

  1. C51 库函数(1)

    C-51软件包的库包含标准的应用程序,每个函数都在相应的头文件(.h)中有原型声明.如果使用库函数,必须在源程序中用预编译指令定义与该函数相关的头文件(包含了该函数的原型声明).例如: #includ ...

  2. 【HDOJ】1274 展开字符串

    栈的应用,需要注意括号前可能没有数字的情况. #include <cstdio> #include <cstring> #include <cstdlib> #in ...

  3. COJ 0581 4022农夫喂牛

    4022农夫喂牛 难度级别:D: 运行时间限制:1000ms: 运行空间限制:51200KB: 代码长度限制:2000000B 试题描述 农夫老张养了N头牛,编号分别从1到N.现在,它们要“用餐”,按 ...

  4. BZOJ 1028 [JSOI2007]麻将

    1028: [JSOI2007]麻将 Time Limit: 1 Sec  Memory Limit: 162 MBSubmit: 1270  Solved: 576[Submit][Status][ ...

  5. 舶来品P2P理财 能否成为“好声音”式好生意？ 转

    华股财经 2012年11月29日 10:20:02 来源:互联网 字号:T|T   文/本刊记者 王奇 有数据显示,目前国内已有2000余家P2P公司,2007年至2011年上半年,其整体融资规模由2 ...

  6. 用Visual Studio创建集成了gtest的命令行工程

    gtest代码库中的sample代码 在gtest的代码库中,包含了10个sample的代码,覆盖了gtest的常见用法,sample的代码位于以下文件夹: gtest\samples 由于gtest ...

  7. Hive学习笔记【转载】

    本文转载自:http://blog.csdn.net/haojun186/article/details/7977565 1.  HIVE结构 Hive 是建立在 Hadoop 上的数据仓库基础构架. ...

  8. hyperv虚拟机网络速度慢问题的解决办法

    服务器安装了windows2012R2进行虚拟化,虚拟机也是用的是windows2012R2的操作系统,这样可以一次激活对应的虚拟机. 在使用虚拟机的过程中发现问题,虚拟机主机的网速正常,无论是ftp ...

  9. WIN8.1 PROBLEMS 01

    win8装好后右下角显示secureboot未正确配置桌面会显示“Windows 8.1 Secure Boot未正确配置”的水印问题: 安全启动(Secure Boot)可以阻止未授权软件的运行,提 ...

  10. 1000 A+B [ACM刷题]

    这一段时间一直都在刷OJ,这里建一个博客合集,用以记录和分享算法学习的进程. github传送门:https://github.com/haoyuanliu/Online_Judge/tree/mas ...