HTML元素 · 国外PHP框架Nette官网教程

# HTML元素 Nette \ Utils \ Html类帮助HTML生成。所有示例都需要设置以下的use： ~~~ use Nette\Utils\Html; ~~~ ~~~ $el = Html::el('img'); // creates <img> element $el->src = 'image.jpg'; // sets src attribute echo $el; // prints <img src="image.jpg" /> echo $el->getName(); // returns 'img', element's name echo $el->isEmpty(); // returns TRUE, as <img> is in fact empty ~~~ 可以通过对象属性更改或读取HTML属性。将值设置为NULL或使用unset（）函数删除它将删除该属性。 ~~~ echo $el->src; // prints 'image.jpg' unset($el->src); // or $el->src = NULL; - removes src attribute ~~~ 通过调用链接方法（流畅接口）可以实现完全相同的输出： ~~~ // <img src="image.jpg" alt="photo" /> echo Html::el('img')->src('image.jpg')->alt('photo'); ~~~ 属性可以批量设置，即使在创建元素时也是如此： ~~~ $el = Html::el('input type=text class="red important"'); $el = Html::el('input', [ 'type' => 'text', 'class' => ['red', 'important'], ]); $el->addAttributes([ // bulk attributes set 'value' => $val, 'required' => TRUE, ]); ~~~ 自动跨站脚本（XSS）保护是一个重要功能： ~~~ echo Html::el('input')->value('<script>alert()</script>'); // <input value="<script>alert()</script>" /> ~~~ 属性的值不能只是一个字符串，但也可以是一个布尔或数组。 ~~~ $checkbox = Html::el('input')->type('checkbox'); $checkbox->checked = TRUE; // <input type="checkbox" checked="checked" /> $checkbox->checked = FALSE; // <input type="checkbox" /> // with arrays $el->class[] = $active ? 'active' : NULL; // attribute equal to NULL is ignored $el->class[] = 'top'; // alternatively $el->class['top'] = TRUE; or $el->class('top', TRUE); $el->style['color'] = 'green'; // or $el->style('color', 'green'); $el->style['display'] = 'block'; echo $el; // <input class="active top" style="color: green; display: block" /> ~~~ Metod href（）有助于链接网址： ~~~ echo Html::el('a')->href('index.php', [ 'id' => 10, 'lang' => 'en', ]); // <a href="index.php?id=10&lang=en"></a> ~~~ HTML5支持用户设置数据的所谓数据属性： ~~~ <img src="img.jpg" data-max-size="500x300" /> ~~~ 这些值通常在JavaScript中使用。他们在所有浏览器中工作。 Html类直接支持这些属性： ~~~ $el = Html::el('img'); $el->data['max-size'] = '500x300'; // or $el->data('max-size', '500x300'); ~~~ ## 元素的内容文本内容可以使用setText（）或setHtml（）或在创建元素时设置： ~~~ echo Html::el('a')->href('#')->setText('link<br>'); // <a href="#">link<br></a> echo Html::el('a')->href('#')->setHtml('link<br>'); // <a href="#">link<br></a> echo Html::el('strong', 'Nette'); // <strong>Nette</strong> or equal output with setText() ~~~ 获取元素的文本内容是通过getText（）或getHtml（）完成的。更多Html元素可以互相嵌套在一起： ~~~ $el = Html::el('div'); // inserts new element <strong> into <div> $strong = $el->create('strong', 'Nette'); // or $el->create('strong')->setText('Nette') // inserts an Html object into <div> $el->add( Html::el('br') ); // $el[] = Html::el('br'); echo $el; // <div><strong>Nette</strong><br /></div> // inserts a string into <div> $el->add('<i>Yes!</i>'); // unlike setHtml() this does not remove the current content of $el $el->insert(0, Html::el('span')); // prepends new Html node to first position ~~~ 方法removeChildren（）删除所有子节点。子节点可以像数组一样访问，包括迭代： ~~~ echo $el[2]; // <br /> foreach ($el as $child) { ... } echo count($el); // 4 - amount of child nodes ~~~ ## 生成HTML输出打印HTML元素的最简单的方法是使用echo函数或type-cast it字符串。打开和关闭标签可以单独打印： ~~~ $el = Html::el('div class=header'); echo $el; // <div class="header"></div> $s = (string) $el; // inserts <div class="header"></div> into $s echo $el->startTag(); // <div class="header"> echo $el->endTag(); // </div> ~~~ 输出格式由静态属性Html :: $ xhtml设置。默认为FALSE，即。 HTML有效输出： ~~~ $el = Html::el('input')->disabled(TRUE); echo $el; // <input disabled> Html::$xhtml = TRUE; echo $el; // <input disabled="disabled" /> ~~~