在sapui5中创建手风琴UI

Question

我必须在sapui5中创建相应的UI。如何在sapui5中创建手风琴类型列表？例如

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

Answer 1

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

https://openui5.hana.ondemand.com/explored.html#/sample/sap.m.sample.PanelExpanded/preview

2. 尝试HTML5细节/摘要，如果它符合您的需求（您可以在XML视图中嵌入HTML）

3. 您只需使用jQuery切换功能即可切换Div。

Answer 2

这是一个手风琴式解决方案，它可以互锁多个面板控件的扩展状态，此外还可以点击这些面板的标题（这使手风琴式处理更直观）。

Plunker演示：
https://embed.plnkr.co/TXXLm12UvlMKYm7biaWQ/

视图：

<mvc:View xmlns="sap.m" xmlns:f="sap.f" xmlns:mvc="sap.ui.core.mvc" xmlns:core="sap.ui.core" controllerName="demo.controller.Home" displayBlock="true" async="true">
  <Page id="homePage" title="Home">
    <List id="idList" items="{accordion>/accodata}">
      <items>
          <CustomListItem>
              <Panel expandable="true" expanded="{accordion>expanded}" expand="onPanelExpand">
                <headerToolbar>
                  <Toolbar active="true" press="onPanelToolbar">
                    <content>
                      <Text text="{accordion>title}" />
                    </content>
                  </Toolbar>
                </headerToolbar>
                <content>
                  <Text text="{accordion>content}" />
                </content>
              </Panel>
          </CustomListItem>
      </items>
    </List>
  </Page>
</mvc:View>

控制器：

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());
    }
  });
});