tzMaker.b文档
本帖最后由 马黑黑 于 2025-10-10 12:35 编辑 <br /><br /><style>.artBox { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 20px; line-height: 1.5; margin: 20px auto; max-width: 1200px; }
.artBox p { margin: 10px 0; }
.artBox mark { padding: 4px 6px; background: lightblue; }
.artBox blockquote { font-name: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; }
.artBox h1, .artBox h2, .artBox h3, .artBox h4, .artBox h5 { line-height: 1.2; }
</style>
<div class="artBox">
<p>tzMaker.b 在.a版本基础上做了一些完善和扩展工作，功能更加丰富，操作更为自如。以下是相关说明：</p>
<h2>一、导入和使用 tzMaker.b 模块</h2>
<p>tzMaker.b 和 .a 一样，在JS代码中按下面的方式导入和声明 tz 对象——</p>
<div class="codebox">
<script type="module">
import <txt-yellow>TZ</txt-yellow> from <txt-magenta>'https://638183.freep.cn/638183/web/tz/tz.b.js'</txt-magenta>;
const <txt-blue>tz</txt-blue> = <txt-yellow>TZ.TZ</txt-yellow>(<txt-magenta>'pa'</txt-magenta>);
<txt-green>// ... 可以使用tz指令了</txt-green>
</script>
</div>
<h2>二、导入 tz.css 资源</h2>
<p>与 .a 相比，.b 指令没有太多和 CSS 的 id 及 class 类名的硬性绑定，不过配合 tz.css 使用则可以事半功倍。在帖子的 style 标签或 tz.css() 指令的CSS头一行加入 @import 'tz.css文档路径'，注意 tz.css 文档路径的准确性和有效性。导入方法——</p>
<div class="codebox">
<txt-green><!-- 方法一 : 在帖子的 style 标签中导入CSS资源 --></txt-green>
<style>
@import 'https://638183.freep.cn/638183/web/tz/tz.css';
<txt-green>/* ... 其它CSS代码 */</txt-green>
</style>
<txt-green><!-- 方法二 : 使用 tz.css() 指令导入CSS资源 --></txt-green>
<script>
<txt-green>// ... 其它代码</txt-green>
tz.css(`
@import 'https://638183.freep.cn/638183/web/css/tz03.css';
<txt-green>// ... 其它代码</txt-green>
`);
</script>
</div>
<p>tz.css提供N多的class选择器供做帖使用，其中对做帖非常有用的是：</p>
<blockquote>
⊙.pa : 帖子容器样式<br>
⊙.ma : 帖子播放器样式<br>
⊙.btnFs : 全屏按钮样式<br>
⊙.prog : 背景进度条样式<br>
⊙.absolute : 设置元素绝对定位样式<br>
⊙.title-text : 帖子标题样式<br>
⊙.pd-vid : 视频样式一<br>
⊙.qk-vid : 视频样式二
</blockquote>
<p>还有几个关键帧动画设计：</p>
<blockquote>
⊙rot : 逆时针旋转<br>
⊙rotate : 顺时针旋转<br>
⊙offset-distance : 路径运动（0%~100%）
</blockquote>
<p>更多的内容可查看源码。</p>
<h2>三、tzMaker.b 指令说明：</h2>
<h3>（一）主角指令</h3>
<p>主角指令即为主要指令，是 tzMaker 做帖挑大梁的狠角色。.b 主角指令一一描述如下——</p>
<h4>1. add : 给帖子容器添加HTML子元素</h4>
<blockquote>
⊙ 语法 : <mark>tz.add('标签名', 'id', 'class', {属性1: '值', 属性2: '值', 属性N: '值'})</mark><br><br>
⊙ 参数说明：<br><br>
① 标签名必选，例如 'div' 或 'img'；<br>
② id 可选，但如果有后续参数则必选，可赋空值 '' 占位，需要赋值应用小角引号填入标签的id名称，例如 'player'；<br>
③ class 可选，但若有后续参数则必选，和 id 一样设置；<br>
④ 键值对 {} 参数可选，根据需要可设置或不设置。<br><br>
⊙ 例子——
<div class="codebox">tz.add( 'img', '', '', { src: 'https://mysite/pic/dog.gif', alt: '', title: 'mydog', style: 'background: red;' } );</div>
</blockquote>
<h4>2. bgprog : 给帖子容器添加音频播放进度条</h4>
<blockquote>
⊙ 语法 : <mark>tz.bgprog('可选id', '可选类名')</mark><br><br>
⊙ 说明 : 参数两个均为可选，第一个是标签的id，第二个是class类名，均指向设定的CSS选择器，根据CSS设计决定使用参数。例如设计有 #jindu 选择器，指令写成 <mark>tz.bgprog('jindu');</mark>，或设计的进度条是个类选择器，.jindu，则指令写成 <mark>tz.bgprog('', 'jindu');</mark>。进度条应通过标签的线性渐变背景实现，tz.bgprog() 指令为进度条标签设置CSS变量 --prg 动态值，所设计的 #jindu 或 .jindu 选择器 background 属性写成类似下面的语句：<br><br>
<div class="codebox">background: linear-gradient( to right, <txt-blue>red (var--prg)</txt-blue>, lightblue 0 );</div>
</blockquote>
<h4>3. css : 在帖子容器上方加入 <style> 标签</h4>
<blockquote>
⊙ 语法 : <mark>tz.css('CSS代码')</mark><br><br>
⊙ 说明 : <br><br>
① 若css代码需要分行写，请使用反引号 <mark>``</mark> 替代小角引号 <mark>'' </mark> 或 <mark>"" </mark>；<br>
② 也可以不使用此指令，直接将CSS代码构建在帖子容器上方<br><br>
⊙ 举例——
<div class="codebox">
<txt-green>// 设置帖子CSS代码</txt-green>
tz.css(`
// 在这里分行写CSS代码
`);
</div>
</blockquote>
<h4>4. fs : 设置全屏按钮</h4>
<blockquote>
⊙ 语法 : <mark>tz.fs('可选类名')</mark><br><br>
⊙ 说明 : fs() 可选类名参数指向CSS class选择器，该选择器制定按钮样式，如果参数缺省则使用 .btnFs 选择器，请确保css代码中存在指定或默认的类选择器，否则按钮样式不确定；② 作用于帖子容器，点击按钮会令帖子来回在正常模式和全屏模式之间切换。举例——
<div class="codebox"><txt-green>// 缺省参数 : 需要导入 tz.css 或自行编写有 .btnFs {...} 选择器
tz.fs();
<txt-green>//或自定义类名 : 需要CSS中存在指定的类选择器 .mybotton {...}</txt-green>
tz.fs('mybotton');</div>
</blockquote>
<h3>（二）配角指令</h3>
<p>配角指令也称寄生指令，它们通常寄生在 tz 上一次执行主角指令时返回的 DOM 节点上，以链式形式给该 DOM 节点做相关操作。建议通过链式方式使用配角指令，当然，如果愿意，也可以紧接主角指令结束后的下一行另起炉灶，但是这样的操作可能会出现后续修改代码时因疏忽导致配角指令和主角指令的割裂现象。</p>
<h4>1. playmp3 : 将刚添加的元素设置为音频播放控制器</h4>
<blockquote>
⊙ 语法 : <mark>.playmp3('id可选')</mark><br><br>
⊙ 说明 : 该指令作用于音频控制按钮，链式使用在 add() 指令之后；如果希望指定id，应单独使用 <mark>tz.playmp3('id')</mark> 或 <mark>tz.playmp3(id)</mark>，id="id" 的元素可以在帖子容器之外<br><br>
⊙ 举例 :
<div class="codebox">tz.<txt-blue>add</txt-blue>('div', 'player', '', {title: 'Alt+X'}).<txt-blue>playmp3();</txt-blue></div>
</blockquote>
<h4>2. text : 给刚添加的元素设置文本</h4>
<blockquote>
⊙ 语法 : <mark>.text('文本内容', '目标对象')</mark><br><br>
⊙ 说明 : 对于 tzMaker 刚刚创建的元素，如果展示文本，可以使用此指令，参数按顺序排列：<br><br>
① 文本内容，必选，要显示的文本，支持HTML代码组织文本。例：'<p class="txtRed">Hello tzMaker</p>'<br><br>
② 目标对象，可选，缺省时为 tzMaker 刚刚创建的子元素，或若尚未创建子元素时为帖子元素；如果需要设置则使用元素的 id 或元素名称，例如假设有一个 id="mybox" 的元素，则目标对象的参数可以用两种方法传参，其一，<mark>mybox</mark>，其二，<mark>'mybox'</mark>，支持对帖子容器之外的元素进行操作<br><br>
⊙ 例子——
<div class="codebox"><txt-green>// 例一 : 链式给元素添加文本</txt-green>
tz.add('div', '', 'title-text').<txt-blue>text('帖子标题')</txt-blue>;
<txt-green>// 例二 : 给指定 id 元素添加文本</txt-green>
tz.text('帖子标题', 'mybox'); <txt-green>// 页面中存在 id="mybox" 的元素</txt-green></div>
</blockquote>
<h4>3. browser : 获取浏览器类别与版本信息</h4>
<blockquote>
⊙ 语法 : <mark>tz.browser()</mark><br><br>
⊙ 说明 : 无参数。返回一个对象 <mark>{name: '浏览器名称', version: '版本号'}</mark><br><br>
目前能返回的浏览器名称有：<br><br>
① Mozilla Firefox<br>
② Apple Safari<br>
③ Microsoft Edge<br>
④ Opera<br><br>
返回的版本号是主版本号，例如 141<br><br>
⊙ 举例 :
<div class="codebox">var b = tz.browser();
console.log(b.name, b.version); // 打印信息</div>
</blockquote>
<h4>4. style : 给当前元素或指定id的元素添加内联样式（即行内 style 属性）</h4>
<blockquote>
⊙ 语法 : <mark>tz.style('text', '可选id');</mark><br><br>
⊙ 说明 : style() 指令提供更加灵活的添加元素内联样式的实现方式。使用 add() 指令创建子元素时可以链式调用 style() 指令，也可以单独使用此指令通过可选id参数给任意 id="id" 的元素添加文本。当然也可以避免使用 style() 指令，在 add() 指令的第四个参数用 style 做键名并给它赋上对应值。<br><br>
⊙ 参数 : <br><br>
参数1 text 必须，希望添加的内联CSS样式表集合；<br>
参数2 id 可选，缺省此参数时作用对象是 add() 指令刚刚创建的子元素，若尚未创建则指向帖子容器；若指定 id 应将 style() 指令作为非寄生指令使用，所指定的id指向的对象必须真实存在<br><br>
【附】链式调用 style() 指令效果等同于在 add() 指令的第四个参数 {...} 加入 <mark>style: 'style值'</mark> 的做法<br><br>
⊙ 例子——
<div class="codebox"><txt-green>链式调用举例</txt-green>
tz.add('span').text('Hello tzMaker').<txt-blue>style('background: #eee; color: red; padding: 8px;')</txt-blue>;
<txt-green>//上例等同于 add() 指令第四个参数加入style键名和键值——</txt-green>
tz.add('span', '', '', {style: 'background: #eee; color: red; padding: 8px;'}).text('Hello tzMaker');
<txt-green>// 给指定id元素添加内联样式 : 独立使用，参数2的id指向的元素必须真实存在</txt-green>
tz.<txt-blue>style</txt-blue>('border: 2px solid red; border-radius: 2%;', 'mydiv');
</div>
</blockquote>
</div>
<script type="module">
import linenumber from 'https://638183.freep.cn/638183/web/js/linenumber.js';
linenumber();
</script> 标题是不是写错了，这个是介绍b版本的啊{:4_173:} 黑黑的介绍十分详尽，把各项参数如何配置讲得非常透彻{:4_199:} 红影 发表于 2025-10-9 23:02
黑黑的介绍十分详尽，把各项参数如何配置讲得非常透彻
.a 是简洁版本，功能简单但容易上手 红影 发表于 2025-10-9 23:00
标题是不是写错了，这个是介绍b版本的啊
内容不错就好{:4_170:} 一流效率，一流品质，一流义举，马老师您辛苦了{:4_190:} 杨帆 发表于 2025-10-10 17:33
一流效率，一流品质，一流义举，马老师您辛苦了
{:4_180:}
页:
[1]