使用 PHP、MySQL 和 jQuery Mobile 構建網站，第 2 部分
這是兩部分教程的第二部分，我們使用 PHP、MySQL 和 jQuery mobile 構建一個簡單的計算機網絡商店。在上一部分中我們創建了模型和控制器，這次我們將編寫我們的視圖。
jQuery 移動
首先，讓我們談談我們將使用的庫。 jQuery mobile 是一個位於 jQuery 之上的用戶界面庫，以即用型小部件和触摸友好的開發環境的形式為各種設備提供支持。它仍處於測試階段，但升級到官方 1.0 版本將像交換 CDN URL 一樣簡單。
該庫是圍繞漸進增強構建的。作為開發人員，您只需要關心輸出正確的 HTML，剩下的就交給庫了。 jQuery mobile 使用 HTML5 data- 屬性並通過添加它們，您可以指示庫應該如何呈現您的標記。
在本教程中，我們將使用該庫為我們提供的一些界面組件 - 列表、頁眉和頁腳欄和按鈕，所有這些都是使用 data-role 定義的 屬性，您將在下一節中看到它們的使用。
渲染視圖
視圖是生成 HTML 代碼的 PHP 文件或模板。它們由控制器使用 render() 打印 輔助功能。我們有 7 個視圖正在使用這個網站 - _category.php , _product.php , _header.php , _footer.php , category.php , home.php 和 error.php , 稍後討論。首先，這裡是 render() 功能：
包括/helpers.php
/* These are helper functions */
function render($template,$vars = array()){
// This function takes the name of a template and
// a list of variables, and renders it.
// This will create variables from the array:
extract($vars);
// It can also take an array of objects
// instead of a template name.
if(is_array($template)){
// If an array was passed, it will loop
// through it, and include a partial view
foreach($template as $k){
// This will create a local variable
// with the name of the object's class
$cl = strtolower(get_class($k));
$$cl = $k;
include "views/_$cl.php";
}
}
else {
include "views/$template.php";
}
} 此函數的第一個參數是 views/ 中的模板文件的名稱 文件夾（沒有 .php 擴大）。接下來是一個帶參數的數組。這些被提取出來並形成了可以在模板中使用的真實變量。
還有另一種調用此函數的方法 - 您可以傳遞帶有對象的數組，而不是模板名稱。如果您記得上次，這是使用 find() 返回的內容 方法。所以基本上如果你通過 Category::find() 的結果 渲染 ，該函數將遍歷數組，獲取其中對象的類名，並自動包含 _category.php 每個模板。一些框架（例如 Rails）調用這些部分。
觀點
讓我們從第一個視圖開始 - 標題。您可以看到該模板只是帶有交錯 PHP 代碼的常規 HTML5 頁面的頂部。此視圖用於 home.php 和 category.php 促進代碼重用。
包括/views/_header.php
<!DOCTYPE html>
<html>
<head>
<title><?php echo formatTitle($title)?></title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
<link rel="stylesheet" href="assets/css/styles.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-theme="b">
<a href="./" data-icon="home" data-iconpos="notext" data-transition="fade">Home</a>
<h1><?php echo $title?></h1>
</div>
<div data-role="content"> 在頭部部分，我們包括來自 jQuery 的 CDN 的 jQuery 和 jQuery mobile，以及兩個樣式表。身體部分是有趣的地方。我們用 data-role="page" 定義一個 div 屬性。這與 data-role="content" div，是庫要求出現在每個頁面上的兩個元素。
data-role="header" div 被轉換為標題欄。 數據主題 屬性選擇 5 個標準主題之一。在其中，我們有一個鏈接，該鏈接分配了一個主頁圖標，並隱藏了其文本。 jQuery Mobile 帶有一組圖標供您選擇。
結束標籤（和頁腳欄）位於 _footer.php 觀點：
包括/views/_footer.php
</div>
<div data-role="footer" id="pageFooter">
<h4><?php echo $GLOBALS['defaultFooter']?></h4>
</div>
</div>
</body>
</html> 這裡沒有什麼太花哨的。我們只有一個帶有 data-role="footer" 的 div 屬性，並在其中打印全局可訪問的 $defaultFooter 變量，在 includes/config.php 中定義 .
以上兩個視圖都不是由我們的控制器直接打印的。它們被 category.php 使用 和 home.php ：
包括/views/home.php
<?php render('_header',array('title'=>$title))?>
<p>Welcome! This is a demo for a ...</p>
<p>Remember to try browsing this ...</p>
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
<li data-role="list-divider">Choose a product category</li>
<?php render($content) ?>
</ul>
<?php render('_footer')?>
如果您還記得，主視圖是在主控制器中呈現的。在那裡，我們傳遞了一個包含所有類別的數組，在這裡可以使用 $content .所以這個視圖的作用是打印頁眉和頁腳，定義一個 jQuery 移動列表視圖（使用 data-role 屬性），並生成控制器傳遞的類別的標記，使用這個模板（由 渲染（） ):
index.php/views/_category.php
<li <?php echo ($active == $category->id ? 'data-theme="a"' : '') ?>>
<a href="?category=<?php echo $category->id?>" data-transition="fade">
<?php echo $category->name ?>
<span class="ui-li-count"><?php echo $category->contains?></span></a>
</li>
請注意，我們有一個 $category 指向正在為其生成此視圖的實際對象的 PHP 變量。這是在渲染函數的第 24/25 行完成的。當用戶點擊上述片段生成的鏈接之一時，他將被帶到 /?category=someid url，它將顯示 category.php 視圖，如下所示。
<?php render('_header',array('title'=>$title))?>
<div class="rightColumn">
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="c">
<?php render($products) ?>
</ul>
</div>
<div class="leftColumn">
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
<li data-role="list-divider">Categories</li>
<?php render($categories,array('active'=>$_GET['category'])) ?>
</ul>
</div>
<?php render('_footer')?> 該文件還使用頁眉、頁腳和 _category 視圖，但它還顯示了一個包含產品的列（由類別控制器傳遞）。產品使用 _product.php 呈現 部分：
<li class="product">
<img src="assets/img/<?php echo $product->id ?>.jpg" alt="<?php echo $product->name ?>" />
<?php echo $product->name ?> <i><?php echo $product->manufacturer?></i>
<b>$<?php echo $product->price?></b>
</li> 由於我們有一個圖像作為 li 元素的第一個子元素，它會被 jQuery mobile 自動顯示為 80px 的縮略圖。
使用庫中定義的接口組件的優點之一是它們會自動縮放到設備的寬度。但是我們上面定義的列呢？我們需要自己用一些 CSS3 魔法來設置它們的樣式：
assets/css/styles.css
media all and (min-width: 650px){
.rightColumn{
width:56%;
float:right;
margin-left:4%;
}
.leftColumn{
width:40%;
float:left;
}
}
.product i{
display:block;
font-size:0.8em;
font-weight:normal;
font-style:normal;
}
.product img{
margin:10px;
}
.product b{
position: absolute;
right: 15px;
top: 15px;
font-size: 0.9em;
}
.product{
height: 80px;
} 使用媒體查詢，我們告訴瀏覽器如果視圖區域寬於 650 像素，它應該並排顯示列。如果不是（或者如果瀏覽器不支持媒體查詢），它們將在另一個之上顯示，這是常規的“阻止”行為。
我們完成了！
在本教程的第二部分和最後一部分中，我們編寫了視圖來利用 jQuery mobile 的精彩功能。通過我們的努力，我們能夠描述標記的角色並輕鬆創建一個成熟的移動網站。
