Question

我必须在sapui5中创建accordion UI。如何在sapui5中创建手风琴类型列表？ e.g。

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

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

Answer 1

您可以在以下链接中使用Panel控件。

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

如果符合您的需求，请尝试HTML5详情/摘要（您可以在XML视图中嵌入HTML）
您可以使用jQuery切换功能来切换Div。

Answer 2

这是一种手风琴解决方案，它将多个Panel控件的扩展状态联锁起来，另外还使这些Panel的标题可以点击（这使得手风琴处理更加直观）。

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

  });
});

在sapui5中创建手风琴UI

2 个答案: