2010-12-28 6 views
0

私はjQTouchに新しくなっています - それはかなり素晴らしいですが、私はgetting startedガイドにも従っていますが、自分のHTMLのためにそれをそのまま使うことはできませんmarkup guidelinesとなります。jQTouchがHTMLのためにすぐに使えないのはなぜですか?

具体的には、私の画面のそれぞれは、一意のIDを持つ要素(直接の子<body>)であり、これらのIDにリンクしています。 <a href="#screen-a">。これはデモコードの規約に従っているようですが、デモコードは動作していますが、私のコードはそうではありません。

はここに私の<body>のHTML構造である:

<section id="main-menu"> 
    <header class="toolbar"><!-- ... --></header> 
    <nav> 
     <ul> 
      <li class="arrow"><a href="#screen-a">Screen A</a></li> 
      <li class="arrow"><a href="#screen-b">Screen B</a></li> 
      <li class="arrow"><a href="#screen-c">Screen C</a></li> 
     </ul> 
    </nav> 
    <footer><!-- ... --></footer> 
</section> 

<section id="screen-a"><!-- ... --></section> 
<section id="screen-b"><!-- ... --></section> 
<section id="screen-c"><!-- ... --></section> 

<script src="jquery.min.js"></script> 
<script src="jqtouch.min.js"></script> 

<script src="init.js"></script> 

そして、私は単純にjQTouch(無しカスタムオプション)を初期化init.js:私は私のページをロード

var jQT = new $.jQTouch({}); 

は、UIは罰金表示され、私のjQT変数が存在するため、jQTouchが初期化されたことを確認できます。

リンクをクリックすると、ロケーションバーが新しいハッシュに変更されます(「#screen-a」など)が、UIは変更されません。 JavaScriptコンソールが繰り返し複数回投げ始める履歴にページがありませんエラー。これは、デスクトップのSafariでとの両方で私のために起こること

(私はunminified jQTouch.jsを使用する場合、これらのエラーはdumbLoopStart()タイマーから呼び出されているjQTouch goBack()機能、内部から来る。)

注意iPhoneのモバイルSafariしかし、それは彼らのdemoが両方で私のためにうまく動作するので、非常に奇妙です。

私はこれに対して何時間も頭を悩ませました。誰かが私が間違っているかもしれないアイデアや提案やヒントを持っていますか?ありがとう!

+0

例でdivを使用すると、コードでセクション要素が使用されるのはなぜですか? –

+0

HTML5の精神では、sectionはdivよりも意味のある要素だと思いました。 –

答えて

1

私はあなたの提供された例からスタイルのインポートを追加してテストを作成しました。単に<nav>要素を削除するだけで問題が解決しました。

+0

はい、そうですよ!リストを扱うためのデフォルトのセレクタは、過度に過激で、例えば "body> *> ul li a"の代わりに探しているようです。ちょうど "ul li a"。ありがとう! –

0

私はあなたの主要な要素はdivのものでなければならないと信じています。さらに、最初に表示されるべきdivの "current"クラスが必要です。 あなたが使用しているバージョンがこれを必要としているかどうかはわかりませんが、gitを使って前に戻ってきたものは、すべての主要な要素が "jqt"というIDのdivに含まれている必要があります。

<div id="jqt"> 
    <div id="main-menu" class="current"> 
     <ul> 
      <li class="arrow"><a href="#screen-a">Screen A</a></li> 
      <li class="arrow"><a href="#screen-b">Screen B</a></li> 
      <li class="arrow"><a href="#screen-c">Screen C</a></li> 
     </ul> 
    </div> 

    <div id="screen-a"><!-- ... --></div> 
    <div id="screen-b"><!-- ... --></div> 
    <div id="screen-c"><!-- ... --></div> 
</div> 

<script src="jquery.min.js"></script> 
<script src="jqtouch.min.js"></script> 
+0

ヒントをありがとう、しかし、私はデモをセクションを使用するように変更し、明示的なクラス= "現在"を削除すると、これらのどちらも問題ではないことを確認できます。 jqtouch.jsには単語 "div"のインスタンスもなく、class = "current"の画面がない場合は最初のものに追加するという明示的なチェックがあります画面。 –

+0

そして、コンテナdiv(あなたの例では#jqt)はもはやパターンではありません。このデモにはマークがありません。マークアップのガイドラインには、「jQTouchは、「」の下に直接子孫を持ち、フルスクリーンのパネルに変換します。 –

+1

正しいですが、JSファイルをすばやくスキャンすると、「div」タグが不要です。 デモは、この時点でかなり古いバージョン1b2に基づいていると思います。いくつかの問題が発生し、github(https://github.com/senchalabs/jQTouch/blob/master/jqtouch/jqtouch.js)から最新バージョンを取得し、必要に応じて変更を加えました。現在のバージョンでは、 "jqt" idがパターンであることがわかります。あなたは、動作を示すより完全な例を投稿できますか? –

関連する問題