0

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>

1 件の回答 1

1

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

// ons.bootstrap();
angular.module('myApp', ['onsen', 'ngAnimate']).controller('MyCtrl', function($scope) {
  $scope.groups = [];
  for (var i = 0; i < 10; i++) {
    $scope.groups[i] = {
      name: i,
      items: []
    };
    for (var j = 0; j < 3; j++) {
      $scope.groups[i].items.push(i + '-' + j);
    }
  }

  /*
   * if given group is the selected group, deselect it
   * else, select the given group
   */
  $scope.toggleGroup = function(group) {
    if ($scope.isGroupShown(group)) {
      $scope.shownGroup = null;
    } else {
      $scope.shownGroup = group;
    }
  };
  $scope.isGroupShown = function(group) {
    return $scope.shownGroup === group;
  };

});
.list__item {
  min-height: 0px;
}

.item-accordion {
  line-height: 37px;
  padding-top: 0;
  padding-bottom: 0;
  transition: 0.07s all linear;
}

.item-accordion.ng-hide {
  line-height: 0px;
}

.item-accordion.ng-hide-add,
.item-accordion.ng-hide-remove {
  display: block !important;
}

.title {
  background: #F5F5F5;
}

.active {
  background: #EFEFEF;
}
<link rel="stylesheet" href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.11/build/css/onsenui.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.11/build/css/onsen-css-components.css">
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.11/build/js/angular/angular.min.js"></script>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.11/build/js/onsenui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
<html ng-app="myApp">
<ons-navigator title="Navigator" var="myNavigator">
  <ons-page>
    <ons-toolbar>
      <div class="center">List + Accordion</div>
    </ons-toolbar>
    <br>

    <ons-list ng-controller="MyCtrl">
      <div ng-repeat="group in groups">
        <ons-list-item ng-click="toggleGroup(group)" class="title" ng-class="{active:isGroupShown(group)}">
          <ons-icon icon="minus-square-o" ng-if="isGroupShown(group)"></ons-icon>
          <ons-icon icon="plus-square-o" ng-if="!isGroupShown(group)"></ons-icon>
          Group {{group.name}}
        </ons-list-item>
        <ons-list-item class="item-accordion" ng-repeat="item in group.items" ng-show="isGroupShown(group)">
          {{item}}
        </ons-list-item>
      </div>
    </ons-list>
  </ons-page>
</ons-navigator>

</html>

1
  • お礼が遅くなりました。 紹介いただいたリンク先を参考にしてトライしてみます。 ありがとうございました。
    – 大島剛
    Commented 2015年2月27日 10:15

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。