jQuery 分割按钮(Split Button)
代码写多了,有些使用过的方法和技巧会一时半会想不起来,平日记录下来,方便自己和有需要的人日后查阅。
<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)的更多相关文章
- 第二百零八节,jQuery EasyUI,SplitButton(分割按钮菜单)组件
jQuery EasyUI,SplitButton(分割按钮)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解 EasyUI 中 SplitButton(分割按钮)组件的使用 ...
- easyui源码翻译1.32--SplitButton(分割按钮)
前言 扩展自$.fn.linkbutton.defaults.用于$.fn.splitbutton.defaults重写默认值对象.下载该插件翻译源码 类似菜单按钮,分割按钮也与linkbutton和 ...
- JQuery 分割字符串
JQuery 分割字符串 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- MFC控件(7):Split Button
VS2008中可以看到MFC有一个叫Split Button的控件,要想看它的效果,瞧下QQ那聊天窗口的"发送", "消息记录"这两个按钮就知道了.实际上就是还 ...
- (三)Jquery Mobile按钮详细讲解
Jquery Mobile按钮详细讲解 一.JM按钮说明 按钮如下图所示 1.HTML5中的button 效果: 2. JM中的普通button ...
- jquery倒计时按钮常用于验证码倒计时
<!doctype html><html><head> <meta charset="utf-8"> <title>jq ...
- 菜单和按钮-EasyUI Menu 菜单、EasyUI Linkbutton 链接按钮、EasyUI Menubutton 菜单按钮、EasyUI Splitbutton 分割按钮
EasyUI Menu 菜单 通过 $.fn.menu.defaults 重写默认的 defaults. 菜单(Menu)通常用于上下文菜单.它是创建其他菜单组件(比如:menubutton.spli ...
- 主攻ASP.NET MVC4.0之重生:Jquery Mobile 按钮+对话框使用
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- Bootstrap 历练实例 - 按钮(Button)插件复选框
复选框(Checkbox) 您可以创建复选框按钮 组,并通过向 btn-group 添加 data 属性 data-toggle="buttons" 来添加复选框按钮组的切换. & ...
随机推荐
- UART RS232 的CTS与RTS
目前较为常用的串口有9针串口(DB9)和25针串口(DB25),通信距离较近时(<12m),可以用电缆线直接连接标准RS232端口(RS422,RS485较远),若距离较远,需附加调制解调器(M ...
- VC的UNICODE 编程
简介 如果你编写的程序是针对非英语国家的用户,如中国.日本.东欧和中东地区,那么你一定要熟悉 UNICODE 字符集.尤其是用 Visual C++/MFC 编写针对上述国家和地区的用户的程序时,如果 ...
- POJ1008 1013 1207 2105 2499(全部水题)
做了一天水题,挑几个还算凑合的发上来. POJ1008 Maya Calendar 分析: #include <iostream> #include <cstdio> #inc ...
- COJ 3016 WZJ的图论问题
传送门:http://oj.cnuschool.org.cn/oj/home/problem.htm?problemID=1046 试题描述: WZJ又有一个问题想问问大家.WZJ用数据生成器生成了一 ...
- BZOJ2324: [ZJOI2011]营救皮卡丘
2324: [ZJOI2011]营救皮卡丘 Time Limit: 10 Sec Memory Limit: 256 MBSubmit: 1359 Solved: 522[Submit][Stat ...
- unittest笔记
学习资料: 官网: https://docs.python.org/2.7/library/unittest.html IBM Python自动单元测试框架: http://www.ibm.com/d ...
- H1B工作签证紧俏 “中签率”低对中国留学生影响大-中新网
H1B工作签证紧俏 "中签率"低对中国留学生影响大-中新网 H1B工作签证紧俏 "中签率"低对中国留学生影响大
- RMAN-00554: initialization of internal recovery manager package failed RMAN-04005
[oracle@rac11g1 ~]$ rman target haha/haha@rac11g Recovery Manager: Release 11.2.0.3.0 - Production o ...
- OpenRisc-41-or1200的cache模块分析
引言 为CPU提供足够的,稳定的指令流和数据流是计算机体系结构设计中两个永恒的话题.为了给CPU提供指令流,需要设计分支预测机构,为了给CPU提供数据流,就需要设计cache了.其实,无论是insn还 ...
- Microsoft Dynamics CRM4.0编程---说明
Introduction(说明) If your organization has customers, you need a software system to help you manage y ...