note: 8月 2014

使用 jQuery Mobile 時，jQuery Mobile 預設是用 ajax 載入頁面的內容，所以使用連結或送出

表單到另一個頁面應是把 <body> 裡的資料載入呈現，body 以外的 script, js, css 不會再被重

新要求載入、執行。

測試程式碼：

<body>
    <div>
        <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
            <li><a href="link2.html">link2</a></li>                
        </ul>
        <a href="link2.html" data-role="none">link2</a>
    </div>
</body>

測試程式碼二：

<script type="text/javascript">
    $(document).ready(function() {
        alert('test');
    });
</script>

<body>
    <div>link test</div>
</body>

(script 放在 head 的 tag 之間)

(以上程式碼要在 head 引入 jQuery Mobile 的 js code)

(利用程式碼一連結程式碼二的頁面)

(用 chrome 的 network 看，有載入所用到的檔案)

(程式碼二的 script 不會被執行)

(不會再載入用到的 script)

測試：

把 script 放在 body 裡時，script 有被執行，但是放在 body 之外的其他地方，script 不會被執

行，推測應該是只把 body 裡的程式碼載入呈現。

解決辦法：

關閉 jQuery Mobile 預設的 ajax：在 <a>、<form> 裡加入 data-ajax="false"。

修改程式碼一

<body>
    <div>
        <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
            <li><a href="link2.html" data-ajax="false">link2</a></li>                
        </ul>
        <a href="link2.html" data-role="none" data-ajax="false">link2</a>
    </div>
</body>

(script 成功被執行)

registerJs 可以用來插入 script，並設定插入位置、執行時機。

registerJs( $js, $position, $identified_name );

$js : 放入 script

$position :

有五種： POS_HEAD、POS_BEGIN、POS_END、POS_READY、POS_LOAD

POS_HEAD：放在 <head> 和 </head> 之間

POS_BEGIN：放在 <body> 的一開始

                           ex : <body>
                                      <script type="text/javascript">
                                          ...
                                      </script>

                                      HTML....
                                  </body>

POS_END：放在 <body> 的最後 ( </body> 前 )

                           ex : <body>
                                      HTML....

                                      <script type="text/javascript">
                                          ...
                                      </script>
                                  </body>

POS_READY：測試時，發現放的位置和 POS_END 一樣

                            但所設定的 script 會放在 jQuery(document).ready(fuction(){ ... }); 裡

   ex : <body>
                                      HTML....

                                      <script type="text/javascript">

                     jQuery(document).ready(function () {
                         ...
                     });

                                      </script>
                                  </body>

   ready : 等到 HTML 的 tag 都產生後才執行 script，因為 script 裡面可能會有想

                                       要抓取 tag、對 tag 做設定，所以要等 tag 產生，否則 script 在執行時

                                       會有問題。

POS_LOAD：測試時，發現放的位置和 POS_END 一樣

但所設定的 script 會放在 jQuery(window).load(fuction () { ... }); 裡

   ex : <body>
                                      HTML....

                                      <script type="text/javascript">

                     jQuery(window).load(function () {
                         ...
                     });

                                      </script>
                                  </body>

                           load : 會等到所有網頁的資源都下載完後才執行 script，因為 scirpt 裡面可能

   會有想要抓取這些資源的資訊，所以要等這些資源下載完，否則 script

   在執行時會有問題。

                                     資源：ex : 圖片、flash、iframe

$identified_name :

設定這組註冊 script 的名稱，預設為 null。如果有兩個註冊的名稱相同，後面的會覆蓋前面的

script。

使用前：

regitserJs 是放在 yii\web\View 裡面，如果要方便使用的話，可以先

use yii\web\View;

之後就可以 $this->registerJs( ... );

使用範例：

use yii\web\View;

$this->registerJs(

"alert( "registerJs test" );" ,

          POS_HEAD,

          null
);

note

2014年8月12日星期二

jQuery Mobile 載入新頁面

2014年8月6日星期三

Yii2 registerJs

2014年8月12日 星期二

jQuery Mobile 載入新頁面

2014年8月6日 星期三

Yii2 registerJs

2014年8月12日星期二

2014年8月6日星期三