在sapui5中创建手风琴用户界面

我必须在sapui5中创建手风琴用户界面。如何在sapui5中创建手风琴类型列表？e、 g

<http://codepen.io/css-tricks/full/LufJE>

<http://jqueryui.com/accordion/>

您可以在以下链接中使用面板控件

如果HTML5细节/摘要适合您的需要，请尝试使用它（您可以在XML视图中嵌入HTML）

您只需使用jquerytoggle函数来切换div

---

这是一个手风琴解决方案，它联锁了多个面板控件的扩展状态，并使这些面板的标题可单击（这使手风琴处理更直观）

Plunker演示：

视图：

控制器：

sap.ui.define([
  "sap/ui/core/mvc/Controller"
], function(Controller) {
  "use strict";

  return Controller.extend("demo.controller.Home", {
    onInit: function() {

      var oMyModel = new sap.ui.model.json.JSONModel({
          accodata: [{
            expanded: false,
            title: 'Title A',
            content: 'Content AAA'
          }, {
            expanded: true,
            title: 'Title B (expanded on init)',
            content: 'Content BBB'
          }, {
            expanded: false,
            title: 'Title C',
            content: 'Content CCC'
          }, {
            expanded: false,
            title: 'Title D',
            content: 'Content DDD'
          }]
        }

      );
      this.getView().setModel(oMyModel, "accordion");

    },


    onPanelExpand: function(oEvent) {
      if (oEvent.getParameters().expand) {
        var oModel = this.getView().getModel("accordion");
        var aPath = oEvent.getSource().getBindingContext("accordion").getPath().split("/");
        var selectedIndex = +aPath[aPath.length - 1];
        var aAccordion = oModel.getProperty("/accodata");
        for (var i = 0; i < aAccordion.length; i++) {
          if (i !== selectedIndex) {
            aAccordion[i].expanded = false;
          }
        }
        oModel.updateBindings();
      }
    },

    onPanelToolbar: function(oEvent) {
      var oPanel = oEvent.getSource().getParent();
      oPanel.setExpanded(!oPanel.getExpanded());
    }

  });
});

sap.ui.define([
“sap/ui/core/mvc/Controller”
]，功能（控制器）{
“严格使用”；
返回Controller.extend（“demo.Controller.Home”{
onInit:function（）{
var mymodel=new sap.ui.model.json.JSONModel({
会计数据：[{
扩展：错，
标题：“标题A”，
内容：“内容AAA”
}, {
对,，
标题：“标题B（初始扩展）”，
内容：“内容BBB”
}, {
扩展：错，
标题：“标题C”，
内容：“内容CCC”
}, {
扩展：错，
标题：“标题D”，
内容：“内容DDD”
}]
}
);
this.getView（）.setModel（myModel，“accordion”）；
},
onPanelExpand:函数（oEvent）{
if（oEvent.getParameters（）.expand）{
var oModel=this.getView（）.getModel（“accordion”）；
var aPath=oEvent.getSource（）.getBindingContext（“accordion”）.getPath（）.split（“/”）；
var selectedIndex=+aPath[aPath.length-1]；
var aAccordion=oModel.getProperty（“/acodata”）；
对于（变量i=0；i

sap.ui.define([
  "sap/ui/core/mvc/Controller"
], function(Controller) {
  "use strict";

  return Controller.extend("demo.controller.Home", {
    onInit: function() {

      var oMyModel = new sap.ui.model.json.JSONModel({
          accodata: [{
            expanded: false,
            title: 'Title A',
            content: 'Content AAA'
          }, {
            expanded: true,
            title: 'Title B (expanded on init)',
            content: 'Content BBB'
          }, {
            expanded: false,
            title: 'Title C',
            content: 'Content CCC'
          }, {
            expanded: false,
            title: 'Title D',
            content: 'Content DDD'
          }]
        }

      );
      this.getView().setModel(oMyModel, "accordion");

    },


    onPanelExpand: function(oEvent) {
      if (oEvent.getParameters().expand) {
        var oModel = this.getView().getModel("accordion");
        var aPath = oEvent.getSource().getBindingContext("accordion").getPath().split("/");
        var selectedIndex = +aPath[aPath.length - 1];
        var aAccordion = oModel.getProperty("/accodata");
        for (var i = 0; i < aAccordion.length; i++) {
          if (i !== selectedIndex) {
            aAccordion[i].expanded = false;
          }
        }
        oModel.updateBindings();
      }
    },

    onPanelToolbar: function(oEvent) {
      var oPanel = oEvent.getSource().getParent();
      oPanel.setExpanded(!oPanel.getExpanded());
    }

  });
});