Framework/Ethna/HTML_AJAX/transition
をテンプレートにして作成
開始行:
#setlinebreak(on)
* HTML_AjaxのreplaceとEthnaでAJAXを使った画面遷移 [#s6a6c...
#htmlinsert(googleAdsense.html)
#ref(http://dozo.rgr.jp/img/img20_file.png,right,nolink,a...
別にEthnaである必要はないけど。
(ノ・・)ン。。。。。。(((●コロコロッ
AJAX(JavaScript)を使って画面遷移するシステムを作ろうとす...
異常に面倒くさかったりするが、
PEAR::HTML_Ajaxなら非常に簡単。
発想を変えれば良いだけだね。
PEAR::HTML_Ajaxを使って、
画面を表示すると、
innerHTMLが使われる。
PHPerな人には分かり難いかもしれない。
特定のＩＤ属性を持っているタグの内側にねじ込むようにタグ...
で、そのinnerHTMLで表示されたものの中に、
画面遷移用のリンクをつけたjsvaScriptコードが入っていると、
画面遷移が成立するというわけ。
(￣- ￣ ) ウーン
言葉にするのは難しい。
サンプルはこんな感じ。
prev, nextをポチポチ押すと、
now:の数値が変わっていくシンプルなもの。
これをオフセット値と見立てると、
画面遷移のできあがりというわけ。
例によってファイルは三つ。
ajax.html
<html>
<body>
<script type="text/javascript" src="server.php?client=al...
<span id="list">I'm the target</span>
<script type="text/javascript">
HTML_AJAX.replace('list','output.php');
</script>
</body>
</html>
server.php
<?php
include 'HTML/AJAX/Server.php';
$server = new HTML_AJAX_Server();
$server->handleRequest();
?>
output.php
<?
$offset = $_GET["offset"];
$prev = $offset - 1;
$next = $offset + 1;
$html = <<<HTML
<a href="javascript:void(0)" onclick="return HTML_AJAX.r...
now: $offset
<a href="javascript:void(0)" onclick="return HTML_AJAX.r...
HTML;
echo $html;
?>
結果はこんな感じ
<HTML>
<HEAD/>
<BODY>
<DIV id="HTML_AJAX_LOADING"> Loading... </DIV>
<SCRIPT src="server.php?client=all" type="text/javasc...
<SPAN id="list">
<A onclick="return HTML_AJAX.replace('list','output...
now:
<A onclick="return HTML_AJAX.replace('list','output...
</SPAN>
<SCRIPT type="text/javascript">
HTML_AJAX.replace('list','output.php');
</SCRIPT>
</BODY>
</HTML>
重要なのはid属性が"list"のSPANタグの中。
一般的なページャーの仕組みがこの中に入っていて、
onClickをトリガーにreplaceメソッドを動かす。
一般的なＰＣページでは、
一ページの中にたくさん情報を載せるが、
これを使えばその中の一部分だけ入れ替えることが出来る。
-tes -- [[tes]] &new{2006-12-10 03:00:33 (日)};
-tes? -- [[dozo]] &new{2006-12-20 23:21:30 (水)};
#comment
終了行:
#setlinebreak(on)
* HTML_AjaxのreplaceとEthnaでAJAXを使った画面遷移 [#s6a6c...
#htmlinsert(googleAdsense.html)
#ref(http://dozo.rgr.jp/img/img20_file.png,right,nolink,a...
別にEthnaである必要はないけど。
(ノ・・)ン。。。。。。(((●コロコロッ
AJAX(JavaScript)を使って画面遷移するシステムを作ろうとす...
異常に面倒くさかったりするが、
PEAR::HTML_Ajaxなら非常に簡単。
発想を変えれば良いだけだね。
PEAR::HTML_Ajaxを使って、
画面を表示すると、
innerHTMLが使われる。
PHPerな人には分かり難いかもしれない。
特定のＩＤ属性を持っているタグの内側にねじ込むようにタグ...
で、そのinnerHTMLで表示されたものの中に、
画面遷移用のリンクをつけたjsvaScriptコードが入っていると、
画面遷移が成立するというわけ。
(￣- ￣ ) ウーン
言葉にするのは難しい。
サンプルはこんな感じ。
prev, nextをポチポチ押すと、
now:の数値が変わっていくシンプルなもの。
これをオフセット値と見立てると、
画面遷移のできあがりというわけ。
例によってファイルは三つ。
ajax.html
<html>
<body>
<script type="text/javascript" src="server.php?client=al...
<span id="list">I'm the target</span>
<script type="text/javascript">
HTML_AJAX.replace('list','output.php');
</script>
</body>
</html>
server.php
<?php
include 'HTML/AJAX/Server.php';
$server = new HTML_AJAX_Server();
$server->handleRequest();
?>
output.php
<?
$offset = $_GET["offset"];
$prev = $offset - 1;
$next = $offset + 1;
$html = <<<HTML
<a href="javascript:void(0)" onclick="return HTML_AJAX.r...
now: $offset
<a href="javascript:void(0)" onclick="return HTML_AJAX.r...
HTML;
echo $html;
?>
結果はこんな感じ
<HTML>
<HEAD/>
<BODY>
<DIV id="HTML_AJAX_LOADING"> Loading... </DIV>
<SCRIPT src="server.php?client=all" type="text/javasc...
<SPAN id="list">
<A onclick="return HTML_AJAX.replace('list','output...
now:
<A onclick="return HTML_AJAX.replace('list','output...
</SPAN>
<SCRIPT type="text/javascript">
HTML_AJAX.replace('list','output.php');
</SCRIPT>
</BODY>
</HTML>
重要なのはid属性が"list"のSPANタグの中。
一般的なページャーの仕組みがこの中に入っていて、
onClickをトリガーにreplaceメソッドを動かす。
一般的なＰＣページでは、
一ページの中にたくさん情報を載せるが、
これを使えばその中の一部分だけ入れ替えることが出来る。
-tes -- [[tes]] &new{2006-12-10 03:00:33 (日)};
-tes? -- [[dozo]] &new{2006-12-20 23:21:30 (水)};
#comment
ページ名:
[
トップ
] [
新規
|
一覧
|
単語検索
|
最終更新
|
ヘルプ
] [
リンク元
]
Third Project
証券会社ランキング比較
![[PukiWiki]](/pear/image/pukiwiki.png "[PukiWiki]")
