zin

Appearance

HTML5 元素 h ​

部件 h 是一个简单的HTML5标签生成器，它用来生成渲染到前端的HTML源码。

用法 ​

h 部件内部通过 h类 实现，h类 使用魔术方法 __callStatic()，为每个方法生成对应的HTML标签，例如 h::div() 方法对应的是 <div> 标签，h::span() 方法对应的是 <span> 标签，以此类推。

有4种方式可以生成以下HTML代码：

html
<div class="success" id="zin">
    Hello, zin!
</div>

1、静态方法 ​

php
h::div
(
    set::id('zin'),
    set::class('success'),
    'hello, zin'
);
html
<div class="success" id="zin">
    Hello, zin!
</div>

2、h 类 ​

php
new h
(
    set::tagName('div'), // 标签名
    set::id('zin'),
    set::class('success'),
    'hello, zin'
);
html
<div class="success" id="zin">
    Hello, zin!
</div>

3、h() 函数 ​

php
h
(
    'div', // 标签名
    set::id('zin'),
    set::class('success'),
    'hello, zin'
);
html
<div class="success" id="zin">
    Hello, zin!
</div>

4、部件函数 ​

zin 框架内置了一些基于 h 部件的 HTML5 部件函数，例如 div()、span()、code()、canvas()、form()、br()、a()、p() 等，它们的用法与 h 部件的函数用法一致。

php
div
(
    set::id('zin'),
    set::class('success'),
    'hello, zin'
);
html
<div class="success" id="zin">
    Hello, zin!
</div>

属性 ​

属性名类型默认值说明
tagNamestring-标签名。
selfCloseboolfalse是否为自闭合标签。

方法 ​

h::js() ​

输出JS代码。

php

h::js
(
    'console.log("hello, zin!");'
);
JavaScript
<script>
(
    function()
    {
        console.log("hello, zin!");
    }()
)
</script>

h::jsVar() ​

输出JS变量。

单个变量 ​

php
h::jsVar
(
    'langConfirm', // 变量名
    '确定'         // 变量值
);
JavaScript
<script>
(
    function()
    {
        const langConfirm = '确定';
    }()
)
</script>

多个变量 ​

php
h::jsVar
(
    [
        'langConfirm' =>'确定',
        'langDelete'  =>'删除'
    ],
    null
);
JavaScript
<script>
(
    function()
    {
        const langConfirm = '确定';
        const langDelete = '删除';
    }()
)
</script>

h::jsCall() ​

JS函数调用。

通用调用 ​

php
h::jsCall
(
    'console.log', // 函数名
    'JsCall'       // 函数参数
);
JavaScript
<script>
(
    function()
    {
        console.log("JsCall");
    }()
)
</script>

文档加载完成后调用 ​

JS函数名前加 ~，表示在文档加载完成后调用。

php
h::jsCall
(
    '~console.log', // 函数名
    'JsCall'       // 函数参数
);
JavaScript
<script>
(
    function()
    {
        $(() => console.log("JsCall"));
    }()
)
</script>

h::jsRaw() ​

输出原生JS代码。

php
// h::jsRaw 将 字符串 'console.log' 输出为原生JS代码
h::jsVar('window.callback', h::jsRaw('console.log'));
h::jsCall('~window.callback', 'Js Raw');
JavaScript
<script>
(
    function()
    {
        // h::jsRaw 将 字符串 'console.log' 输出为原生JS代码
        window.callback=console.log;
    }()
)
</script>
<script>
(
    function()
    {
        $(() => window.callback("Js Raw"));
    }()
)
</script>

h::script() ​

输出JS代码。

php
h::script('(function(){console.log(\'hello, zin!\');}())');
JavaScript
<script>
(
    function()
    {
        console.log('hello, zin!');
    }()
)
</script>

提示

h::script() 函数与 h::js() 函数的区别是，h::script() 函数输出的JS代码不会被包裹在 (function(){}()) 中。

h::css() ​

输出CSS代码。

php
h::css('body{background-color:#F00;}');
html
<style>
body{background-color:#F00;}
</style>

提示

h::css() 函数与 setStyle() 函数的区别是，h::css() 函数输出的CSS代码包裹在 <style></style> 中， 而 setStyle() 函数设置的是HTML标签的 style 属性。

h::importCss() ​

导入外部CSS文件。

php
h::importCss('/js/zui3/zui.zentao.css');
html
<link rel="stylesheet" href="/js/zui3/zui.zentao.css">

h::importJs() ​

导入外部JS文件。

php
h::importCss('/js/zui3/zui.zentao.umd.cjs');
html
<script src="/js/zui3/zui.zentao.umd.cjs"></script>

h::import() ​

导入外部CSS或JS文件。

php
h::import
(
    [
        '/js/zui3/zui.zentao.umd.cjs',
        '/js/zui3/zui.zentao.css'
    ]
);
html
<script src="/js/zui3/zui.zentao.umd.cjs"></script>
<link rel="stylesheet" href="/js/zui3/zui.zentao.css">

基于 h类 的内置部件 ​

函数名对应标签
div()<div>
span()<span>
code()<code>
canvas()<canvas>
form()<form>
br()<br>
a()<a>
p()<p>
img()<img>
button()<button>
h1()<h1>
h2()<h2>
h3()<h3>
h4()<h4>
h5()<h5>
h6()<h6>
ul()<ul>
li()<li>
input()<input>
textarea()<textarea>

非魔术方法 部件 ​

魔术方法对应标签
h::file()<input type="file">
h::date()<input type="date">
h::radio()<input type="radio">
h::checkbox()<input type="checkbox">
h::input()<input type="text">
h::button()<button type="button">
h::textarea()<textarea>

https://zentao.net

Copyright (C) 2023 cnezsoft.com