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" /> ~~~