?
Dokumen ini menggunakan Manual laman web PHP Cina Lepaskan
客戶端腳本使用
客戶端腳本使用
注意: 此部分應用于開發(fā)環(huán)境
注冊腳本
你可以使用 yii\web\View 對象注冊腳本。這里有兩個專門的方法： （1）yii\web\View::registerJs() 用于內(nèi)聯(lián)腳本。 （2）yii\web\View::registerJsFile() 用于注冊引入外部腳本文件。 內(nèi)聯(lián)腳本通常用于配置和動態(tài)生成代碼。 這個方法的使用可以像下面這樣：
$this->registerJs("var options = ".json_encode($options).";", View::POS_END, 'my-options');
第一個參數(shù)是我們想插入的實際JS代碼。 第二個參數(shù)確定了JS代碼插入頁面的位置?？捎玫闹等缦拢?/p>
- yii\web\View::POS_HEAD 用在HEAD部分。
- yii\web\View::POS_BEGIN 用在?
<body>?標簽的右邊。 - yii\web\View::POS_END 用在?
</body>?標簽的左邊。 - yii\web\View::POS_READY 為了在?
ready?事件中執(zhí)行代碼，這里將自動注冊yii\web\JqueryAsset。 - yii\web\View::POS_LOAD 為了在?
load?事件中執(zhí)行代碼，這里將自動注冊yii\web\JqueryAsset。
最后一個參數(shù)是一個唯一的腳本ID，主要是用于標識一段代碼塊，在添加一段新的代碼塊時，如果當前頁面已經(jīng)存在同樣ID代碼塊時，那么將會被新的替換。 如果你不傳這個參數(shù)，JS代碼本身將會作為ID來使用。
外部腳本的引入使用像下面這樣：
$this->registerJsFile('http://example.com/js/main.js', ['depends' => [\yii\web\JqueryAsset::className()]]);
yii\web\View::registerJsFile() 中參數(shù)的使用與 yii\web\View::registerCssFile() 中的參數(shù)使用類似。 在上面的例子中,我們注冊了?main.js文件，并且依賴于?JqueryAsset?類。這意味著?main.js?文件將被添加在?jquery.js?的后面。 如果沒有這個依賴規(guī)范的話，main.js和jquery.js?兩者之間的順序?qū)⒉粫欢x。
和 yii\web\View::registerCssFile() 一樣，我們強烈建議您使用?asset bundles?來注冊外部JS文件，而非使用 yii\web\View::registerJsFile() 來注冊。
注冊資源包
正如前面所提到的，我們推薦優(yōu)先使用資源包而非直接使用CSS和JavaScript。 你可以在資源管理器?asset manager?部分查看更多細節(jié)。 至于怎樣使用已經(jīng)定義的資源包，這很簡單：
\frontend\assets\AppAsset::register($this);
注冊 CSS
你可以使用 yii\web\View::registerCss() 或者 yii\web\View::registerCssFile() 來注冊CSS。 前者是注冊一段CSS代碼塊，而后者則是注冊引入外部的CSS文件，例如：
$this->registerCss("body { background: #f00; }");
上面的代碼執(zhí)行結(jié)果相當于在頁面頭部中添加了下面的代碼：
<style>body { background: #f00; }</style>如果你想指定樣式標記的附加屬性，通過一個名值對的數(shù)組添加到第三個參數(shù)。 如果你需要確保只有一個單樣式標簽，則需要使用第四個參數(shù)作為meta標簽的描述。
$this->registerCssFile("http://example.com/css/themes/black-and-white.css", [
'depends' => [BootstrapAsset::className()],
'media' => 'print',
], 'css-print-theme');
上面的代碼將在頁面的頭部添加一個link引入CSS文件。
- 第一個參數(shù)指明被注冊的CSS文件。
- 第二個參數(shù)指明?
<link>?標簽的HTML屬性，選項?depends?是專門處理指明CSS文件依賴于哪個資源包。在這種情況下，依賴資源包就是 yii\bootstrap\BootstrapAsset。這意味著CSS文件將被添加在 yii\bootstrap\BootstrapAsset 之后。 - 最后一個參數(shù)指明一個ID來標識這個CSS文件。假如這個參數(shù)未傳，CSS文件的URL將被作為ID來替代。