ZendX_JQuery

(訳書こうとおもったけど相変わらず意味なさそうなのでやめました。)

細かな説明をすっとばして、実用例を見たい人向け

使い方

extraの中に入っているので、なんとかほじくり出すしかない。ZendXというのはこれの事のようだ。 http://code.google.com/p/zendx/

Zend Frameworkのフルパッケージにも入っているが、何はともあれextraの中のコードをパスの通った所に置かなくてはいけない。おすすめはプロジェクトディレクトリのlibraryの中とか。

とにかく呼び出してみる

いろいろ呼び出し方は考えられるが、ここではBootstrap.phpからつっこむ例

    protected function _initDoctype() {
        $this->bootstrap('view');
        $view = $this->getResource('view');
        $view->addHelperPath("ZendX/JQuery/View/Helper", "ZendX_JQuery_View_Helper");
    }

configなどでviewをつかめるようにしておく必要があるが、とりあえずこれで前準備はOK!

で、layoutなどを使っている場合はここにヘッダを書かねばならないので、こんな具合にする

<html>
  <head>
  <title>...<.title>
  <?php echo $this->jQuery(); ?>
  </head>
  <body>
   <?php echo $this->layout()->content; ?>
  </body>

実はこれだけでは何も起きない。view側で呼び出した時に始めて呼びこまれる仕様らしい。

views/scripts/index/index.phtmlとか

    <?php echo $this->ajaxLink("Show me something",
                        "/hello/world",
                        array('update' => '#content'));?>
 
    <div id="content"></div>

outputのhtmlソースを見ると、こんなんになっている

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
 
<script type="text/javascript">
//<!--
$(document).ready(function() {
    $("a.ajaxLink1").click(function() { $.get("/hello/world", {}, function(data, textStatus) { $("#content").html(data); }, "html");return false; });
});
//-->
 
</script>

この例をもうちょっと正しく動作させてみよう。

ZendX_JQueryのマニュアルをもう少し掘り下げる作業

流石に「"/hello/world"」ではアレなので、もうちょっとちゃんと書きましょう。indexコントローラのhelloアクションにでも変更。

    <?php echo $this->ajaxLink("Show me something",
                        $this->url(array('action' => 'hello')),
                        array('update' => '#content'));?>
 
    <div id="content"></div>

action作る。

% zf create action hello 

この時点で、押すと

View script for controller Index and script/action name hello

的なのが出るはずだ。しかしこれではイケてないので改良する。

まず、helloアクション直でアクセスしてみる。public/index/helloとかやね、多分。

これ、ちょっとわかり辛いのだが、layoutの中に入ってしまっているのでtitleタグなどが出てしまっている。これをバッサりカットする、といってもlayoutを無効にするだけ。

    public function helloAction()
    {
//        if($this->_isXmlHttpRequest()) {
            $this->_helper->layout()->disableLayout();
//        }
    }

厳密にチェックしたい場合は_isXmlHttpRequest()もくぐらせておくとよい。とり急ぎこれでレイアウトが解除された事が確認できる。

あとは出力したい文字をviewに書くなりcontrollerから書くなりすればOK。

もうちょっとスマートにやりたい場合はContextSwitch and AjaxContextも参考されたい。

引数の説明とかは、、、いいよね?

バージョン違いのCDNやらローカルのcoreライブラリを見にゆかせる

デフォルトで1.3.2とかいうcoreライブラリを見にいくのだが、現在最新が1.7.1とかだったりするので、これを扱いたい場合の解を考えてみる。

とり急ぎバージョンだけ変更する場合、layoutの所をこんな具合に変更する。

            <?php // echo $this->jQuery(); ?>
            <?php echo $this->jQuery()->setVersion('1.7.1'); ?>

jQueryUIのバージョンを変更するなら、setUiVersion()も。

ローカルにjqueryを保存した場合は以下のようにして見に行かせる事ができる。 (public/js/jquery-1.7.1.min.js を見る場合)

            <?php echo $this->jQuery()->setLocalPath($this->baseUrl('/js/jquery-1.7.1.min.js')); ?>

この手の設定は別段ビューでとりこまなくてはならないというわけでもなくcontroller側に書いておいてもよし。 最終的に$this→jQuery()をechoすればOK($this→jQueryでも内部的に文字変換されていけるっぽい(未確認))

jQueryやjQueryUIを最初から表示(有効化)させる

現在までのviewの呼びだし方だと、ヘルパから何か呼びこまれるまでjQueryがincludeされないというかsrc先にならない。この為、自分自身のカスタムスクリプトを呼び出そうと思うと、ちょっと具合が悪い。 これを避けるため、デフォルトで表示させるようにする。

Bootstrap

    protected function _initDoctype() {
        $this->bootstrap('view');
        $view = $this->getResource('view');
        #$view->addHelperPath("ZendX/JQuery/View/Helper", "ZendX_JQuery_View_Helper");
        ZendX_JQuery::enableView($view);
        $view->jQuery()->enable();
        // $view->jQuery()->uiEnable();
 
    }

addHelperPathから呼び方を変更したのは、ZendX_Jquery::enableViewがどうやら等価である事が判明した為。

ここでのポイントは$view→jQuery→enable()であり、これにより特に呼び込みが行われなくても呼び出しが行われるようになっている。 uiもそうしたいのであればuiEnableのコメントを外せばそうなる。

layout

<?php echo $this->jQuery()->setLocalPath($this->baseUrl('/js/jquery-1.7.1.min.js')) ?>

こんな感じ。BootstrapでLocalPathを付けるのも、もちろんあり。個人的にはこんな具合が好みというだけで。

zendframework/zendx_jquery.txt · 最終更新: 2012/04/07 10:32 (外部編集)
www.chimeric.de Creative Commons License Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0