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