javascript – 总是在Extjs中显示Slider的提示文本

前端之家收集整理的这篇文章主要介绍了javascript – 总是在Extjs中显示Slider的提示文本前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
在Extjs 4.1.1a中,如何保持滑块的提示文本始终可见?

目前,当用户拖动滑块的条时,提示文本是可见的.
我在docs搜索,但找不到任何相关的概念.

如果没有记录或不可能,请说明如何手动创建提示文本.尖端文本应沿滑块的杆移动,不应克服或隐藏任何其他相邻的部件.

这是我的代码,它生成一个简单的滑块:

  1. xtype:'slider',cls: 'sliderStyle',width: "80%",id: 'slider',value: 6,minValue: 1,maxValue: 12,useTips: true,tipText: function(thumb){
  2. var months = ['','Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
  3. var value = Ext.String.format(months[thumb.value]);
  4. return value;
  5. },

问题2:在滑块上悬停时,是否至少可以显示提示文本?

PS:我也问了同样的问题here.

编辑1:我还用两个相邻的按钮(&)移动滑块的搜索栏.所以,必须注意,如果我用相邻的按钮移动搜索条,则提示文本也应该移动.

编辑2:当滑块或相邻按钮上悬停时,提示文本应该可见.

答:http://jsfiddle.net/WdjZn/1/

@H_502_21@

解决方法

我通过覆盖Ext.slider.Tip中的一些事件处理程序来保持提示可见:
  1. Ext.define('AlwaysVisibleTip',{
  2. extend: 'Ext.slider.Tip',init: function(slider) {
  3. var me = this;
  4. me.callParent(arguments);
  5. slider.removeListener('dragend',me.hide);
  6. slider.on({
  7. scope: me,change: me.onSlide,afterrender: function() {
  8. setTimeout(function() {
  9. me.onSlide(slider,null,slider.thumbs[0]);
  10. },100);
  11. }
  12. });
  13. }
  14. });
  15.  
  16. Ext.create('Ext.slider.Single',{
  17. animate: false,plugins: [Ext.create('AlwaysVisibleTip')],// ...
  18. });

查看demo.

我的方法的缺点:

它依赖于onSlide的私有方法
>仅适用于单个滑块
>只有当animate设置为false时,键盘导航才能正常工作
> setTimeout用于调整提示的初始位置

解决这个缺点将需要黑客攻击不仅Ext.slider.Tip类,而且Ext.slider.Multy类和Ext.slider.Thumb类.

编辑

当使用slider.setValue()被调用时,将changecomplete事件替换为changecomplete更改事件不会触发.

添加demo的滑块与相邻的按钮.

EDIT2

如果使用自定义提示插件,tipText配置将不再应用.你必须使用getText配置的插件

  1. Ext.create('Ext.slider.Single',plugins: [Ext.create('AlwaysVisibleTip',{
  2. getText: function(thumb) {
  3. var months = ['','Dec'];
  4. return Ext.String.format(months[thumb.value]);
  5. }
  6. })],// ...
  7. });

更新了demo.

@H_502_21@ @H_502_21@

猜你在找的JavaScript相关文章