Step by Step Ruby on Rails

Ruby on Railsで実際にWebサイトを構築する手順をまとめています。

UI Bootstrap written in AngularJS

Accordion

大項目1の内容 中項目1の内容 小項目1の内容 小項目2の内容
<accordion>
  <accordion-group heading="大項目1">
    大項目1の内容
  </accordion-group>
  <accordion-group heading="大項目2">
    <accordion>
      <accordion-group heading="中項目1">
        中項目1の内容
      </accordion-group>
      <accordion-group heading="中項目2">
        <accordion>
          <accordion-group heading="小項目1">
            小項目1の内容
          </accordion-group>
          <accordion-group heading="小項目2">
            小項目2の内容
          </accordion-group>
        </accordion>
      </accordion-group>
    </accordion>
  </accordion-group>
</accordion>
  なし

<div ng-controller="CarouselDemoCtrl">
  <div style="height: 305px">
    <carousel interval="myInterval">
      <slide ng-repeat="slide in slides" active="slide.active">
        <img ng-src="{_{slide.image}}" style="margin:auto;">
        <div class="carousel-caption">
          <h4>Slide {_{$index}}</h4>
          <p>{_{slide.text}}</p>
        </div>
      </slide>
    </carousel>
  </div>
</div>
myModule = angular.module('myModule', ['ui.bootstrap'])

function CarouselDemoCtrl($scope) {
  $scope.myInterval = 5000;
  $scope.slides = [
    {
       image: 'http://placekitten.com/g/600/300',
       text: 'one'
    },
    {
       image: 'http://placekitten.com/g/601/300',
       text: 'two'
    },
    {
       image: 'http://placekitten.com/g/602/300',
       text: 'three'
    },
  ];
}
CarouselDemoCtrl.$inject = ['$scope'];
myModule.controller('CarouselDemoCtrl', CarouselDemoCtrl);

Collapse


<div ng-controller="CollapseDemoCtrl1">
  <button class="btn btn-default" ng-click="isCollapsed = !isCollapsed">詳細
を見る</button>
  <hr>
  <div collapse="isCollapsed">
    <div class="well well-lg">
      ・・・・・
    </div>
  </div>
</div>
<div ng-controller="CollapseDemoCtrl1">
  <button class="btn btn-default" ng-click="isCollapsed = !isCollapsed">詳細を見
る</button>
  <hr>
  <div collapse="isCollapsed">
    <div class="well well-lg">
      ・・・・・
    </div>
  </div>
</div>
myModule = angular.module('myModule', ['ui.bootstrap'])

function CollapseDemoCtrl1($scope) {
  $scope.isCollapsed = true;
}
CollapseDemoCtrl1.$inject = ['$scope'];
myModule.controller('CollapseDemoCtrl1', CollapseDemoCtrl1);
リンクドロップダウン
<span class="dropdown">
  <button type="button" class="btn btn-primary dropdown-toggle">
    ボタンドロップダウン
  </button>
  <ul class="dropdown-menu">
    <li><%= link_to "メニュー1", '#' %></li>
    <li><%= link_to "メニュー2", '#' %></li>
    <li><%= link_to "メニュー3", '#' %></li>
  </ul>
</span>
<span class="dropdown">
  <a class="dropdown-toggle">
    リンクドロップダウン
  </a>
  <ul class="dropdown-menu">
    <li><%= link_to "メニュー1", '#' %></li>
    <li><%= link_to "メニュー2", '#' %></li>
    <li><%= link_to "メニュー3", '#' %></li>
  </ul>
</span>
なし

Datepicker

Inline

選択した日付: {{dt | date:'yyyy-MM-dd' }}
<div ng-controller="DatepickerDemoCtrl">
  <h4>Inline</h4>
  <div style="display:inline-block; min-height:290px;">
    <datepicker ng-model="dt"
                  min-date=""
                  max-date=""
                  show-weeks=false
                  init-date=""
                  format-day='dd'
                  format-month='MM'
                  format-year='yyyy'
                  format-day-header='EEE'
                  format-day-title='yyyy/MM'
                  format-month-title='yyyy'
                  year-range='10'
                  class="well well-sm">
    </datepicker>
  </div>
  <pre>選択した日付: <em>{_{dt | date:'yyyy-MM-dd' }}</em></pre>
