インソースマーケティングデザイン
2011.11.18 コーディング
JQueryでスワイプ。
最近は「wordpress」と日々格闘しております。
wordpress でモバイルサイトやら、スマートフォンサイトやら・・・。
最近どんどん進出してきたスマートフォン。
社内も半分以上はスマートフォン。
ほぼ iPhone ですが・・・。
そんなスマートフォンの操作といえば、画面を指先でサッとなでる「スワイプ」！
これを実装できるのが、JQuery Mobile ！
設定次第でスワイプして、次のページや前のページに進むことができます。
●サンプル
———————————————————————————————————————-
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”utf-8″>
<title>テスト</title>
<link rel=”stylesheet” href=”jquery.mobile-1.0a2.min.css” />
<script src=”jquery-1.4.4.min.js”></script>
<script src=”jquery.mobile-1.0a2.min.js”></script>
<script><!–
$(document).ready(function() {
$(“#ph-swiperight”).bind(“swiperight”, function() {
document.location = “./aaa.html”;
});
});
–></script>
</head>
<body>
<div id=”page-sample” data-role=”page”>
<div data-role=”header”>
<h1>Header</h1>
</div>
<div data-role=”content”>
<h1>Body</h1>
<div id=”ph-swiperight”>このエリアを右方向に。</div>
</div>
<div data-role=”footer”>
<h1>Footer</h1>
</div>
</div>
</body>
</html>
———————————————————————————————————————-
完全に自分への備忘録・・・。
まだ未実装のマリンロードサイトに実装しなくては・・・。
