6701


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

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

[code]

    <div data-role="collapsible">
    
[/code]

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

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

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

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

［ jQuery Mobile のサンプル］

[code]

    <div data-role="collapsible">
    
    <h3>ほげほげ</h3>
    
    <p>ぴよぴよ</p>
    
    </div>
    
[/code]


CC BY-SA 3.0
2015-02-18T09:20:57.657
6695
2019-12-13T19:50:26.630
2019-09-09T12:52:47.090
32986
8374
question
monaca onsen-ui jquery-mobile
Monaca Onsen UI で開閉式のコンテンツを実現したい


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

[code]

    // 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;
      };
    
    });
[/code]

[code]

    .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;
    }
[/code]

[code]

    <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>
[/code]


CC BY-SA 4.0
2015-02-18T11:49:34.240
6701
2019-12-13T19:50:26.630
2019-12-13T19:50:26.630
32986
7461
6695
answer