</div>
myModule = angular.module('myModule', ['ui.bootstrap'])

function DatepickerDemoCtrl($scope) {
  $scope.dt = new Date();;
}
DatepickerDemoCtrl.$inject = ['$scope'];
myModule.controller('DatepickerDemoCtrl', DatepickerDemoCtrl);
モーダル内で選択した値: {{ selected }}
<div ng-controller="ModalDemoCtrl">
  <script type="text/ng-template" id="myModalContent.html">
    <div class="modal-header">
      <h3 class="modal-title">{_{ title }}</h3>
    </div>
    <div class="modal-body">
      <ul>
        <li ng-repeat="item in items">
          <a ng-click="selected.item = item">{_{ item }}</a>
        </li>
      </ul>
      選択した値: <b>{_{ selected.item }}</b>
    </div>
    <div class="modal-footer">
      <button class="btn btn-primary" ng-click="ok()">OK</button>
      <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
    </div>
  </script>

  <button class="btn btn-default" ng-click="open()">Open me!</button>
  <button class="btn btn-default" ng-click="open('lg')">Large modal</button>
  <button class="btn btn-default" ng-click="open('sm')">Small modal</button>
  <div ng-show="selected">モーダル内で選択した値: {_{ selected }}</div>
</div>
var ModalDemoCtrl = function ($scope, $modal, $log) {
  $scope.title = 'モーダルのタイトル';
  $scope.items = ['項目1', '項目2', '項目3'];
  $scope.open = function (size) {
    var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
      controller: ModalInstanceCtrl,
      size: size,
      resolve: {
        items: function () {
          return $scope.items;
        },
        title: function () {
          return $scope.title;
        }
      }
    });

    modalInstance.result.then(function (selectedItem) {
      $scope.selected = selectedItem;
    }, function () {
      $log.info('Modal dismissed at: ' + new Date());
    });
  };
};
ModalDemoCtrl.$inject = ['$scope','$modal', '$log'];
myModule.controller('ModalDemoCtrl', ModalDemoCtrl);

var ModalInstanceCtrl = function ($scope, $modalInstance, items, title) {
  $scope.title = title
  $scope.items = items;
  $scope.selected = {
    item: $scope.items[0]
  };

  $scope.ok = function () {
    $modalInstance.close($scope.selected.item);
  };

  $scope.cancel = function () {
    $modalInstance.dismiss('cancel');
  };
};

ModalInstanceCtrl.$inject = ['$scope','$modalInstance', 'items', 'title'];
myModule.controller('ModalInstanceCtrl', ModalInstanceCtrl);

Tooltip,Popover

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label tooltip-placement="right" tooltip="On the Left!"class="col-sm-4 contr
ol-label">項目1(右にツールチップ)</label>
    <div class="col-sm-8">
      <input type="text" ng-model="item1" />
    </div>
  </div>
  <div class="form-group">
    <label tooltip-placement="bottom" tooltip="On the Bottom!"class="col-sm-4 co
ntrol-label">項目2(下にツールチップ)</label>
    <div class="col-sm-8">
      <input type="text" ng-model="item2" />
    </div>
  </div>
  <div class="form-group">
    <label tooltip-placement="right"
           tooltip-html-unsafe="
             <strong>ツールチップ</strong><br />
             <small><em>HTMLを使ってツールチップを表示</em></small>"        clas
s="col-sm-4 control-label">
      項目3(HTML使用)
    </label>
    <div class="col-sm-8">
      <input type="text" ng-model="item2" />
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-8">
      <button popover-placement="top" popover="ポップオーバーはタイトルを指定で
