Monaca Onsen UI で開閉式のコンテンツを実現したい

投稿者: Anonymous

jQuery Mobile で作成したコンテンツを、Onsen UI に移植する作業を行っています。

jQuery Mobile 側で「開閉式のコンテンツ」

<div data-role="collapsible">

の部分があるので、これを Onsen UI で実現したいと思います。

Onsen UI のコンポーネント一覧を探したところ、どんぴしゃのコンポーネントを見つけることができませんでした。

「このコンポーネントでできるよ」とか「コンポーネントはないよ、JQuery とかでやってね」というヒントだけでもいただければ、と思います。

よろしくお願い致します。

[ jQuery Mobile のサンプル]

<div data-role="collapsible">

<h3>ほげほげ</h3>

<p>ぴよぴよ</p>

</div>

解決

アコーディオン風にでしたら、下記が参考になると思います。
http://codepen.io/onsen/pen/vjlsF

_x000D_

_x000D_

// ons.bootstrap();_x000D_
angular.module('myApp', ['onsen', 'ngAnimate']).controller('MyCtrl', function($scope) {_x000D_
  $scope.groups = [];_x000D_
  for (var i = 0; i < 10; i++) {_x000D_
    $scope.groups[i] = {_x000D_
      name: i,_x000D_
      items: []_x000D_
    };_x000D_
    for (var j = 0; j < 3; j++) {_x000D_
      $scope.groups[i].items.push(i + '-' + j);_x000D_
    }_x000D_
  }_x000D_
_x000D_
  /*_x000D_
   * if given group is the selected group, deselect it_x000D_
   * else, select the given group_x000D_
   */_x000D_
  $scope.toggleGroup = function(group) {_x000D_
    if ($scope.isGroupShown(group)) {_x000D_
      $scope.shownGroup = null;_x000D_
    } else {_x000D_
      $scope.shownGroup = group;_x000D_
    }_x000D_
  };_x000D_
  $scope.isGroupShown = function(group) {_x000D_
    return $scope.shownGroup === group;_x000D_
  };_x000D_
_x000D_
});

_x000D_

.list__item {_x000D_
  min-height: 0px;_x000D_
}_x000D_
_x000D_
.item-accordion {_x000D_
  line-height: 37px;_x000D_
  padding-top: 0;_x000D_
  padding-bottom: 0;_x000D_
  transition: 0.07s all linear;_x000D_
}_x000D_
_x000D_
.item-accordion.ng-hide {_x000D_
  line-height: 0px;_x000D_
}_x000D_
_x000D_
.item-accordion.ng-hide-add,_x000D_
.item-accordion.ng-hide-remove {_x000D_
  display: block !important;_x000D_
}_x000D_
_x000D_
.title {_x000D_
  background: #F5F5F5;_x000D_
}_x000D_
_x000D_
.active {_x000D_
  background: #EFEFEF;_x000D_
}

_x000D_

<link rel="stylesheet" href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.11/build/css/onsenui.css">_x000D_
<link rel="stylesheet" href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.11/build/css/onsen-css-components.css">_x000D_
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.11/build/js/angular/angular.min.js"></script>_x000D_
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.11/build/js/onsenui.min.js"></script>_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>_x000D_
<html ng-app="myApp">_x000D_
<ons-navigator title="Navigator" var="myNavigator">_x000D_
  <ons-page>_x000D_
    <ons-toolbar>_x000D_
      <div class="center">List + Accordion</div>_x000D_
    </ons-toolbar>_x000D_
    <br>_x000D_
_x000D_
    <ons-list ng-controller="MyCtrl">_x000D_
      <div ng-repeat="group in groups">_x000D_
        <ons-list-item ng-click="toggleGroup(group)" class="title" ng-class="{active:isGroupShown(group)}">_x000D_
          <ons-icon icon="minus-square-o" ng-if="isGroupShown(group)"></ons-icon>_x000D_
          <ons-icon icon="plus-square-o" ng-if="!isGroupShown(group)"></ons-icon>_x000D_
          Group {{group.name}}_x000D_
        </ons-list-item>_x000D_
        <ons-list-item class="item-accordion" ng-repeat="item in group.items" ng-show="isGroupShown(group)">_x000D_
          {{item}}_x000D_
        </ons-list-item>_x000D_
      </div>_x000D_
    </ons-list>_x000D_
  </ons-page>_x000D_
</ons-navigator>_x000D_
_x000D_
</html>

_x000D_

_x000D_

_x000D_

回答者: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *