2011-12-26 12 views
2

モバイルサイトを構築し、yahoo.comのモバイルサイトのように動作するローテータを作成したいと考えていました。私は指を左または右にスワイプすることができ、それはニュースをスワイプします、私は自分のコンピュータを使用してそれを見つけることができませんでしたが、私のiPhoneで、アンドロイドを推測している。モバイル向けのローテーターは、Yahoo!のIphoneやIpadのモバイル版のようですか?

どのような情報ですか?ありがとうございました!

答えて

2

留守番を見て:モバイルサイトの構築

、ちょうどヤフーのよう を働くだろう回転子を作りたかったです.comのモバイルサイト。私は、左または右 に私の指をスワイプすることができ、それはあなたがあなたのページのスクロール領域を作成するためにiScroll 4を使用することができますニュース

をスワイプします。それはかなりシンプルで、すでに実装しています。

私はあなたの任意のコードが、簡単に説明を与えることはありません。

あなたがiscrollを起動すると、あなたはそれをdiv要素のIDを与える必要があります。このdivの最初の子はscrollerなので、2つのdivを宣言する必要があります。 1つはラッパー(そしてあなたがiscrollに与えるID)と1つのインナーがスクロールされます。この秒の中で、スクロールしたいものすべてを追加します。

あなたのケースでは、UL> LIとしてから、snap: liというオプションをiscrollに追加すると良いでしょう。これはニュースの間に詰まっていないので、yahooのようにliからliにジャンプします。

私のコンピュータでは見つけられませんでしたが、私のiPhoneで私は と推測しています。

このためには、User-Agentを偽装する必要があります。そのため、Yahooのページにモバイルバージョンが表示されます。 Firefoxの場合、User-Agent Switcherプラグイン(click here if you are lazy)を検索してください。

インストール後、「ツール」に移動すると、「Default user-agent」というグレーの地球儀が表示されます。それを開き、例えばiPhone用のiPhoneを選ぶ。

ツールをもう一度実行すると、グレーの地球儀が青色になります。つまり、あなたはUAをiPhoneにしようとしています。現在、モバイル版のほとんどのページはモバイルに変わります。そして、Firebugを使って彼らの作り方を調べることができます。

ただし、タッチイベントのコードのみを作成したことがありますが、もちろんマウスでは機能しない可能性があります。 (iScrollを使用していた場合、おそらくdesktopCompatibilityオプションが有効になっていて、マウスでドラッグすると機能します)

+0

Mac/Safariユーザーのためのちょっとしたヒント:開発メニューに入り、 。 – Sum

+0

@Sum That :)通常はPreferences(Cmd/Ctrl +、)を押して、Advancedタブを選択します。そこには、 '開発者の表示'メニューが表示されます。メニューが表示され、使用するAppleのUAもあります。 – RaphaelDDL

+0

ありがとうございます。とった。 – Darius

1

iOSデバイスがジェスチャーを認識するために特定の識別子を使用するため、Safariプログラミングに入る必要があります。

ただ、部品Apple documentation特にthis oneアニメーションとCSSデザインなどのため

関連する問題