1

私はhtml5とjsが初めてで、 jQuery Mobileの例を開発するのに苦労しています。

このことから、レンダリングする製品が選択されたときに、別のヘッダー (部分) を呼び出すだけです。

_header2.php :

<!DOCTYPE html>
<head> 
<title>h2: <?php echo $_GET['product']; ?> </title>
<meta charset="UTF-8" />
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;' name='viewport' />
<link rel='stylesheet' href='assets/css/styles_mob.css'/>
<link rel='stylesheet' href='assets/css/styles.css' />
<link href='assets/css/jquery-mobile.css?<?php echo filemtime("assets/css/jquery-mobile.css");?>' type='text/css' rel='stylesheet' />
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.min.js'></script>
<script type='text/javascript' src='http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js'></script>
</script>

<script type='text/javascript'>
function mymessage(msg)
{
if(!msg) msg="?";
alert(msg);
}

</script>

</head>

<body onload="mymessage('onload !')">


<div data-role="page" id="Home"> 
<div data-role="header" data-theme="b">
<a href="./" data-icon="home" data-iconpos="notext" data-transition="fade">Home</a>
<h1> <?php echo $title?></h1>
</div>

<div data-role="content">

ヘッダー コードは生成されたページに正しく表示されますが、body タグでのmymessage()の js 呼び出しは機能しません。別の部分コード (_product.php) から呼び出そうとすると、同じ問題が発生します。

<li><a href='#Gallery1' onClick='mymessage(\"press gallery\")' >...</li>

...コンソール戻り: referenceError: mymessage が定義されていません

現在のページを更新する場合にのみ、すべてがロックされます!!

同様の問題でいくつかの投稿（ 1、2、3 ）に乗りましたが、まだ迷っています。

任意のアイデアをお願いします?

4

2 に答える 2

1

タグがありません<html>。追加の</script>終了タグもあります。これにより、エラーが発生する可能性があります。

于 2012-08-21T21:59:19.303 に答える
0

<html>タグの欠落、余分な</script>終了タグ、のアンカーの終了タグの欠落など、あらゆる種類の奇妙なコーディングスタイルとエラーが<li><a href='#Gallery1' onClick='mymessage(\"press gallery\")' >...</li>あり、リストアイテムは内部にある必要があり<ul></ul>ます。

このコードを試してみてください。動作するはずです。それからそれを分析して学びましょう！

<!DOCTYPE html>
<html><head><meta http-equiv="content-type" content="text/html; charset=UTF-8">

<title>h2: <?php echo $_GET['product'];?></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;">

<link rel="stylesheet" type="text/css" href="assets/css/styles_mob.css">
<link rel="stylesheet" type="text/css" href="assets/css/styles.css">
<!-- this next line makes me wonder.. why?!  -->
<link rel="stylesheet" type="text/css" href="assets/css/jquery-mobile.css?<?php echo filemtime('assets/css/jquery-mobile.css');?>">

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>

<script type="text/javascript">//<![CDATA[ 
function mymessage(msg){
    msg=msg||'?'; //the usual way to provide defaults
    alert(msg);
}

window.onload=function(){ //setting your onload event.
    mymessage('onload !');
};
//]]>  
</script>


</head><body>

<div data-role="page" id="Home"> 
<div data-role="header" data-theme="b">
<a href="./" data-icon="home" data-iconpos="notext" data-transition="fade">Home</a>
<h1><?php echo $title;?></h1>
</div>

<div data-role="content">  

<ul> <!-- Here is your link, working -->
    <li><a href="#Gallery1" onclick="mymessage('press gallery');">...</a></li>
</ul>

<!-- added some closing tags for demo-sake -->
</div></div>
</body></html>

PS：すべての初心者エラーと、これがコードの一部にすぎないという事実から、コードの残りの部分にそのような奇妙なエラーがあると強く思います。

幸運を！！

更新：
ページの読み込みで何を達成したいかによっては、jQueryMobileがボールパークを完全に変える可能性があります。jQuery Mobileのドキュメントで読む
ことができるように：

デフォルトでは、jQuery Mobile内のすべてのナビゲーションは、location.hashの変更と更新に基づいています。可能な限り、ページの変更では、現在の「ページ」と次の「ページ」の間のスムーズな移行が使用されます。これは、DOMに既に存在するか、Ajaxを介して自動的に読み込まれます。

ドキュメントからの別の引用：

$（document）.ready（）ではなく、$（document）.bind（'pageinit'）を使用します

jQueryで最初に学ぶことは、$（document）.ready（）関数内のコードを呼び出して、DOMがロードされるとすぐにすべてが実行されるようにすることです。ただし、jQuery Mobileでは、ナビゲート時に各ページのコンテンツをDOMにロードするためにAjaxが使用され、DOMレディハンドラーは最初のページに対してのみ実行されます。新しいページがロードおよび作成されるたびにコードを実行するには、pageinitイベントにバインドできます。

これは、説明されている通常のテクニックは、ページをajaxスタイルでナビゲートしている間ではなく、最初にページにアクセスしたときにのみ起動することを意味します。

したがって、jQuery mobileでは、正確な目的に合ったドキュメントpageinitで説明されているイベントまたはpageshowその他のイベントの1つを使用する必要があります。

すべてのページでpageinitを起動する方法の例（サイトでライブテスト済み）：

$(document).on('pageinit','[data-role=page]', function(){
    mymessage('hihi');    
});

または、次のようにjQuery Mobileでajaxをオフにすることもできます（バージョンによって異なります）。

$(document).bind("mobileinit", function(){
    $.mobile.ajaxEnabled = false;
});
于 2012-08-21T22:43:02.153 に答える