[心得] Yii + jQuery Mobile (2)

看板PHP作者cokellen (cokellen)時間12年前 (2013/04/11 12:41)推噓3(3推 0噓 0→)

留言3則, 3人參與討論串1/1

3.引入檔案 A.本機端 CSS和Img及JS這些檔案, 通常是放在專案的最外層, Yii建立好專案後, 固定會有以下這些資料夾 /assets /css /images /protected /themes CSS內設定的圖片路徑就照一般即可, 如果是在/protected內的檔案要讀取圖片, 則使用下列語法取得專案的路徑 <img src="<?php echo Yii::app()->request->baseUrl; ?>/images/ act/act_01.jpg"> 同理, CSS和JS也是這樣引入, 通常CSS和JS會設定在layouts/main.php這個主樣板內, 如果某些特殊頁面需要不同的CSS和JS, 則在那個View檔案中, 加入 $baseUrl = Yii::app()->baseUrl; $cs = Yii::app()->getClientScript(); $cs->registerScriptFile($baseUrl.'/js/yourscript.js'); $cs->registerCssFile($baseUrl.'/css/yourcss.css'); B.遠端使用jQuery Mobile時, 如果要遠端引入jQuery官網的jquery.mobile.js, 在加上jquery.mobile.js需要配合指定版本的jquery.js, 會跟Yii內建的 jquery.js衝突打開/protected/config/main.php, 在components這段程式碼中加上 'clientScript'=>array( 'packages'=>array( 'jquery'=>array( 'baseUrl'=>'http://code.jquery.com/', 'js'=>array('jquery-1.8.2.min.js'), 'coreScriptPosition'=>CClientScript::POS_HEAD ), jquery.mobile'=>array( 'baseUrl'=>'http://code.jquery.com/mobile/1.3.0/', 'js'=>array('jquery.mobile-1.3.0.min.js'), 'depends'=>array('jquery'), 'coreScriptPosition'=>CClientScript::POS_BEGIN ) ), ), 接著在layouts/main.php主樣版中, 使用下列語法 <?php $cs = Yii::app()->getClientScript(); $cs->registerCoreScript('jquery'); $cs->registerCoreScript('jquery.mobile'); ?> 4.樣板專案建立時初始在layouts中會有column1.php, column2.php, main.php, 預設使用的是column1.php, 此檔案的程式碼中可以看到 <?php $this->beginContent('//layouts/main'); ?> ...... ...... <?php $this->endContent(); ?> 表示是使用main.php A.一般網頁一般的網頁大部分就是由上而下分三個區塊, 在layouts/main.php中 <div class='header'></div> <?php echo $content;?> <div class='footer'></div> 其中$content就是在controller各個action指定使用的View所產生的頁面, 例如在siteController中 public function actionLogIn() { $model = new LoginForm; $this->render('login',array('model'=>$model)); } 則會使用views/site/login.php來當作View B.jQuery Mobile jQuery Mobile的架構跟一般網頁稍有不同, 可以在同一支Html檔案中 , 將整個網站的內容放進去, 以DIV做各頁面的區塊, 每個頁面區塊一樣包含header, content, footer例如: <div data-role='page' id='login'> <div data-role='header'></div> <div data-role='content'></div> <div data-role='footer'></div> </div> <div data-role='page' id='news'> <div data-role='header'></div> <div data-role='content'></div> <div data-role='footer'></div> </div> 純靜態頁面時這樣使用還不錯, 但是需要後端程式做處理就不適合了, 在Yii中的layouts/main.php 則變成 <div data-role='page'> <div data-role='header'></div> <div data-role='content'> <?php echo $content;?> </div> <div data-role='footer'> [回首頁][功能選單] </div> <?php $this->beginContent('//layouts/menu'); ?> <?php $this->endContent(); ?> </div> JQM(jQuery Mobile)的header和footer在使用手機瀏覽時, 會自動固定在上方及下方, 通常footer可能會放[回首頁]和[功能選單], 而[功能選單]是共用的頁面, 所以使用beginContnet來引入, menu.php的內容大約是: <div data-role='panel' data-position='right'> [登入] [申請會員] [最新消息] </div> 則這個Menu區塊會從右方往左邊展開有些頁面可能需要在下方有[分頁Bar], 可以參考巴哈姆特手機版樣式, 這時候就需要不同的主樣版, 剛剛有提到controller預設是使用column1.php , 這時候需要額外設定class SiteController中宣告樣版變數 public $layout = 'column1'; 接著在指定的action中設定 public function actionNews() { $this->layout = 'column_page'; } 則當頁面為News時, 會使用column_page.php, 其他頁面則是使用 column1.php, 接著column_page.php再搭配main_page.php, main_page.php中的內容則變成 <div data-role='page'> <div data-role='header'></div> <div data-role='content'> <?php echo $content;?> </div> <div data-role='footer'> <?php $this->beginContent('//layouts/page'); ?> <?php $this->endContent(); ?> [回首頁][功能選單] </div> <?php $this->beginContent('//layouts/menu'); ?> <?php $this->endContent(); ?> </div> 在footer中加入page.php產生分頁功能的php, 這個分頁Bar就會跟footer 一起, 固定在頁面的下方 JQM專有的attribute不少, 公司美術是使用DreamWeaver做開發, 有自動提示功能, 開發起來比較方便, 至於其他編輯器如果沒支援JQM, 要一個一個手key也滿累的先這樣.... -- ※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 36.224.205.109