開閉パネルの機能実装
これは、
初期化処理ですべてのパネルを閉じて
タイトルがクリックされたら本文を表示するようにすればok
これは、
slideUp()
slideDown()
hide()を使う
まず初期化は
$(‘#panel dd’).hide();
でok
タイトルクリックで表示するようにするなら
clickイベントを使う
var d = $( ‘+dd’,this);
これで、
dt要素に対応する
dd要素を取得
if(d.css(‘display’) === ‘block’){
d.slideUp(1000);
}else{
d.slideDown(1000);
}
カテゴリー: 未分類
開閉パネル実装
開閉パネル実装
これをやると、Wikipediaでクリックしたら
文が出てくるようになる
開閉パネルは
dlリストとして定義
クリックするためのタイトルをdt要素
開閉できる本文をdd要素にする
簡単なソースなら
- タイトル
- 開閉できる本文
続いて、開閉パネルのスタイル設定
注目するべきは
CSSで
display:none;
にしないこと
これは、表示、非表示はjQueryで管理するから
これには理由があり、javascriptが
無効化されてもコンテンツを楽しめるようにするため
もし、CSSで設定なら
javascript無効化すると、何も見れなくなるから
セキュリティー関連で、Javascriptを切るようにしていることもあるため
こういう配慮も必要
フェードアウト処理
マウスポインターが外れたらツールチップをフェードアウト
マウスポインターが外れたときの処理には
mouseoutイベントを使う
$(‘div.tip’).fadeOut(1000)
これで、ツールチップを1秒でフェードアウトさせられる
fadeOut()の構文は
$(セレクター).fadeOut(アニメーション時間)
アニメーション終了時の処理
アニメーション終了したときに実行
.hide(1000,function(){
$(this).attr(‘src’,img.attr(‘src’));
})
このように
アニメーションメソッドの後に
function(){…}
形式で処理を書けば
アニメーション終了したときに処理を
実行できます
終わったら通知して呼び出すということでコールバック関数といいます
アニメーション機能の構文は
$(セレクター).アニメーションメソッド{
時間,
function(){
アニメーション完了後の処理
})
メソッドチェーンにしないのは
終わってから処理じゃなくて
アニメーション完了の前に処理してしまうから
これだとhide()でアニメーションにしても
いきなり画像がすでに変わっているという
妙な感じになってしまう
もし、アニメーションがうまく見れないなら
時間の指定を長くするといい
これは、注意点だが
メソッドチェーンで順番に処理するのは
アニメーションだけで
ほかの処理は即座に実行してしまう
jQueryでアニメーションを順番に実行
アニメーションを順番に実行
function(){…}
を省くとさらに簡潔になる
$(‘#big’)
.hide(1000)
.show(2000);
これなら
1秒画像を隠してから
2秒画像を再表示
このように
jQueryでアニメーションメソッドを
メソッドチェーンで連結して呼び出すと
上から順番に実行する
メソッドチェーンにしても
同時にアニメーション適用にならないので
注意
アルバムアプリ作成
アルバムアプリは
AndroidのSDカードにとりためた画像をgalleryに一覧表示し
みたい画像をタップする
タップされた画像は
imageviewに大きく表示
同時に
Textviewに撮影した時刻を表示
galleryのUIには
imageviewを使う
ただし、画素数が大きいため
大きな画像を使うと
OutOfMemoryの例外が、発生する
このため、BitmapFactoryクラスで
画像の大きさを変更する
カーソルメソッドのメモ
カーソルメソッドのメモ
moveToFirst()
先頭のレコードに移動
レコードが存在しないならfalse
getColumnIndex()
カラム名からインデックスを返す
getString()
フィールド値を取得
getメソッドは、データ型のぶん用意済み
getInt()
getFloat()
などなど
moveToNext()
次のレコードに進む
次のレコードがないならfalse
cur.close()
カーソルを閉じる
連絡先にアクセスするには
連絡先にアクセスするには
Contacts.CONTENT_URI
を使う
これには
android.provider.ContractsContract.Contracts
をインポートする
今回は
ボタンのonClickのときに呼び出す
getContractsData()
が処理の中心
コンテントプロバイダーからのデータ取得処理は
RDBへのSQL発行に近い
流れとしては
managedQuery()でカーソル取得
ループ処理でカーソルから順に
レコードを読み込み
フィード値を取得
注目するのは
managedquery()の引数
uri
コンテントプロバイダーのURI
projection
取得したいカラムのリスト
selection
レコードの選択条件
SQLでいうと WHERE
selectionArgs
selectionの引数配列なので複数指定できる
sortOrder
並べ替え
ASC 昇順
DESC 降順
SQLでいうと ORDER BY
エミュレータに、データ追加
エミュレータへのデータ追加
サンプルアプリのため
エミュレータにデータを追加しました
今回は連絡先の追加なので
アプリの中から
Phone
をタップして
エミュレータのmenuボタンを押して
New contact
を押して必要なデータを入力しました
コンテントプロバイダへの問い合わせ
コンテントプロバイダーに問い合わせするには
Activityクラスの
managedQuery()
を使うか
ContentResolverクラスの
query()
を実行
どちらを使っても、同じ引数のセットを受け取り
Cursorオブジェクトを返す
これは
managedQuery()
は
内部的に
ContentResolverクラスのquery()
を呼ぶから
managedQuery()は
アクティビティに
カーソルの管理を委ねる
このめ、ほとんどの場合は
managedQuery()を使っている