tooltip提示框插件
- 1 渲染方式
- 2 属性
- 3 事件
- 4 方法
linkbutton按钮插件
- 21 渲染方式
- 22 属性
- 23 方法
progressbar进度条插件
- 1 渲染方式
- 2 属性
- 3 事件
- 4 方法

1. tooltip提示框插件

1.1 渲染方式

 class型

<a href="#" class="easyui-tooltip" title="这是a tip">hover me</a>

js型

<a href="javascript:void(0);" id="tooltipA" title="这是a tip">链接</a>
<script type="text/javascript">
$(function(){$('#tooltipA').tooltip({});
});
</script>

1.2 属性

可以通过$.fn.tooltip.defaults修改默认属性值如

//放在延迟加载外面
$.fn.tooltip.defaults.trackMouse = true;

tooltip工具的属性如

$('#tooltipA').tooltip({content:'<hr/>tooltip 提示信息',//默认为null，提示框内容，会覆盖标签的title属性值，可以包含html标签position:'left',//默认为'bottom'，可设为'left','right','top',如果显示不下会智能切换到其他方向显示trackMouse:true,//默认为false，设为true，提示框会跟随鼠标移动deltaX:-9,//默认为0，提示框水平方向偏移deltaY:-9,//默认为0，提示框垂直方向偏移showEvent:'mouseover',//默认为'mouseenter',提示框显示的激活事件hideEvent:'dblclick',//默认为'mouseleave',提示框隐藏的激活事件showDelay:10,//默认为200，显示的延迟毫秒数hideDelay:10,//默认为100，隐藏的延迟毫秒数});

1.3 事件

$(function(){$('#tooltipA').tooltip({onShow:function(e){console.log('提示框显示时触发');},onHide:function(e){console.log('提示框隐藏时触发');},onUpdate:function(content){console.log('提示框内容更新时触发，内容跟新为' + content);},onPosition:function(left,top){console.log('提示框位置改变时触发' +left + '|' + top );},onDestroy:function(){console.log('提示框被销毁时触发');}});$('#tooltipA').tooltip('show');//显示提示框$('#tooltipA').tooltip('hide');//隐藏提示框$('#tooltipA').tooltip('update','update方法更新的内容');$(document).click(function(){//$('#tooltipA').tooltip('reposition');$('#tooltipA').tooltip('destroy');});
});

1.4 方法

$(function(){$('#tooltipA').tooltip({trackMouse:false,onShow:function(e){console.log($('#tooltipA').tooltip('tip'));//返回tip元素对象,放在onShow方法里(提示框被创建后)才不会返回undefined.console.log($('#tooltipA').tooltip('arrow'));//返回箭头元素对象,放在onShow方法里(提示框被创建后)才不会返回undefined.$(this).tooltip('tip').css({backgroundColor: '#666',borderColor: '#666',left:500,//把trackMouse谁false后，设置提示框位置，下面用reposition方法重置提示框位置});},onHide:function(e){$('#tooltipA').tooltip('reposition');//重置提示框位置},onUpdate:function(content){console.log('提示框内容更新时触发，内容跟新为' + content);},onPosition:function(left,top){console.log('提示框位置改变时触发' +left + '|' + top );},onDestroy:function(){console.log('提示框被销毁时触发');}});console.log($('#tooltipA').tooltip('options'));//返回包含所有属性和事件的对象console.log($('#tooltipA').tooltip('tip'));//返回undefined$('#tooltipA').tooltip('show');//显示提示框$('#tooltipA').tooltip('hide');//隐藏提示框$('#tooltipA').tooltip('update','update方法更新的内容');//更新提示框内容$(document).click(function(){$('#tooltipA').tooltip('destroy');//销毁提示框});
});

2. linkbutton按钮插件

2.1 渲染方式

class型

<a id="AA" href="###" class="easyui-linkbutton" data-options="iconCls:'icon-edit',iconAlign:'right'" title="这是a tip">class型按钮</a>

js型

<a id="linkbuttonA" href="###">js渲染型按钮</a>
<script type="text/javascript">$(function(){$('#linkbuttonA').linkbutton({});});
</script>

2.2 属性

可以通过$.fn.linkbutton.defaults修改默认属性值如

//放在延迟加载外面
$.fn.linkbutton.defaults.iconCls = 'icon-mini-add';

linkbutton插件的属性如

<a id="linkbuttonBA" href="###">js渲染型按钮</a>
<a id="linkbuttonBC" href="###" class="easyui-linkbutton" data-options="group:'radiogroup',toggle:true">class型按钮</a>
<script type="text/javascript">
$(function(){$('#linkbuttonBA').linkbutton({id:'linkbuttonBC',//默认为nulldisabled:false, //默认为false，true时禁用toggle:true, //默认为false，true时类似checkboxselected:true,//默认为false，true时为已选中group:'radiogroup',//默认为null，需toggle为true设置，设置后类似radio,plain:true,//默认为false，设置后按钮样式为简单效果text:'新的按钮文本',//默认为''iconCls:'icon-search',//默认为null,设置按钮16x16的图标iconAlign:'right',//默认为'left',图标的位置，可设为'right'});
});
</script>

2.3 方法


<script type="text/javascript">$(function(){$('#linkbuttonBE').linkbutton({});console.log($('#linkbuttonBE').linkbutton('options'));//返回包含所有属性和事件的对象$('#linkbuttonBE').linkbutton('disable');//禁用按钮$('#linkbuttonBE').linkbutton('enable');//启用按钮$('#linkbuttonBE').linkbutton('select');//选择按钮$('#linkbuttonBE').linkbutton('unselect');//取消选择按钮 });
</script>

3. progressbar进度条插件

3.1 渲染方式

class型

  <div class="easyui-progressbar" data-options="value:60" style="width:600px;">class型进度条</div>

js型

<div id="progressbarBox"></div>
<script type="text/javascript">$(function(){$('#progressbarBox').progressbar({value:60,width:'50%'});});
</script>

3.2 属性

可以通过$.fn.progressbar.defaults修改默认属性值如

$.fn.progressbar.defaults.height= '68px';//放在延迟加载外面

$(function(){$('#progressbarBox').progressbar({value : 60,//进度条值，默认为0，精度条满为100width:'50%',//进度条宽度，默认为'auto',可为字符串或数值height:'48px',//进度条高，默认为22，可为字符串或数值text:'{value}/100',//进度条百分比模板，默认为'{value}%'});
});

3.3 事件

$(function(){$('#progressbarBox').progressbar({value:30,onChange:function(newValue,oldValue){//值改变时触发console.log('newValue---->' + newValue + ',oldValue---->'+ oldValue);}});setTimeout(function(){$('#progressbarBox').progressbar('setValue',80);},1000);
});

3.4 方法

console.log($('#progressbarBox').progressbar('options'));//返回所有属性和事件setTimeout(function(){$('#progressbarBox').progressbar('resize',500);//设置插件的长度
},1000);var itv = setInterval(function(){var v = $('#progressbarBox').progressbar('getValue'); //获取进度值$('#progressbarBox').progressbar('setValue', v + 9);//设置进度值if(v + 9 >= 100){clearInterval(itv);}console.log('我还在继续');
},500);

04.tooltip提示框插件，linkbutton按钮插件与progressbar进度条插件相关推荐

Process插件：typecho加载页面进度条插件
介绍: typecho加载页面进度条插件这是一款适用于typecho任何主题的加载页面进度条,可以让你的博客加载时显得更加顺滑而不会显得过于突兀,使用本插件可以很好得起到视觉缓冲的作用. 本插件有十 ...
Echart遇到的问题：tooltip提示框大小异常
Echart遇到的问题:tooltip提示框大小异常参考文章: (1)Echart遇到的问题:tooltip提示框大小异常 (2)https://www.cnblogs.com/wyhluckdog ...
echarts中tooltip提示框位置控制
关键代码: position: function(point, params, dom, rect, size) {//其中point为当前鼠标的位置,size中有两个属性:viewSize和cont ...
Echarts数据可视化tooltip提示框，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
echarts 地图tooltip提示框超出浏览器窗口怎么隐藏？
echarts tooltip提示框超出浏览器窗口怎么隐藏? 在使用echarts做图时,发现tooltip默认会超出浏览器窗口外,刚开始想做边境检测,试着写了一些代码发现太麻烦了,需要上下左右做多次 ...
html input tooltip,BootStrap tooltip提示框使用小结
提示框提示框的基本使用方式为: test message data-original-title可以直接写为title,仍然能正常使用,源码中优先查找前者,前者不存在就会查找title 提示框不提供 ...
html 原生 tooltip,原生js实现tooltip提示框的效果
在js的世界里面,每一个小的特效都那么微不足道,却又那么的令人向往与好奇.前端工程师的任务特别高大上,因为他们的一个小小的设计就会激发别人的求知欲.比如说我,只是随机一瞟,便看到了这个tooltip的 ...
echarts隐藏掉一条曲线，并且tooltip提示框中不显示
echarts隐藏掉一条曲线,并且tooltip提示框中不显示两步走: 1.隐藏掉一条曲线 series: [{name: '...',type: 'line',symbolSize: 0, // ...
get几个小技能：轮播图插件、进度条插件、筛选过滤插件
最近参加了一个网页设计大赛,趁这个机会做了一个个人简历的网页:点击欣赏用到了许多有趣的东西们今天分享一下. 轮播图插件 Swiper轮播图插件 Swiper 的结构和基础原理 Swiper 的每个展 ...

04.tooltip提示框插件，linkbutton按钮插件与progressbar进度条插件

1. tooltip提示框插件

1.1 渲染方式

1.2 属性

1.3 事件

1.4 方法

2. linkbutton按钮插件

2.1 渲染方式

2.2 属性

2.3 方法

3. progressbar进度条插件

3.1 渲染方式

3.2 属性

3.3 事件

3.4 方法

04.tooltip提示框插件，linkbutton按钮插件与progressbar进度条插件相关推荐

最新文章

热门文章