SAP UI5中具有自定义值的范围滑块

2020-08-21 22:55发布

点击此处---> 群内免费提供SAP练习系统(在群公告中)加入QQ群:457200227(SAP S4 HANA技术交流) 群内免费提供SAP练习系统(在群公告中)嗨 我需要在SAP UI5中实...

         点击此处--->   EasySAP.com群内免费提供SAP练习系统(在群公告中)

加入QQ群:457200227(SAP S4 HANA技术交流) 群内免费提供SAP练习系统(在群公告中)


我需要在SAP UI5中实现日期范围滑块。 但是由于不推荐使用,并且建议的替代方法是 Range Slider ,因此我们尝试使用 Range Slider 过滤器/选择日期内容。 但是,我没有在UI5样本/API参考中找到任何选项来在滑块上显示自定义值(例如7月1日等)。

针对同一内容存在一个fiori准则- https://experience.sap.com/fiori-design-web/range-slider/#custom-values 。 但是没有任何UI5示例可以实现它。

-随附的是我需要使用Range Slider实现的UX的屏​​幕截图

请建议

(5.1 kB)
6条回答
宇峰Kouji
2020-08-21 23:23 .采纳回答

有几种方法可以做到这一点。 这是一个

 sap.ui.define([" sap/m/RangeSlider",
                " sap/m/ResponsiveScale",
                " sap/ui/model/json/JSONModel"
 ],函数(RangeSlider,ResponsiveScale,JSONModel){


   var oRangeSlider = new RangeSlider({
     max:" {ticks>/max}",
     min:" {ticks>/min}",
     value2:" {ticks>/value2}",
     值:" {ticks>/value1}",
     enableTickmarks:是的,
     规模:新的ResponsiveScale({
       刻度标记之间的标签:1
     })
   });
   oRangeSlider.addDelegate({
     onAfterRendering:function(){
       var $ this = this。$();
       var month = this.getModel(" ticks")。getProperty("/img/month");
       $ this.find("。sapMSliderLabel")。each(function(i,label){
         var v = $(label).text();
         $(label).text(month +"-" + v);
       });
     }
   },oRangeSlider);
  
   oRangeSlider.setModel(new JSONModel({
     最多:10,
     最小值:1
     月:"七月",
     值1:2
     值2:5
   }),"滴答声");
   oRangeSlider.placeAt(" content");
 });
 

https://jsbin.com/wopurip/edit?js,output

谢谢

丹尼斯

一周热门 更多>