jQuery EasyUI 为Combo,Combobox添加清除值功能
来源:互联网 发布:新浪微博pv和uv数据 编辑:程序博客网 时间:2024/06/05 03:35
效果图:
图标
- (function($){
- //初始化清除按钮
- function initClear(target){
- var jq = $(target);
- var opts = jq.data('combo').options;
- var combo = jq.data('combo').combo;
- var arrow = combo.find('span.combo-arrow');
- var clear = arrow.siblings("span.combo-clear");
- if(clear.size()==0){
- //创建清除按钮。
- clear = $('<span class="combo-clear" style="height: 20px;"></span>');
- //清除按钮添加悬停效果。
- clear.unbind("mouseenter.combo mouseleave.combo").bind("mouseenter.combo mouseleave.combo",
- function(event){
- var isEnter = event.type=="mouseenter";
- clear[isEnter ? 'addClass' : 'removeClass']("combo-clear-hover");
- }
- );
- //清除按钮添加点击事件,清除当前选中值及隐藏选择面板。
- clear.unbind("click.combo").bind("click.combo",function(){
- jq.combo("setValue","").combo("setText","");
- jq.combo('hidePanel');
- });
- arrow.before(clear);
- };
- var input = combo.find("input.combo-text");
- input.outerWidth(input.outerWidth()-clear.outerWidth());
- opts.initClear = true;//已进行清除按钮初始化。
- }
- //扩展easyui combo添加清除当前值。
- var oldResize = $.fn.combo.methods.resize;
- $.extend($.fn.combo.methods,{
- initClear:function(jq){
- return jq.each(function(){
- initClear(this);
- });
- },
- resize:function(jq){
- //调用默认combo resize方法。
- var returnValue = oldResize.apply(this,arguments);
- var opts = jq.data("combo").options;
- if(opts.initClear){
- jq.combo("initClear",jq);
- }
- return returnValue;
- }
- });
- }(jQuery));
- html代码
- <select id="myselect" panelHeight="auto" style="width: 102px;" editable="true" name="itcast">
- <option value="0">成都</option>
- <option value="1">传智播客</option>
- <option value="2">姚欣</option>
- <option value="3">小星星</option>
- </select>
- js代码
- $('#myselect').combobox({
- required : true,
- editable : false
- }).combobox("initClear");
- css样式
- .combo-clear {
- background-color: #E0ECFF;
- width: 18px;
- height: 20px;
- overflow: hidden;
- display: inline-block;
- vertical-align: top;
- cursor: pointer;
- opacity: 0.6;
- filter: alpha(opacity=60);
- background: url('images/combo_clear.png') no-repeat center center;
- }
- .combo-clear-hover {
- opacity: 1.0;
- filter: alpha(opacity=100);
- background-color: #eaf2ff;
- }
0 0
- jQuery EasyUI 为Combo,Combobox添加清除值功能
- jQuery EasyUI 为Combo,Combobox添加清除值功能
- jQuery EasyUI 为Combo,Combobox添加清除值功能
- jQuery EasyUI 为Combo,Combobox 学习记录
- easyui combobox添加清除选项按钮
- JQuery EasyUI combobox动态添加option
- JQuery EasyUI combobox动态添加option
- JQuery EasyUI combobox动态添加option
- JQuery EasyUI combobox动态添加option
- JQuery EasyUI combobox动态添加option
- 为easyui combobox添加默认选项
- 为jQuery-easyui的tab组件添加右键菜单功能
- easyui 为所有的 combobox增加清除按钮
- 为ComboBox 添加去掉重复项功能
- 为ComboBox 添加去掉重复项功能
- 【jQuery easyUI】jQuery 获取easyUI combobox选中的值
- jquery 获取easyui combobox选中的值
- jquery 获取easyui combobox选中的值
- 搜索自己博客中的文章
- iOS 通过16进制计算颜色
- 青光眼的原因与青光眼治疗
- FPGA设计--数字的表示形式(代码+波形图)
- 抓取dump的头文件
- jQuery EasyUI 为Combo,Combobox添加清除值功能
- AWR
- exp指数实现
- 框架学习七-1:ViewPager+Fragment之Fragment介绍
- leetcode - Unique Paths II
- eclipse开两个控制台分别打印两个进程的输出
- Search Insert Position
- 总弹出Visual Studio实时调试器的问题
- 关于Java两种同步方法的理解(代码块级同步对象设置)