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方法来注入它们。假设你有一个具有url属性的Link类，你可以像这样覆盖方法，并将$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>