きます。しかし、HTMLタグは使用できないようです。" popover-title="ポップオーバー
(タイトルあり)" class="btn btn-default">ポップオーバー(タイトル付)</button>
      <button popover-placement="right" popover="ポップオーバーはタイトルを指定
できます。しかし、HTMLタグは使用できないようです。"class="btn btn-default">ポッ
プオーバー</button>
    </div>
  </div>
</form>
なし

Tab

デフォルト

・Windowsのインストール手順

・Windowsの設定手順

・Windowsの実行手順

・Linuxのインストール手順

・Linuxの設定手順

・Linuxの実行手順

・MACのインストール手順

・MACの設定手順

・MACの実行手順

<div class="row">
<tabset>
  <tab heading="Windows">
    <p>・Windowsのインストール手順</p>
    <p>・Windowsの設定手順</p>
    <p>・Windowsの実行手順</p>
  </tab>
  <tab heading="Linux">
    <p>・Linuxのインストール手順</p>
    <p>・Linuxの設定手順</p>
    <p>・Linuxの実行手順</p>
  </tab>
  <tab heading="MAC">
    <p>・MACのインストール手順</p>
    <p>・MACの設定手順</p>
    <p>・MACの実行手順</p>
  </tab>
</tabset>
</div>
<H4>justified="true"</H4>
<div class="row">
<tabset justified="true">
  <tab heading="Windows">
    <p>・Windowsのインストール手順</p>
    <p>・Windowsの設定手順</p>
    <p>・Windowsの実行手順</p>
  </tab>
  <tab heading="Linux">
    <p>・Linuxのインストール手順</p>
    <p>・Linuxの設定手順</p>
    <p>・Linuxの実行手順</p>
  </tab>
  <tab heading="MAC">
    <p>・MACのインストール手順</p>
    <p>・MACの設定手順</p>
    <p>・MACの実行手順</p>
  </tab>
</tabset>
</div>
なし

justified="true"

・Windowsのインストール手順

・Windowsの設定手順

・Windowsの実行手順

・Linuxのインストール手順

・Linuxの設定手順

・Linuxの実行手順

・MACのインストール手順

・MACの設定手順

・MACの実行手順

Pagination


  • {{item.id}}:{{item.content}}

<div ng-controller="PaginationDemoCtrl">
  <pagination total-items="totalitems"
              ng-model="currentpage"
              max-size="maxsize"
              items-per-page="itemsperpage"
              class="pagination-sm"
              previous-text="前へ"
              next-text="次へ"
              first-text="最初"
              last-text="最後"
              boundary-links="true">
  </pagination><br />
  <ul>
    <li ng-repeat="item in currentitems">
      <p>{_{item.id}}:{_{item.content}}</p>
    </li>
  </ul>
  <pagination total-items="totalitems"
              ng-model="currentpage"
              max-size="maxsize"
              items-per-page="itemsperpage"
              class="pagination-sm"
              previous-text="前へ"
              next-text="次へ"
              first-text="最初"
              last-text="最後"
              boundary-links="true"
              rotate="false">
  </pagination>
</div>
var PaginationDemoCtrl = function ($scope) {
  $scope.items = [
    {id:1,content: "記事1の中身です。"},
    {id:2,content: "記事2の中身です。"},
     :
    {id:30,content: "記事30の中身です。"}
  ];
  
  $scope.maxsize = 5;
  $scope.itemsperpage = 2;
  $scope.totalitems = $scope.items.length;
  $scope.currentpage = 1;
  var start = 0;
  var end = start + $scope.itemsperpage;
  $scope.currentitems = $scope.items.slice(start,end);

  $scope.$watch('currentpage', function() {
    start = ($scope.currentpage - 1) * $scope.itemsperpage;
    end = start + $scope.itemsperpage;
    $scope.currentitems = $scope.items.slice(start,end);
  },true);
};

PaginationDemoCtrl.$inject = ['$scope'];
myApp.controller('PaginationDemoCtrl', PaginationDemoCtrl);