README

#Canteen HTML5

使用简单的直观PHP API创建动态、格式良好的HTML5标记。这是Gagawa项目的分支/重写。[Gagawa项目](https://code.google.com/p/gagawa/)。CanteenHTML5是一个简洁、灵活且易于记忆的API，可以创建简单的标记（如链接）或更复杂的结构（如表、文档或嵌套列表）。所有标签和属性名称都与当前HTML5规范进行验证。

有关代码库的文档，请参阅[Canteen HTML5文档](http://canteen.github.io/CanteenHTML5/).

##要求

此库需要运行PHP 5.3+的Web服务器。此外，库的根命名空间为Canteen\HTML5。

##安装

可以使用Composer进行安装。

composer require canteen/html5 dev-master

包括使用Composer自动加载器。

require 'vendor/autoload.php';

##用法

###基本用法

// Enable the global use of html()
Canteen\HTML5\HTML5::useGlobal();

// Turn on autoloading if not using composer's autoloading
Canteen\HTML5\HTML5::autoload();

echo html('img src=home.jpg');
echo html('img', 'src=home.jpg'); 
echo html('img', array('src'=>'home.jpg'));

创建HTML节点，只需调用全局html方法，传递标签名称，然后是任何属性。

<img src="home.jpg" />

所有这些示例都会输出

###添加属性

可以为HTML容器节点（如<p>、<div>）添加不同的属性，例如下面的<nav>。
```
echo html('nav title="Navigation" class=main', 'Welcome');
```

标签的一部分

echo html('nav', 'Welcome', array('title'=>'Navigation', 'class'=>'main'));

作为一个关联数组

echo html('nav', 'Welcome', 'title="Navigation" class=main');

作为一个简写字符串

$nav = html('nav', 'Welcome');
$nav->class = 'main';
$nav->title = 'Navigation';
echo $nav;

作为一个属性方法

<nav title="Navigation" class="main">Welcome</nav>

所有这些示例都会输出相同的标记

###添加嵌套元素

$label = html('span', 'Website!');
$link = html('a', $label);
$link->href = 'http://example.com';
echo $link;

任何HTML5容器标签（如<p>、<span>或<div>）都可以有子元素。这些元素可以是字符串或其他HTML5元素对象。

$link = html('a');
$link->href = 'http://example.com';
$link->addChild(html('span', 'Website!'));
echo $link;

或者使用addChild方法为任何容器标签。

$link = html('a');
$link->href = 'http://example.com';
html('span', 'Website!')->appendTo($link);
echo $link;

或者使用appendTo来指定要添加到的容器

<a href="http://example.com"><span>Website!</span></a>

所有示例都会输出

###CSS选择器

echo html('a#example'); //<a id="example"></a>
echo html('span.small'); //<span class="small"></span>
echo html('span.small.label'); //<span class="small label"></span>
echo html('span#example.small.label'); //<span id="example" class="small label"></span>

标签名称可以包含CSS风格的类和id选择器

##API文档

html($tag, $attributes=null);

####对于自闭合元素（例如 <br>、<img>）
$tag {string} 可以包含CSS选择器或简写属性字符串的有效HTML5元素名称。

$attributes {array | string} (可选) 元素属性集合

返回一个Canteen\HTML5\Node对象。

####节点方法
setAttribute($name, $value) 通过名称和值设置属性。
setAttributes($values) 设置一组名称/值对。
setData($name, $value) 在HTML5元素上设置data-*字段。
getData($name) 获取HTML5元素上的data-*字段。
appendTo(NodeContainer $container) 将元素添加到容器元素的末尾。

prependTo(NodeContainer $container) 将元素添加到容器元素的开头。

html($tag, $contents=null, $attributes=null);

####对于自闭合元素（例如 <br>、<img>）
####对于容器HTML元素（例如 <p>、<div>）
$tag {string} 可以包含CSS选择器或简写属性字符串的有效HTML5元素名称。

$contents {string | Node | NodeContainer} (可选) 标签内容的字符串，或另一个通过html()创建的元素

返回一个Canteen\HTML5\NodeContainer对象。

####NodeContainer方法（扩展Node）
addChild($node) 将Node对象添加到节点集合的底部
addChildAt($node, $index) 在特定零索引位置添加Node对象
removeChildAt($index) 通过零基于索引移除一个节点
removeChildren() 从容器中移除所有子节点
getChildren() 获取所有 Node 对象的集合
getChildAt($index) 获取特定索引处的 Node 对象

###其他组件

####文档

Document 对象用于创建一个基本 HTML5 文档。

Canteen\HTML5\Document($title='', $charset='utf-8', $beautify=false);

$title {字符串} (可选) 文档的标题
$charset {字符串} (可选) 要使用的 HTML 字符集
$beautify {布尔值} (可选) 如果输出应该是一个缩进的艺术作品。

属性

head {NodeContainer} 文档的 <head> 元素
body {NodeContainer} 文档的 <body> 元素
title {NodeContainer} 文档的 <title> 元素

	use Canteen\HTML5\Document;
	$doc = new Document('Untitled');
    $doc->head->addChild(html('script src=main.js'));
    $doc->body->addChild(html('div#frame'));
    echo $doc;

####简单列表

SimpleList 用于方便地创建 <ul> 和 <ol> 元素。

Canteen\HTML5\SimpleList($elements, $attributes=null, $type="ul");

$elements {数组} 字符串或其他 HTML 元素的集合
$tag {string} 可以包含CSS选择器或简写属性字符串的有效HTML5元素名称。
$type {字符串} (可选) "ul" 或 "ol" 的值

####表格

Table 对象用于创建 <table> 元素。

Canteen\HTML5\Table($data, $headers=null, $checkbox=null);

$data {数组} 关联数组的集合，包含键/值对
$headers {数组} (可选) 标题标签的名称
$checkbox {字符串} (可选) 数据中要替换为复选框的键名，例如 "id"

// Create a sample table with some rows of dummy data
$table = new Table(
    array(
        array('id'=>1, 'first'=>'James', 'last'=>'Smith'),
        array('id'=>2, 'first'=>'Mary', 'last'=>'Denver'),
        array('id'=>3, 'first'=>'Charlie', 'last'=>'Rose')
    ),
    array('ID', 'First Name', 'Last Name')
);

###重新构建文档

此库使用 YUIDoc 自动文档化。要安装 YUIDoc，请运行 sudo npm install yuidocjs。此外，此项目需要与该存储库一起检出 CanteenTheme。要重新构建文档，请从命令行运行 ant 任务。

ant docs

##许可证##

在 MIT 许可证下发布。

食堂 / html5

维护者

详细信息

README