README

注意： [只读] Panda Ui 包的子树拆分

Html 包允许您创建和操作 Html 控件以及其他 Html 特定工具。

简介
安装
- 通过 composer
HTML

简介

Panda Ui Html 组件是一个后端 UI 处理器/渲染引擎，它能够以更结构化的方式生成 HTML 内容。

这正是此组件如此强大的主要原因，它通过使用现有组件提供额外的、更快速和更智能的功能。

此包能够快速、轻松地使用 DOM 结构创建 HTML 页面。一些功能包括

Html 特定控件和操作
可用的 Html 控件
使用 CSS 选择器进行后端 Html 解析和选择
表单工厂和构建器
通用组件

安装

通过 composer

将以下行添加到您的 composer.json 文件中

"panda/html": "^3.1"

HTML

HTML 处理器

HTMLHandler 扩展了 DOMHandler 功能，增加了 HTML 特定函数。它提供了易于使用的单行函数来处理 HTML 特定属性，从而使 HTML 渲染和操作更加简单。示例

use \Panda\Ui\Html\Handlers\HTMLHandler;

$handler = new HTMLHandler();

// Using HTMLHandler, we can simply add a class to the element
// This function will not replicate the class if already exists
$handler->addClass($element, $class = 'new_class');

// Or add a style (append this to the style attribute)
$handler->style($element, 'color', 'blue');
$handler->style($element, 'font-size', '23px');

最重要的功能之一（也是最有用的）是 select() 函数。此函数类似于 jQuery 选择器函数，我们可以提供 CSS 选择器并返回匹配的项。此函数返回一个 DOMNodeList 对象，这些对象可以使用处理器本身进行操作

use \Panda\Ui\Html\Handlers\HTMLHandler;

$handler = new HTMLHandler();

// We want to find the document title and change the class and the value
$title = $handler->select($element->ownerDocument, $selector = '.web-document .title', $context = null)->item(0);

// Add a new class
$handler->addClass($title, $class = 'blue');

// Set the title
$handler->nodeValue($title, 'This is the document title');

HTMLHandler 提供了一系列 HTML 特定功能

addClass(DOMElement &$element, $class)
removeClass(DOMElement &$element, $class)
hasClass(DOMElement $element, $class)
style(DOMElement &$element, $name, $val = '')
innerHTML(DOMElement &$element, $value = null, $faultTolerant = true, $convertEncoding = true)
outerHTML(DOMElement $element)
select(DOMDocument $document, $selector, $context = null)

HTML 工厂

扩展 DOM 工厂，我们创建了 HTML 工厂以提供 HTML 特定功能构建。HTML 工厂提供了构建 HTML 元素的接口，这些元素需要 2 或 3 行以上才能构建。此工厂的使用方式与先前的工厂相同，在 HTMLDocument 对象中。支持的功能

buildHtmlElement($name = '', $value = '', $id = '', $class = '');
buildWebLink($href = '', $target = '_self', $content = '', $id = '', $class = '');
buildMeta($name = '', $content = '', $httpEquiv = '', $charset = '');
buildLink($rel, $href);
buildScript($src, $async = false);

use \Panda\Ui\Html\Handlers\HTMLHandler;
use \Panda\Ui\Html\Factories\HTMLFactory;
use \Panda\Ui\Html\HTMLDocument;

// Create a handler instance
$handler = new HTMLHandler();

// Create a new factory instance
$factory = new HTMLFactory();

// Create a document and provide the handler and factory
$document = new HTMLDocument($handler, $factory);


// Get the factory and build an element
$document->getHTMLFactory()->buildElement($name = 'div', $value = 'value', $id = 'id', $class = 'class');

// Document uses the above function with a 'facade' function called create:
$document->create($name = 'div', $value = 'value', $id = 'id', $class = 'class');

DOMDocument 和 HTMLDocument 都接受相应的 DOMFactory 和 HTMLFactory，以便它们可以构建自己的元素。工厂在构造函数中被注入，这意味着它们可以被任何 DOMFactoryInterface 或 HTMLFactoryInterface 替换。

HTML 基础

HTMLDocument

扩展基本 DOMPrototype，我们创建了 HTMLDocument 对象，它可以专门用于 HTML 页面。它是创建 HTML 页面的基类，同时还可以访问 HTMLFactory 类，该类提供许多创建不同 HTML 元素的功能。

HTMLElement

现在我们已经看到了 DOMItem 和基本 DOM 功能，它扩展了原生 DOMElement 功能，我们现在引入 HTMLElement。HTMLElement 扩展了基本 DOMItem 并提供新的 HTML 特定功能，使我们能够创建 HTML 页面、元素和片段。

HTML 元素提供了以下额外和 HTML 特定的功能

data($name, $value = []);
addClass($class);
removeClass($class);
hasClass($class);
style($name, $val = '');
innerHTML($value = null, $faultTolerant = true, $convertEncoding = true);
outerHTML();
select($selector, $context = null);

所有上述函数都使用在 HTMLElement 构造函数中接受的 HTMLDocument 提供的 HTMLHandler。

use \Panda\Ui\Html\HTMLDocument;
use \Panda\Ui\Html\HTMLElement;

// Create an HTMLDocument
$document = new HTMLDocument(new HTMLHandler(), new HTMLFactory());

// Create an element
$element = new HTMLElement($document, $tag = 'div', $value = '', $id = 'el_id', $class = 'el_class');

// It's easy to add a remove classes
$element->addClass('class_2');
$element->removeClass('el_class');

// We also can add data attribute using json encoding
$data = ['name1' => 'val1', 'name2' => 'val2'];
$element->data('test', $data);

// The previous data() call will generate the following attribute:
// data-test='{"name1":"val1","name2":"val2"}'

// Finally append the element to the document
// As we discussed before, we don't have to do this if we want to append the element directly to the document
$document->append($element);

HTML 表单

平台通用表单元素

表单构建器/工厂允许在单行调用中创建具有所有适当属性的项。formItem 是表单构建器内部使用的对象，以实现更少、更灵活和更智能的代码。

PHP 示例

// Single-line creator of a form element
	
// Create an HTMLDocument
$document = new HTMLDocument(new HTMLHandler(), new HTMLFactory());

// Create a form element
$fe = new FormElement($document, $itemName = 'select', $name = 'gender', $value = '', $id = '', $class = '', $itemValue = '');

// Append item to anything
$container->append($fe);

平台通用表单输入

表单构建器/工厂允许在单行调用中创建具有所有适当属性的输入。FormInput 是表单构建器内部使用的对象，以实现更少、更灵活和更智能的代码。

FormInput 扩展了 FormElement，进一步减少代码量，使平台运行更快、更高效。示例

use \Panda\Ui\Html\HTMLDocument;
use \Panda\Ui\Html\Controls\Form\FormInput;

// Single-line creator of a form input

// Create an HTMLDocument
$document = new HTMLDocument(new HTMLHandler(), new HTMLFactory());

// Create a form input
$fi = new FormInput($document, $type = 'text', $name = 'name', $id = '', $class = '', $value = '', $required = false);

// Append input to form inner container
$container->append($fi);

如上所示，我们可以根据类型和名称创建输入项。当然，在表单中，我们可以使用比输入更多的元素（如 select、textarea 等），这就是为什么有 FormElement 对象的原因。

panda / html

维护者

详细信息