在openui5中向tabstrip添加自定义转换

通过将以下CSS添加到应用程序中,您可以轻松实现幻灯片效果

@keyframes slidein {
  from { 
    right: -100%; 
  }
  to {  
    right: -6px; 
  }
}
.sapUiTabPanel {
  overflow:hidden;  
}
.sapUiTabPanel > * { 
  animation: slidein 500ms; 
  position: absolute;  
}

请注意,根据您支持的浏览器,您可能需要添加带有供应商前缀的CSS。

要实现当前显示的选项卡的滑出有些棘手,一种可能的实现方法是将以下代码添加到控制器的onInit方法中

oTabStrip1.attachBrowserEvent("mousedown",function(oEvent){
  var oTarget = oEvent.target;
  if(oTarget.className==="sapUiTabClose"){
    return;
  }
  var iIdx = oTabStrip1.getItemIndex(oTarget);
  if (iIdx > -1) {
    if ((iIdx !== oTabStrip1.getSelectedIndex()) && (oTabStrip1.getTabs()[iIdx].getEnabled())) {
      oEvent.stopPropagation();
      oEvent.preventDefault();
      jQuery.each(
      oTabStrip1.getTabs()[oTabStrip1.getSelectedIndex()].getContent(),function(i,o){
        var sAnimateLeft = (o.$().innerWidth() * -1) + "px";
        o.$().animate({left:sAnimateLeft},500);
      });
      setTimeout(function(){
        oTabStrip1.selectTabByDomRef(oTarget);
      },250);

    }
  }
});

上面假设oTabStrip1是tabstrip控件的实例。虽然直接在UI5应用程序中修改DOM通常不是一个好的做法,但在这种情况下,可能是安全的,因为显示的选项卡的内容被删除,并替换为单击的选项卡内容,所以我们所做的只是将此延迟到滑出动画完成为止。

您可以在中看到一个工作示例 http://jsbin.com/vukibi -代码直接取自 tabstrip example 添加了上述CSS和JS