system
マリンロード

2011.11.18HTML/CSS 

マリンロード

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>

———————————————————————————————————————-

完全に自分への備忘録・・・。

まだ未実装のマリンロードサイトに実装しなくては・・・。

現役ウェブ解析士が教えるWebサイトの読み解き方 イメージ
ホームページ制作サービスはこちら
ページTOPへ