tzMaker意为做帖,tz是帖子汉语拼音首字母,maker制作者,后面通称为tz。顾名思义,tz是个做帖工具,一旦入门,使用者会爱不释手。本篇是初级教程。
音画帖的代码制作分为三个步骤:
第一步 :制定CSS样式
CSS是 Cascading Style Sheets 的缩写,意为层叠样式表,相当于帖子的设计图纸。它需要一个 <style> ... </style> 标签作为载体,所设计的各种样式都放在该标签里面。tz 提供一个配套的CSS资源文档,可以在该标签中导入,然后再根据需要建立若干其它样式,也可以不建立。下面是示例:
<style>
/* 导入tz配套的CSS文档 */
@import 'https://638183.freep.cn/638183/web/tz/tz.e.css';
/* 如果需要,接着写其它CSS代码,例如下面一行是制定一张图片标签的尺寸等 */
.mypic { position: absolute; left: 100px; top: 100px; width: 220px; height: 460px; }
</style>
先说明一下代码注释:CSS代码的注释用 /* 注释文本 */ 表示,HTML代码则用 <!-- 注释文本 --> 这样的结构,JS支持两种注释方式,第一种专门针对单行注释,用 // 单行注释文本 表示,第二种注释方式单行、多行注释都可以用,写成 // 单行或多行注释。注释一般用在必要的地方,作用是做标记或提供说明,方便理解与维护。
接着分析一下上述CSS代码:上面的代码只有两句,第一句(行3)导入tz配套CSS文档;第二句(行5)写一个CSS类选择器 .mypic,制定将来通过 class="mypic" 属性设置使用该选择器的HTML标签的定位方式、左边值和上边值、宽高尺寸,还可以制定更多。
第二步 :创建HTML代码
如果说CSS是图纸,那么,HTML就是房子,它长啥样由CSS样式定义。HTML代码由一系列HTML标签有机组成,做帖用到的首先是 <div> ... </div> 标签,用它来做帖子的容器,帖子的其它内容都放在这个 div 标签省略号处。标签又称元素,也叫节点,容器标签即容器元素或容器节点一般统一叫做父元素,其下的标签或元素或节点一般统一叫做子元素。看例子加以理解:
<div class="pa">
<img class="mypic" src="图片地址" title="我的图片" alt="" />
</div>
分析一下上面的HTML代码:第1和第3行代码是一个 div 标签,是帖子容器元素,相对于它里面包裹的各类元素(若有)而言,它是父元素。该元素使用了一个 class 属性,class="pa","pa" 对应于CSS的一个类选择器,.pa { ... },放在导入的CSS文档 tz.e.css 里面。这里,.pa { ... } 是CSS图纸,它制定帖子容器的样式,而帖子容器的 div 使用 class="pa" 表明帖子容器按这个图纸建造——这就是CSS和HTML的对应关系。第二行代码是一个 <img> 图片标签,包裹在 div 元素里面,它是 div 的儿子(之一),所以是子元素,如果代码中的图片地址指向正确的图片资源,那么,这个图片就显示在帖子(容器)里面;这个 img 标签也有 class 属性,表示它所使用的图纸是 .mypic 选择器,就是前面CSS代码制定的那个 .mypic { ... }。
第三步 :使用JS操控帖子
JS全称叫JavaScript,是嵌入式的web页脚本语言,早期负责网页交互工作,现在已经是全能管家:CSS和HTML共同创建出来的网页它都能管。tz就是使用JS开发,利用JS的强大管控能力,为做帖创建了若干指令,使用这些tz指令,我们可以轻松地给帖子添加音频、视频、图片,做音频播放按钮和音频可控进度条等等。上代码:
<script type="module">
// 导入tz模块
import TZ from 'https://638183.freep.cn/638183/web/tz/tz.e.js';
const tz = TZ.TZ('pa'); // 创建tz帖笔(pa是帖子容器标识,对应于容器标签的id或class)
// 现在可以用 tz 笔给帖子容器添加各种元素了,下面是添加音频标签
tz.add('audio', 'aud', '', {src: '音频地址'});
</script>
上面就是JS代码,JS代码放在 <script> ... </script> 标签中,该标签因为要导入模块,所以有 type="module" 属性,这个不能少。上例JS代码中的行3,导入 tz 模块,地址要准确有效;行4创建帖笔对象并授权给变量 tz,这样就可以使用 tz.e.js 模块开放的全部指令做各类事情,比如加音频、视频、图片等等。作为入门,仅需要熟悉少量几个tz指令,下面逐一介绍:
(一)add 指令:add('标签名', 'id名', '类名', { 配置 })
add 意为添加,就是要往帖子容器里添加什么,注意 add() 是基本结构,小括号里面有四个参数,每一个参数都是向指令传递信息,指令接收到合法的信息后就可以完成交给它的任务。第一个参数是'标签名',是要添加的元素的名称,例如 'div' 或 'img' 或 'video',想添加什么标签就写对应的标签英文名称,都要求写在小角引号里面;第二个参数是'id名',元素可以拥有唯一的身份证号,id 就是元素的身份证号,通常由字母加下划线、数字组成,例如帖子容器是 'pa'或别的、图片可以是 'mypic'或你想定义的。如果不需要id,在 add() 指令中用空值表示,写成 '' 即可(但要注意所创建的元素如果后续元素与之有依赖关系,那得有id);第三个参数是'类名',如果事先为它设计有CSS选择器(图纸),比如 .mydiv,那就写上 'mydiv',注意不要CSS选择器开头的那个标记 . 即小角点号;第四个参数是配置参数,写在花括号 { ... } 里面,结构有点特别,还是举例说明容易理解:
// 添加一个图片,附上图片地址和其它必要属性
tz.add('img', '', 'mypic', { src: '图片地址', alt: '', title: '我的图片' });
配置内容如果很多,可以分行写(这里顺便把相应说明写在注释里):
// 添加一个图片,附上图片地址和其它必要属性
tz.add('img', '', 'mypic', {
src: '图片地址', // src 是图片标签的地址属性
alt: '', // alt 是图片标签必须属性,图片失效时显示的文字替代
title: '我的图片', // 鼠标移动到图片弹出的提示语,非必须
style: 'border: 1px solid red;' // 给图片添加个内联CSS样式(非必须),这里设置了红色边框
});
花括号 {} 功能很多,在JS中可以用来装载配置数据,数据由一个个的 键名: '键值' 组成,称为键值对,键名在前,不用引号(但有短连线符号连接的键名必须有引号),键值需要引号(但纯数值、布尔值不要引号),键名之后用冒号引出键值,每个键值对之间用逗号分隔。这里说的引号、逗号等,都是英文输入状态下的小角符号,不能用汉语输入状态下的全角符号。
不是所有要添加的元素都需要配置,若需要配置也不是什么都得配置,一切根据设计而定。下面的几个示例应该可以帮助理解这一点:
// 添加一个已事先设置好CSS样式的div,#flower {} 选择器
tz.add('div','flower');
// 添加一个已事先设置好CSS样式的span标签,.bold {} 选择器
tz.add('span', '', 'flower');
// 添加一个没有id没有class的div,用配置设置内联CSS style样式
tz.add('div', '', '', { style: 'width: 100px; height: 100px; background: tan;' });
(二)bgprog 指令 :tz.bgprog()
bg 是 background(背景)的意思,prog 是 progress(进度)的意思,bgprog 就是背景进度条,作为指令,需要加上小括号,写成 tz.bgprog()。本指令会以默认的方式创建一个音频播放进度显示条,称作进度条。进度条能不能工作,取决于多种前提,其中之一是帖子音频是否已经加入,所以下方的示例,先添加音频,再添加进度条:
// 用 add() 指令给帖子加音频标签
tz.add('audio', '', '', { src: '音频地址' };
// 用 bgprog() 指令给帖子添加进度条
tz.prog();
进度条的位置应该需要调整,但目前学到的指令不够用,我们先用CSS来完成进度条的位置设定:
<style>
/* ...其它代码 */
/* 进度条 #prog 选择器 或 .prog 选择器,二者选其一 */
#prog { left: 30px; bottom: 20px; }
.prog { left: 30px; bottom: 20px; }
</style>
#prog 或 .prog 选择器都将被认可,前者是 tz.bgprog() 指令创建的进度条 id,后者是其class类名。配套CSS文档创建有 .prog {} 选择器,所以帖子中只需要设置位置相关的属性即可,即四个可选用的属性,即 left、right、top、bottom,合理配合使用可以随心所欲安排进度条的位置。
(三)playmp3 指令 :playmp3()
本指令用来指派某个元素充当音频播放暂停的控制器,例如,假设我们想用一张图片来做小播,那得用 add() 指令给帖子添加图片,紧接着链式使用 playmp3() 指令,这样,图片就成为帖子的小播了——
// 添加图片并令图片充当小播
tz.add('img', '', 'ma', { src: '图片地址'}).playmp3();
所添加的图片没有设置 id,类名为 ma,这样所添加的图片就会自动转动,因为配套CSS文档中提供有 .ma {} 选择器,对标播放器而设计。代码中的浅蓝色部分告诉 tz 这个刚加的图片(也可以是其它元素)做小播,就酱简单。
(四)style 指令 :style('css代码', '可选元素对象')
本指令用来给刚添加的元素设置内联CSS样式,其实就是元素标签的 style="..." HTML属性,参数1是CSS代码,必须,参数2指明是哪个元素要添加内联CSS样式,可选,与 add() 指令链式使用时指向明确就不要这个参数。下面的例子在前一个例子基础上加个 style() 指令,用来补充设置小播的位置:
tz.add('img', '', 'ma', { src: '图片地址'}).playmp3().style('left: 80px; top: 100px;');
style() 指令能快速补充一些CSS设置,适用于少量CSS设置的环节。前面进度条指令也可以这样使用它来设置位置。
掌握好上面的四个tz指令,做简单音画帖绰绰有余。最后,给一个基于tz的音画帖模板,代码中粉红部分应使用自己的数据取代或者修改相应设置:
<style>
@import 'https://638183.freep.cn/638183/web/tz/tz.e.css';
/* 帖子容器选择器 */
.pa {
--offsetX: 81px; /* 帖子偏移量 */
--bg: url('图片地址') center/cover; /* 帖子背景 */
--ma-size: 10vw; /* 小播尺寸 */
}
</style>
<div class="pa"></div>
<script type="module">
import TZ from 'https://638183.freep.cn/638183/web/tz/tz.e.js';
const tz = TZ.TZ('pa');
// 添加音频
tz.add('audio', '', '', {
src: '音频地址'
});
// 添加视频
tz.add('video', '', 'pd-vid', {
src: '视频地址'
});
// 添加图片小播
tz.add('img', '', 'ma', {
src: '图片地址'
})
.playmp3()
.style('bottom: 60px;');
//添加进度条
tz.bgprog().style('bottom: 20px;');
</script>
学会模板中的几个tz指令不会有太大的难度,但需要通过实践慢慢体会、理解。这几个指令是tz的基础,弄懂它们,其余的指令也将可以逐一掌握。