Создаем сайт с помощью PHP, MySql и jQuery Mobile. Часть 2

12-10-21 root JavaScript, Php 3

В этом уроке мы продолжим создавать наш мобильный сайт. В первом уроке мы написали серверную часть нашего сайта. В этом уроке мы займемся jQuery.

Представления

Представления — это php файлы, которые содержат шаблоны html. Отображать шаблоны будет функция render(). Мы будем использовать 7 представлений – _category.php, _product.php, _header.php, _footer.php, category.php, home.php and error.php. Функция render():

/* вспомогательные функции */

function render($template,$vars = array()){

	// передаем функции имя шаблона
	// и список переменных для формирования представления.

	extract($vars);

	// так же функции можно передать несколько шаблонов
	if(is_array($template)){

		foreach($template as $k){

			$cl = strtolower(get_class($k));
			$$cl = $k;

			include "views/_$cl.php";
		}

	}
	else {
		include "views/$template.php";
	}
}

Теперь перейдем к самим представлениям. includes/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">

Закрывающие теги и «подвал» находятся в includes/views/_footer.php:

	</div>

	<div data-role="footer" id="pageFooter">
		<h4><?php echo $GLOBALS['defaultFooter']?></h4>
	</div>
</div>

</body>
</html>

includes/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')?>

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><?php echo $category->contains?></span></a>
</li>

В переменной $category хранится объект, для которого сгенерировано представление, когда посетитель нажимает на ссылку вида /?category=id будет показано представление category.php:

<?php render('_header',array('title'=>$title))?>

<div>
	<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="c">
        <?php render($products) ?>
    </ul>
</div>

<div>
    <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')?>

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;
}

Наш мобильный магазин готов!

Смотрите также

3 Комментария

alex says:

07.02.2013 в 8:40 дп

а где в исходниках использование библиотеки Jquery ?

Ответить
1. root says:
  
  07.02.2013 в 12:35 пп
  
  В исходниках, в папке includes/views в файле _header.php происходит подключение библиотек jQuery Mobile и jQuery, которая необходима для работы первой. Используется библиотека добавлением HTML5 аттрибутов data-role, например, data-role=»listview» в теге <ul> дает список категорий, который пригоден для отображения на мобильных устройствах.
  
  Ответить
d says:

17.04.2015 в 9:16 дп

круто спасибо

Ответить