Archive of published posts on 2012.5月

FancyBoxの設定メモ

Posted by specterant on 2012.05.31

たまにFancyBoxを使用するのですが、
設定する時に、オプションを忘れてしまうので、
私用でコピペできるようにメモです。

//ちなみに各オプションはデフォルト値を記述しています。
$("適用したい要素").fancybox({ 
	'width': 560,
	'height': 340,
	'margin': 20,
	'padding': 10,
	'scrolling': 'auto',
	'centerOnScroll': false,
	'autoScale': true,
	'overlayColor': '#666',
	'overlayOpacity': 0.3,
	'titleShow': true
});
詳しくは、下記の参考にさせていただいたサイトを見ていただけたらと。

参考にさせていただいたサイト
Fancyboxで設定できるオプションまとめ|JavaScript|グラビカ学習帳~グラビティ・ワークスの備忘録と知識の共有と蓄積
Fancybox – Fancy jQuery lightbox alternative

※ちなみに、バージョン2から商用利用する場合、有料みたいです。

No Comments

スマートフォンで横向きにすると拡大されるのを回避するには…

Posted by specterant on 2012.05.31

スマートフォンでWebサイトを閲覧するとき、横向きにしたりすることがあると思います。
そんな時、ページが拡大されて表示されることがあります。
あ、ちなみにiPhoneで起きるんですが、これを回避するにはmeta要素に下記を追加します。

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
これで、画面幅にフィットしますが、maximum-scale=1を指定するとページの拡大・縮小ができなくなります。
どちらかを優先させるかと選択を迫られるのですが、どちらも必須にしたいなぁ〜って時は…
はい!こちらのiOS-Orientationchange-Fixという素晴らしいものがあります。
これを読み込むと問題を解決してくれます。
<script src="./ios-orientationchange-fix.js"></script>
ありがとうございます!
Thank you!

A Fix for the iOS Orientationchange Zoom Bug | Filament Group, Inc., Boston, MA

No Comments

jQuery Mobileを触ってみました

Posted by specterant on 2012.05.30

スマートフォンサイトの構築も出来ないとな〜って思い、
jQuery Mobileを触ってみました。

まだ、ほんの少しだけ触ったので、大それた事は言えないのですが、便利だなぁ〜って思いました。
とりあえず、実装したいのであれば、かなり便利だと思います。

ただ、オリジナルのデザインにするのであれば、
色々とCSSを弄らないとダメなので、慣れるまでは時間がかかりそうなだなぁ〜と思いました。

で、とりあえず私用メモします。

まずは、HTMLです。
divタグ(通常)の属性にdata-role=”要素名”を追加し、それぞれ役割を決めます。
data-role属性は省略することができるのでが、複数ページを作成する場合はdata-role=”page”は必須になります。
あと、jquery.mobile.cssとimagesフォルダ(jQuery Mobileに入っていたもの)は同階層にしといた方が楽ちんだと思います。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8" />
	<title>jQuery Mobile Template</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" /> 
	<link rel="stylesheet" href="./jquery.mobile.css" />
	<script src="./jquery.js"></script>
	<script src="./jquery.mobile.init.js"></script>
	<script src="./jquery.mobile.js"></script>
</head>
<body>
<!--+++++++++++++++++++++++++++++++++++++++++++++ [ contents area start ] +++++++++++++++++++++++++++++++++++++++++++++-->
<div data-role="page">
	<header data-role="header">
		<h1>ヘッダーエリア</h1>
	</header>

	<div data-role="content">
		<h2>コンテンツエリア</h2>
		<p>テキスト</p>
	</div>

	<footer data-role="footer">
		<small>&amp;nbsp;&amp;copy;&amp;nbsp;コピーライト</small>
	</footer>
</div>
<!--+++++++++++++++++++++++++++++++++++++++++++++ [ //contents area end ] +++++++++++++++++++++++++++++++++++++++++++++-->
</body>
</html>

続いて、jQuery Mobileの初期設定用のJavaScriptを読み込む。
別に外部でなくてもいいんですが、jquery.mobile.jsを読み込む前に読み込ませないとダメみたいです。
<script src="./jquery.mobile.init.js"></script>

そして中身です。
諸々、英語なので日本語化したり、ページ遷移のアニメーションを統一させたい時に設定します。
ちなみに、これは必須ではないです。
$(document).bind('mobileinit', function(){
	$.mobile.page.prototype.options.addBackBtn = true; //戻るボタンを表示
	$.mobile.defaultPageTransition = "fade"; //ページ遷移のアニメーション
	$.mobile.loadingMessage = '読み込み中';
	$.mobile.pageLoadErrorMessage = '読み込みに失敗しました';
	$.mobile.dialog.prototype.options.closeBtnText = '閉じる';
	$.mobile.selectmenu.prototype.options.closeText= '閉じる';
	$.mobile.listview.prototype.options.filterPlaceholder = '検索文字列';
	$.mobile.page.prototype.options.backBtnText = '戻る';
});
とまぁ〜こんな感じです。
今後、いろいろ触ってみます。


下記が参考にさせていただいたサイトです。

参考にさせていただいたサイト
ASCII.jp:西畑一馬のjQuery Mobileデザイン入門
jQuery Mobile 1.1.0 日本語リファレンス

No Comments