# 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" />
~~~
- Nette簡介
- 快速開始
- 入門
- 主頁
- 顯示文章詳細頁
- 文章評論
- 創建和編輯帖子
- 權限驗證
- 程序員指南
- MVC應用程序和控制器
- URL路由
- Tracy - PHP調試器
- 調試器擴展
- 增強PHP語言
- HTTP請求和響應
- 數據庫
- 數據庫:ActiveRow
- 數據庫和表
- Sessions
- 用戶授權和權限
- 配置
- 依賴注入
- 獲取依賴關系
- DI容器擴展
- 組件
- 字符串處理
- 數組處理
- HTML元素
- 使用URL
- 表單
- 驗證器
- 模板
- AJAX & Snippets
- 發送電子郵件
- 圖像操作
- 緩存
- 本土化
- Nette Tester - 單元測試
- 與Travis CI的持續集成
- 分頁
- 自動加載
- 文件搜索:Finder
- 原子操作