[注意]更新了UBB标签
2014-07-10 01:23:19
迁出墙外以来，因为我做前端的水平不高，本论坛的 UBB 标签功能一直很弱。这几天我琢磨 guideep，重新做了一套标签。现在用非 IE 内核的浏览器打开输入界面，在输入框左侧显示 UBB 按钮。IE 内核浏览器仍可使用旧版 UBB 标签。<br><br>与旧版相比，除了增加一些新标签和改变了一些标签的名称之外，主要加强了三个方面：<br><br>1、在输入框选中文字，点标签按钮，自动添加标签。<br><br>2、同名标签可以嵌套。于是通过 toggle 和 select 标签的各种嵌套可以表示复杂的关系。<br><br>3、标签中可以加多个参数，便于实现更多功能。参数格式见[goto=divlb]下面 div 标签的说明[/goto]。<br><br>标签分两类：单标签和双标签。单标签只有一个。双标签是前一个后一个，中间括起一段内容。单标签或双标签之前一个形如 [标签名=参数]，双标签之后一个形如 [/标签名]。在帖子显示时，这些标签会转义成相应的 html 代码，实现页面效果。<br><br>借助 select 标签对各种标签详细说明如下：<br><br>[select]<br><br>[choice=on][title][a=label_a]a：锚标[/title][content]单标签。和旧版相同。<br><br>在编辑框中插入： [r][a=anchorName][/r]。<br><br>必须带参数 anchorName， 格式为字母开头，由字母、数字和下划线组成的串。<br><br>页面呈现时转义成： <a name=anchorName></a> ，它的作用是在页面上作一个标记，不可见，但可以通过访问 url 后加 #anchorName ，使页面自动滚动到标记所在的位置。<br><br>也可以使用 goto 标签，在 goto 被点击时，页面滚动到 a 标签所在位置。参看 [goto=label_goto]goto 标签[/goto]。<br><br>[/content][/choice]<br><br>[choice][title]b、i、u、s、sup、sub、color、size：文字效果[/title][content]这几个都是双标签，用法相同。其中，b、color、size 三种与旧版一样。<br><br>在编辑框内选中一段文字，点这些按钮，选中的文字就会被标签括起来，页面呈现时有相应的效果。<br><br>[table]<br><br>[tr][td][b]编辑[/b][/td][td][b]效果[/b][/td][/tr]<br><br>[tr][td][r][b][/r]粗体[r][/b][/r][/td][td][b]粗体[/b][/td][/tr]<br><br>[tr][td][r][i][/r]斜体[r][/i][/r][/td][td][i]斜体[/i][/td][/tr]<br><br>[tr][td][r][u][/r]带下划线[r][/u][/r][toggle=off]<br><br>[title]还可以带参数[/title]<br><br>[content]u 可以带一个参数 titleStr，表示被鼠标指上去时显示的内容。<br><br>如：[r][u=被鼠标指上去时显示的文字][/r]带下划线的文字[r][/u][/r]<br><br>显示为：[u=被鼠标指上去时显示的文字]带下划线的文字[/u]<br><br>用鼠标指指看。[/content]<br><br>[/toggle][/td][td][u]带下划线[/u][/td][/tr]<br><br>[tr][td][r][s][/r]带删除线[r][/s][/r][/td][td][s]带删除线[/s][/td][/tr]<br><br>[tr][td]正常[r][sup][/r]上标[r][/sup][/r][/td][td]正常[sup]上标[/sup][/td][/tr]<br><br>[tr][td]正常[r][sub][/r]下标[r][/sub][/r][/td][td]正常[sub]下标[/sub][/td][/tr]<br><br>[tr][td][r][color=blue][/r]蓝色[r][/color][/r][/td][td][color=blue]蓝色[/color][/td][/tr]<br><br>[tr][td][r][size=5][/r]大字[r][/size][/r][/td][td][size=5]大字[/size][/td][/tr]<br><br>[/table]<br><br>b、i、s、sup、sub 不带参数。color 和 size 必须带参数。u 可以带参数。<br><br>[/content][/choice]<br><br>[choice][title][a=divlb]div：块[/title][content]双标签。<br><br>页面呈现时转义为 <div></div>，也就是将一段内容括起来。通过参数可以设置外框尺寸及线型、背景色、字体尺寸、颜色及对齐方式、框内和框外缩进等多种效果。<br><br>属性名为 css 中的下述字段： 'display', 'height', 'width', 'border', 'border-top', 'border-bottom', 'border-left', 'border-right', 'padding', 'padding-top', 'padding-bottom', 'padding-left', 'padding-right', 'background-color', 'margin', 'margin-top', 'margin-bottom', 'margin-left', 'margin-right', 'color', 'font-size', 'overflow', 'overflow-x', 'overflow-y', 'align', 'valign'。<br><br>例如：[r][div=|color=#green|padding-top=50px][/r]中间的文字[r][/div][/r]，设置了文字颜色和上内边距。<br><br>页面呈现为： [div=|color=green|padding-top=50px]中间的文字[/div]<br><br>每种参数的形式为 |参数名=值，不同参数之间用 | 分隔，最前面也要有 |。若最前面没有 |，如 [r][div=#ffffcc][/r]，只有一个默认参数的值。div 的默认参数是背景色 background-color。<br><br>用这个标签代替了老标签中的 quote（引用）和 mgleft（左缩进）。<br><br>[/content][/choice]<br><br>[choice][title]r：禁止转义[/title][content]双标签，用于禁止其它标签转义。<br><br>有时候需要在页面显示一个标签的原始形式，而不是转成 html 之后的效果，就需要在目标标签外面加一对 r 标签。<br><br>r 标签之内必须也只能有一个标签，不能有标签之外的其它内容。在对双标签中的一个加上 r 之后，可能报一个警告，这是因为加 r 的标签禁止转义之后，另外一个标签无法配对。<br><br>例如我要在帖子里显示 [r][a=anchorName][/r]，就需要在编辑框里在 a 标签的一前一后加上 r 标签，即 [r][r][/r][r][an=anchorName][/r][r][/r][/r]，如果不加，a 标签就会转义成 <a name=anchorName> 而看不到了。<br><br>[/content][/choice]<br><br>[choice][title]hr：水平分隔线[/title][content]单标签。<br><br>页面呈现时转义成 <hr>，一条水平分隔线。[hr]<br><br>[/content][/choice]<br><br>[choice][title]url：链接[/title][content]双标签。<br><br>在编辑框中插入：[r][url=www.djdq.org][/r]大江东去科幻论坛[r][/url][/r]。<br><br>页面呈现为：[url=www.djdq.org]大江东去科幻论坛[/url]<br><br>必须带一个参数作为目标网址，前加不加 http:// 均可。<br><br>像 toggle、table、select 之类的复合标签都不能用在 url 之内。<br><br>[b]注意[/b]：旧版有两种 url 标签，除了上述这种，还有一种形如 [r][url][/r]http://www.djdq.org[r][/url][/r]，把网址写在首尾标签之间，而不是首标签之内。这种在新版中删掉了。<br><br>[/content][/choice]<br><br>[choice][title]pl：帖子链接[/title][content]双标签。<br><br>在编辑框中插入：[r][pl=78037][/r]《论坛总帮助》[r][/pl][/r]。<br><br>页面呈现为：[pl=78037]《论坛总帮助》[/pl]，点击跳转到本论坛目标帖子的星视图。<br><br>必须带一个参数，参数是目标帖子号，帖子号在每个帖子左上角可见。<br><br>[/content][/choice]<br><br>[choice][title]pic：图片[/title][content]单标签。<br><br>在编辑框中插入：[r][pic=pic/djdq.jpg][/r]。<br><br>页面呈现为：[pic=pic/djdq.jpg]。<br><br>必须带一个参数作为图片地址。图片地址前面[b]不会[/b]自动加 http://，须注意。<br><br>用于代替旧版的 img 标签。旧的 img 是双标签。<br><br>[/content][/choice]<br><br>[choice][title]toggle：隐现器[/title][content]双标签。复合标签。<br><br>在编辑框中插入：<br><br>[div=#f0f0f0][r][toggle=off][/r]<br><br>[r][title][/r]标题[r][/title][/r]<br><br>[r][content][/r]内容[r][/content][/r]<br><br>[r][/toggle][/r]<br><br>注意，在一对 toggle 标签之内，还有一对 title 和一对 content 标签。故称复合标签。[/div]<br><br>如果在点击按钮之前选中了一段文本，则选中内容会出现在 content 标签之内。<br><br>页面呈现为：<br><br>[toggle=off]<br><br>[title]标题[/title]<br><br>[content]内容[/content]<br><br>[/toggle]<br><br>点击标题，内容可隐现。<br><br>在 toggle 之内，而在 title 与 content 之外的内容将被忽略。<br><br>toggle 相当于旧版中的 tron 和 troff 两个标签。默认参数为 off，在点击之前内容是隐藏的，相当于 troff；若把参数设为 on，点击前内容会显示，相当于 tron。<br><br>toggle 不能用在 title 和 url 标签之内。<br><br>在 toggle 的 content 之内使用 toggle，可以表示复杂的树形结构。例如：<br><br>[toggle=off]<br><br>[title]动物[/title]<br><br>[content][toggle=off]<br><br>[title]软体动物门[/title]<br><br>[content][toggle=off]<br><br>[title]头足纲[/title]<br><br>[content]章鱼什么的。[/content]<br><br>[/toggle][/content]<br><br>[/toggle][toggle=off]<br><br>[title]节肢动物门[/title]<br><br>[content][toggle=off]<br><br>[title]昆虫纲[/title]<br><br>[content]螳螂什么的。[/content]<br><br>[/toggle][toggle=off]<br><br>[title]蛛形纲[/title]<br><br>[content]蜘蛛什么的。[/content]<br><br>[/toggle][/content]<br><br>[/toggle][toggle=off]<br><br>[title]脊索动物门[/title]<br><br>[content][toggle=off]<br><br>[title]哺乳纲[/title]<br><br>[content][toggle=off]<br><br>[title]灵长目[/title]<br><br>[content]人什么的。[/content]<br><br>[/toggle][/content]<br><br>[/toggle][/content]<br><br>[/toggle][/content]<br><br>[/toggle]<br><br>[/content][/choice]<br><br>[choice][title]title 和 content[/title][content]双标签。隐标签。<br><br>说它是隐标签，因为按钮里没有，用户也不应手动添加这两个标签。这两个标签总是在 toggle 和 choice 等复合标签的内部出现。<br><br>像 toggle、table、select 之类的复合标签都不能用在 title 之内。<br><br>[/content][/choice]<br><br>[choice][title]table、tr、td：表格[/title][content]都是双标签。table 是复合标签。<br><br>点击 talbe 按钮，在编辑框中插入：<br><br>[div=#f0f0f0][r][table][/r]<br><br>[r][tr][/r][r][td][/r]第一行第一列[r][/td][/r][r][td][/r]第一行第二列[r][/td][/r][r][/tr][/r]<br><br>[r][tr][/r][r][td][/r]第二行第一列[r][/td][/r][r][td][/r]第二行第二列[r][/td][/r][r][/tr][/r]<br><br>[r][/table][/r][/div]<br><br>tr 是表格的行，在 table 标签内点 tr 按钮可增加一行。td 是每一行中的列（格），在 tr 标签内点击 td 按钮可增加一列。<br><br>三者的关系与 html 中的 <table>, <tr>, <td> 相当，只是省略了 <thead>, <tbody>, <th> 等。<br><br>页面呈现为：<br><br>[table]<br><br>[tr][td]第一行第一列[/td][td]第一行第二列[/td][/tr]<br><br>[tr][td]第二行第一列[/td][td]第二行第二列[/td][/tr]<br><br>[/table]<br><br>tr 只能用在 table 之内，table 之内，tr 之外的内容将被忽略。同样地，td 只能用在 tr 之内，tr 之内， td 之外的内容也将被忽略。<br><br>如果表格各行中的列数不同，可能造成显示异常。<br><br>table 不能用在 title 和 url 标签之内。<br><br>[/content][/choice]<br><br>[choice][title]select、choice：选择器[/title][content]都是双标签、复合标签。<br><br>点击 select 按钮，在编辑框中插入：<br><br>[div=#f0f0f0][r][select][/r]<br><br>[r][choice=on][/r][r][title][/r]选项名1[r][/title][/r][r][content][/r]选项内容1[r][/content][/r][r][/choice][/r]<br><br>[r][choice][/r][r][title][/r]选项名2[r][/title][/r][r][content][/r]选项内容2[r][/content][/r][r][/choice][/r]<br><br>[r][/select][/r][/div]<br><br>choice 是选择器的选项，在 select 之内点 choice 按钮可以增加选项。choice 中包含 title 和 content。<br><br>choice 只能用在 select 之内。<br><br>choice 带 on 参数者首先展示。<br><br>页面呈现：select 标签有三种模式，页面呈现各不相同。我们用一个 0 模式的选择器来描述这三种模式：<br><br>[select]<br><br>[choice=on][title]0模式：[r][select=0][/r]或不加参数[/title][content]<br><br>[select]<br><br>[choice=on][title]选项名1[/title][content]选项内容1[/content][/choice]<br><br>[choice][title]选项名2[/title][content]选项内容2[/content][/choice]<br><br>[/select]<br><br>外面对所有标签作说明的选择器也是 0 模式。<br><br>[/content][/choice]<br><br>[choice][title]1模式：[r][select=1][/r][/title][content]<br><br>[select=1]<br><br>[choice=on][title]选项名1[/title][content]选项内容1[/content][/choice]<br><br>[choice][title]选项名2[/title][content]选项内容2[/content][/choice]<br><br>[/select]<br><br>1 模式外观像 toggle，但每次只能展开一个选项，选择某一项时，其它选项关闭。<br><br>[/content][/choice]<br><br>[choice][title]2 模式：[r][select=2][/r][/title][content]<br><br>[select=2]<br><br>[choice=on][title]选项名1[/title][content]选项内容1[/content][/choice]<br><br>[choice][title]选项名2[/title][content]选项内容2[/content][/choice]<br><br>[/select]<br><br>2 模式是个向后或者向前依次展示选项的工具。在三个按钮中，点前后两个可以向前、后移动，点中间的可以定时（每秒）向后移动（播放），再点停止播放。<br><br>2 模式中每个 choice 里的 title 内容被忽略，只保留 content。<br><br>[/content][/choice]<br><br>[/select]<br><br>select 不能用在 title 和 url 标签之内。<br><br>[/content][/choice]<br><br>[choice][title][a=label_goto]goto：页内跳转[/title][content]双标签。<br><br>点 goto 按钮时在编辑框中插入：[r][goto=anchorName][/r]这里[r][/goto][/r]。参数是目标 a 标签的名。<br><br>页面呈现为：[goto=anchorName]这里[/goto]。<br><br>要实现页内跳转，必须先有一个 [goto=label_a]a 标签[/goto]作为跳转的目标。假设目标 a 标签为 [r][a=zzz][/r]，标签名是 zzz，则 goto 标签写作 [r][goto=zzz][/r]这里[r][/goto][/r]，点之即可跳到目标 a 标签所在位置，并在目标 a 标签上触发一个点击事件。<br><br>示例：上一段中的“a 标签”链接就是用 goto 做的，点之可以跳到这个选择器里 a 标签的说明页。事先需要在这个选择器里[u] a 标签说明页[/u]的标题内加一个 a 标签：<br><br>[div=#ffffcc][r][choice=on][/r][r][title][/r][color=blue][r][a=label_a][/r][/color]a：锚标[r][/title][/r][r][content][/r]……[r][/content][/r][r][/choice][/r][/div]<br><br>它的名是 label_a。然后在本页（goto 标签说明页）加上 goto 标签：<br><br>[div=#ffffcc][r][goto=label_a][/r]a 标签[r][/goto][/r][/div]就实现了前面链接的效果。<br><br>为什么还要在目标 a 标签上触发一个点击事件呢？就像上例一样，目标 a 标签在 select 选择器的 title 里，触发点击相当于点击了 title，选择器换页，真正的目标内容就显示出来了。<br><br>[/content][/choice]<br><br>[choice][title]emote：表情[/title][content]单标签。<br><br>点 emote 按钮弹出表情选择框，再点表情即可插入编辑器。[em10]<br><br>[/content][/choice]<br><br>[/select][edit]2014-08-08 13:40:26.994492[/edit]
故国不堪回首月明中。