jQuery 分割按钮(Split Button)
2014-02-01 16:25
375 查看
代码写多了,有些使用过的方法和技巧会一时半会想不起来,平日记录下来,方便自己和有需要的人日后查阅。
<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>
相关文章推荐
- 菜单和按钮-EasyUI Menu 菜单、EasyUI Linkbutton 链接按钮、EasyUI Menubutton 菜单按钮、EasyUI Splitbutton 分割按钮
- SplitButton( 分割按钮)
- jQuery EasyUI API 中文文档 - 分隔按钮(splitbutton)
- jQuery EasyUI API 中文文档 - 拆分按钮(SplitButton)
- jQuery EasyUI API 中文文档 - 拆分按钮(SplitButton)
- Jquery Easyui分割按钮组件SplitButton使用详解(17)
- jquery.validate 不用submit提交使用,button按钮提交前如何使用此插件验证
- jquery中当text文本框为空时,button按钮是disabled状态,否则为enable状态且输入框只能输入数字。
- jquery当鼠标移动到button按钮控件时,会出现提示信息
- CSplitButton按钮的使用
- JQuery 分割函数(split)的用法和定义
- jquery中当text文本框为空时,button按钮是disabled状态,否则为enable状态且输入框只能输入数字。并用alert显示第一个数字
- jQueryUI modal dialog does not show close button (x) JQueryUI和BootStrap混用时候,右上角关闭按钮显示不出图标的解决办法
- 【jQuery】:button表单按钮选择器
- jquery中当text文本框为空时,button按钮是disabled状态,否则为enable状态
- jquery easy ui 1.3.4 按钮(button)(6)
- JQuery Java split()的使用 将字符串分割成字符串数组
- jquery.validate不使用submit提交,而是使用button按钮提交,以及使用ajax验证用户名
- Jquery自定义button按钮的几种方法
- Jquery的Split二次分割