浅草散歩 - 向島

今日も浅草は賑わっていました。
浅草寺からも東京スカイツリーがはっきり見えたので、桜橋経由でスカイツリーまで歩いてみました。途中鳩の街通り商店街を通ったのでこぐまに立ち寄って少し休憩。スカイツリーが近づくにつれて人も多くなってきました。と言うことでスカイツリーは素通り。向島・京島に向かうことにしました。
キラキラ橘商店街はいつきても素晴らしいです。

jQuery Mobile メモ その1

Getting Started（jQM v1.1.0）

公式サイト http://jquerymobile.com/
CDNを利用して実装した方が多分良いと思いますが、勉強もかねてzipダウンロードしてやって行こうと思います。
そもそもカスタマイズしたテーマやスウォッチ（※1）を利用する場合はCDNのCSSを外す必要がありそうですしね。
ダウンロードしたものに以下が含まれる（minifyのものは除いている）。

  • demos（デモ）
  • images（ローディング画像やicon画像）
  • jquery.mobile-1.1.0.js（本体）
  • jquery.mobile-1.1.0.css（メインのCSS）
  • jquery.mobile.theme-1.1.0.css（デフォルトのテーマ）
  • jquery.mobile.structure-1.1.0.css（構造のみのCSS）

CSSファイルが沢山あるが基本的に jquery.mobile-1.1.0.css でOK。
独自のテーマを利用する場合は作成したthemeのCSSと構造のみ定義したjquery.mobile.structureを利用する感じ。
つまり jquery.mobile-1.1.0.css もしくは theme + structure のいづれかになりそう。

基本的に以下のテンプレートがベースになる感じ。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" contetnt="width=device-width, initial-scale=1">
  <title></title>
  <link rel="stylesheet" href="./css/jquery.mobile-1.1.0.css" />
  <script src="./js/jquery-1.7.1.min.js"></script>
  <script src="./js/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>

</body>
</html>

contetnt="width=device-width, initial-scale=1"
これは初期表示倍率１倍で、画面サイズに合わせて表示する指定。

jQuery Mobile の特徴

  • HTML5, CSS3を利用しており、ノンプログラミングでクロスプラットフォームなモバイルページ作成が可能
  • ページ遷移が独特で、ランディングページ以外のページはhead領域が無視され、コンテンツ部分のみのロードとなる。

jQMでは data-role="page" 属性をDIVに付与してページを定義する。
またページ間遷移が基本的にAjaxであり、この際に遷移先ページのdata-role="page" が定義されたDIV要素のみを読み込み、現在のDOMツリーに追加する。この為に遷移先ページのheadに記載されている外部ファイルの読込みなどは実行されない。

  • pushStatusによるページ遷移（未対応の場合はハッシュベースURLによる遷移管理になる）
  • プリフェッチによるページ先読みや、DOMキャッシュによるページ情報保持選択が可能


ちょっとここまで。後で。

jQuery LightBox Plugin で画像の最大サイズ指定

jQuery LightBox Plugin

http://leandrovieira.com/projects/jquery/lightbox/
（本家）http://www.lokeshdhakar.com/projects/lightbox2/

画像の最大サイズ指定

jQuery LightBox はjQueryを利用した場合に使いやすいインターフェースになっている。
使ってみたところ画像サイズが大きい場合に画面からはみ出してしまう形になったのでこれを修正する。

1. jquery.lightbox-0.5.css

/* 追加 */
#lightbox-image {
	max-width  : 最大幅(px);
	max-height : 最大高(px);
}

2. jquery.lightbox-0.5.js

/*
 * function _set_image_to_view()
 */

// 45行目付近

	imageArray:				[],
	activeImage:			0,
	maxWidth:				'',	// これ追加
	maxHeight:				''	// これ追加
},settings);

// 190行目付近

// Image preload process
var objImagePreloader = new Image();
objImagePreloader.onload = function() {
	$('#lightbox-image').attr('src',settings.imageArray[settings.activeImage][0]);
	// Perfomance an effect in the image container resizing it

//
//  ここから追加
//
if ( settings.maxWidth && settings.maxHeight ) {
	// ratio
	var
		_wr = settings.maxWidth / objImagePreloader.width,
		_hr = settings.maxHeight / objImagePreloader.height
	;
	if ( _wr > _hr ) {
		objImagePreloader.height = settings.maxHeight;
		objImagePreloader.width  = objImagePreloader.width * _hr;
	} else {
		objImagePreloader.width  = settings.maxWidth;
		objImagePreloader.height = objImagePreloader.height * _wr;
	}
}
// ここまで

3. 実行

// こんな感じで実行（オプションは良い具合に追加）
$('セレクタ').lightBox({
    maxWidth       : 700
   ,maxHeight      : 600
});

まとめ

コードはもっとキレイに直せると思うので気が向いたら直すこと。

ちょっとjQueryメモ 

$(function(){
    $('.expand').each(function(){
        var _t = $(this);
        _t.toggle(
            function(){ _t.find('li:not(:first)').hide(); }
           ,function(){ _t.find('li:not(:first)').show(); }
        );
    });
});

// ▼こんなのに
<ul class="expand">
<li><span>hoge</span></li>
<li>10000000</li>
<li>10000001</li>
<li>10000002</li>
</ul>
<ul class="expand">
<li><span>huga</span></li>
<li>20000000</li>
<li>20000001</li>
<li>20000002</li>
<ul class="expand">
<li><span>aaaaaa</span></li>
<li>30000000</li>
<li>30000001</li>
<li>30000002</li>
<ul class="expand">
<li><span>bbbbbb</span></li>
<li>40000000</li>
<li>40000001</li>
<li>40000002</li>
</ul>
</ul>
</ul>

// あとは
$('.expand').ready(function(){
    // ・・・・
});