README

HTMLObject 是一套用于创建和操作HTML对象抽象的类。

对类的静态调用

echo Element::p('text')->class('foobar');
// <p class="foobar">text</p>

$list = List::ul(array('foo', 'bar'));

$link = Link::create('#', 'Someone');
$list->getChild(0)->addClass('active')->setValue('by '.$link);
// <ul>
//   <li class="active">foo</li>
//   <li>by <a href="#">Someone</a></li>
// </ul>

echo Link::create('#foo', 'link')->class('btn btn-success')->blank();
// <a href="#foo" class="btn btn-primary" target="_blank">link</a>

扩展核心类

核心类旨在扩展，用于创建复杂模式。所有类都实现了以下树遍历属性

$element = Element::figure();

$element->nest('content') // <figure>content</figure>

$element->nest('p', 'content') // <figure><p>content</p></figure>

$image = Image::create('img.jpg')->alt('foo'); // <img src="img.jpg" alt="foo" />
$element->setChild($image, 'thumb');

$element->getChild('thumb') // HtmlObject\Image
$element->nest(array(
  'caption' => Element::figcaption()->nest(array(
    'text' => Element::p('foobar'),
  )),
));

$element->getChild('caption.text')->getValue() // foobar
// OR
$element->captionText->getValue() // foobar
$element->captionText->getParent(0) // figure->caption
$element->captionText->getParent(1) // figure

$element->wrap('div') // <div><figure>...</figure></div>
$element->wrapValue('div') // <figure><div>...</div></figure>

您可以在 示例 文件夹中查看示例实现。

属性注入

如果您的类使用要添加到最终属性数组中的属性，您可以使用 injectProperties 方法注入它们。假设您有一个 Link 类，它有一个 url 属性，您可以像这样覆盖方法，并将 $this->url 添加到 href 属性中

protected function injectProperties()
{
  return array(
    'href' => $this->url,
  );
}

或者如果属性名称与属性名称相同，您可以简单地将它添加到自动注入属性的数组中

protected $injectedProperties = array('href', 'title');

// Will be added as href="#foo"
protected $href = '#foo';

// Will be added as title="title"
protected $title = 'title';

修改预创建的树

HtmlObject 允许使用 open 和 close 打开标签，但是当您的标签有子标签时，您有时希望在特定点打开树以在运行时注入数据，您可以这样做

$mediaObject = Element::div([
  'title' => Element::h2('John Doe'),
  'body'  => Element::div(),
]);

echo $mediaObject->openOn('body').'My name is John Doe'.$mediaObject->close();

<div>
  <h2>John Doe</h2>
  <div>My name is John Doe</div>
</div>

配置

您可以通过以下方式更改是否遵循 xHTML 或 HTML5 规范

Tag::$config['doctype'] = '{xhtml|html}';