---

    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">


        $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



        <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
        一起, 固定在頁面的下方



        先這樣....

--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 36.224.205.109

--