1分でわかるAngularJS開発ツールBatarangの使い方
Batarangとは Chromeの拡張機能でデベロッパーツールにAngularJSタブを追加してスコープの中身、パフォーマンス、DIなどを確認することができる。 Batarangをインストール Batarang確認用サンプルページ Modelsタブ ScopeとModelを確認できる。< Scope (006)の「<」をクリックするとデベロッパーツールのElementsタブがアクティブになり該当箇所が表示される。 Performanceタブ 各部分のパフォーマンスを調べることができる。 Dependenciesタブ Dependency Injection(DI)の相互関係を確認することができる。 マウスオーバー時に緑だと依存されている マウスオーバー時に赤だと依存している Optionsタブ Show applicationsを有効にすると緑線で範囲を表示 Show bindingsを
1分でわかるjQueryのscrollTop() スクロール位置取得の使い方
jQueryのscrollTop()でスクロール位置を取得することでいろいろなことができるようになる。 ウィンドウ最上部のスクロール位置の取得 $(window).scrollTop()で取得。$(window).on("scroll"だけだとロード時に現在位置が表示されないので$(window).on("load scroll"と記述するのが望ましい。 function getScrollTop(){ $("#result").text($(window).scrollTop() + 'px'); } $(window).on("load scroll", getScrollTop); jQueryのscrollTop() スクロール位置取得の使い方 サンプル1 ウィンドウ最下部のスクロール位置の取得 $(window).scrollTop()+$(window).height()で取得
AngularJSでアコーディオン(toggleボタン仕様)のサンプル
クリックできる範囲 テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。 <dl class="accordion"> <dt ng-click="flag = !flag">クリックできる範囲</dt> <dd ng-class="{hide: flag}">テキストが入ります。テキストが入ります。テキストが入ります。</dd> </dl> .accordion, .accordion dt, .accordion dd { margin: 0; padding: 0; } .accordion { width: 300px; margin-bottom: 10px; border: 1px solid #CCC; } .accordion dt { padding: 5px 10px; } .accordion dt { background-color:
AngularJSでアコーディオン(toggleボタン仕様)を1分で実装
AngularJSでアコーディオンを実装する場合、jqLiteを使用して実装しようと考える人もいるかもしれないがjqLiteにはslideToggle()が含まれていないためjQueryのように実装することはできない。 ※ちなみにtoggle()もない。（toggleClassはある） https://docs.angularjs.org/api/ng/function/angular.element ng-click,ng-class,CSSアニメーションで実装 ng-clickでクリックの検出および開閉(フラグ)の切り替え、ng-classでCSSクラスの追加・削除、そしてtransitionで開閉のアニメーションを追加すれば簡単に実装できる。 やり方は簡単。まず$scope.flag = false;で初期フラグを設定する。 angular.module('myApp', []) .
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
