TIDemo/TIDemo.html at master · ghostzhang/TIDemo · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Language" content="utf-8" />
    <title id="app-title"></title>
    <link href="css/sample.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="lib/zepto.min.js"></script>
    <script type="text/javascript" src="lib/underscore-min.js"></script>
    <script type="text/javascript" src="lib/air/AIRAliases.js"></script>
    <script type="text/javascript" src="lib/air/AIRMenuBuilder.js"></script>
    <script type="text/javascript" src="lib/air/template.js"></script>
    <script type="text/javascript" src="lib/air/main.js"></script>
    <script type="text/javascript" src="lib/air/updater.js"></script>
</head>

<body onload="appMain.loadApp();" onDragOver="doOver(event);" onDrop="doDrop(event);">
    <div id="hint-box">
    </div>
    <div id="app-cont">
        <div id="config-box">
            <button class="small" type="button" id="bt-open-modefile">打开模板文件</button>
            <button class="small" type="button" id="bt-open-help">说明</button>
            <div class="set-op-box">
                <span id="outencode"></span>
            </div>
        </div>
        <div id="op-bar">
        </div>
        <hr/>
        <div id="setup-box">
            <form class="vertical">
                <div class="col_12 visible">
                    <div class="inner">
                        <h2>例子</h2>
                        <pre>&lt;!-- ::config::utf-8::
@title@:text(站点名)|CSS森林;
@link@:a(首页链接)|CSS森林,http://www.cssforest.org/blog/,true;
--&gt;
&lt;title&gt;@title@&lt;/title&gt;
@link@</pre>
                        <p>将上面的内容保存为文件，拖入TIDemo，将解析为</p>
                        <pre>&lt;title&gt;CSS森林&lt;/title&gt;
&lt;a href="http://www.cssforest.org/blog/" target="_blank"&gt;CSS森林&lt;/a&gt;</pre>
                        <h2>基本功能</h2>
                        <h3>格式</h3>
                        <pre>&lt;!-- ::config::
设置内容
--&gt;</pre>
                        <p>为基本格式。可选项有：</p>
                        <pre>&lt;!-- ::config::utf-8::AUTOSAVE::CONDITION::
设置内容
--&gt;</pre>
                        <ol>
                            <li>utf-8：输出编码，如果要使用跟文件一样的编码输出，可以不加</li>
                            <li>AUTOSAVE:：启用自动保存文件</li>
                            <li>CONDITION:：启用数据筛选</li>
                        </ol>
                        <p>
                            设置格式为：@变量名@:变量类型(说明文本)|默认值;
                        </p>
                        <ol>
                            <li>变量名以『@』包裹</li>
                            <li>变量名不能包含空格或制表符</li>
                            <li>变量名后以『:』分隔，紧跟着变量类型</li>
                            <li>说明文本以『()』包裹</li>
                            <li>说明文本后加『|』分隔，可设置默认值</li>
                            <li>以『;』结束</li>
                        </ol>
                        <p>
                            <strong>设置内容可以为空，但模板文件中必须有以上的基本格式，否则无法读取模板文件。</strong>
                        </p>
                        <h3>当前支持的设置项</h3>
                        <pre>&lt;!-- ::config::utf-8::
@savedir@:set|C:\Desktop\;
--&gt;</pre>
                        <dl>
                            <dt>savedir</dt>
                            <dd>输出文件路径(注意路径的正确性，错误的话有可能存到不知道什么地方去 ||-_-)</dd>
                        </dl>
                        <h3>当前支持的变量类型</h3>
                        <dl>
                            <dt>set</dt>
                            <dd>设置项目</dd>
                            <dt>text</dt>
                            <dd>单行输入框</dd>
                            <dt>a 或 link</dt>
                            <dd>链接的默认值设置顺序（以“,”分隔），顺序为：链接文本默认值,链接地址默认值,新窗口打开</dd>
                            <dt>textarea 或 html</dt>
                            <dd>多行输入框</dd>
                            <dt>qr</dt>
                            <dd>输出二维码</dd>
                        </dl>
                        <h3>模板文件命名</h3>
                        <ol>
                            <li>输出的文件会保存到模板文件目录下</li>
                            <li>如果模板文件以"tidemo_"开头命名，输出的新文件会自动去掉"tidemo_"，得到最终的文件名</li>
                        </ol>
                        <h2>高级功能</h2>
                        <h3>循环输出</h3>
                        <pre>&lt;!-- ::loop(商品列表)::auto::
设置内容
--&gt;
循环模板内容
&lt;!-- ::loop end:: --&gt;</pre>
                        <p>
                            设置格式为：::loop(说明信息)::循环次数::
                        </p>
                        <ol>
                            <li>关键字为『loop』</li>
                            <li>说明文本以『()』包裹</li>
                            <li>循环次数只能为正整数或『auto』关键字</li>
                            <li>循环次数为『auto』时，将根据数据文件行数进行循环，自动过滤空行</li>
                            <li>以『&lt;!-- ::loop end:: --&gt;』结束</li>
                        </ol>
                        <h3>当前支持的设置项</h3>
                        <pre>&lt;!-- ::loop(商品列表)::auto::
@DB@:set|数据文件.txt;
@IF@:set(变量名)|变量值;
@REPLACE@:set(start)|"正则表达式";
--&gt;</pre>
                        <dl>
                            <dt>DB</dt>
                            <dd>设置外部连接的数据文件路</dd>
                            <dt>IF</dt>
                            <dd>当数据表中变量名为变量值的时候</dd>
                            <dt>REPLACE</dt>
                            <dd>删除循环填充数据之后的多余字符，只能删除循环体开始（start）或结束（end）位置的字符</dd>
                        </dl>
                        <h3>导入数据文件</h3>
                        <dl>
                            <dt>创建数据文件</dt>
                            <dd>使用excel建立数据文件，第一行为变量名。然后导出为txt格式文件，与模板文件放在同个目录下。导出的内容类似：</dd>
                            <dd><pre>valueA valueB  valueC
A1  A2  A3
B1  B2  B3</pre>
                            </dd>
                            <dt>链接数据文件</dt>
                            <dd>在循环定义设置变量『DB』,变量类型为『set』,</dd>
                            <dd><pre>&lt;!-- ::loop(商品列表)::3::
@DB@:set|数据文件.txt;
@valueA@:text(变量A);
@valueB@:text(变量B);
@valueC@:text(变量C);
--&gt;
这里输出变量A的内容：@valueA@；
这里输出变量B的内容：@valueB@；
这里输出变量C的内容：@valueC@；
&lt;!-- ::loop end:: --&gt;</pre>
                            </dd>
                            <dt>结果：</dt>
                            <dd><pre>
这里输出变量A的内容：A1；
这里输出变量B的内容：A2；
这里输出变量C的内容：A3；
这里输出变量A的内容：B1；
这里输出变量B的内容：B2；
这里输出变量C的内容：B3；
这里输出变量A的内容：；
这里输出变量B的内容：；
这里输出变量C的内容：；
</pre>
                            </dd>
                        </dl>
                        <h3>数据筛选</h3>
                        <dl>
                            <dt>创建数据文件</dt>
                            <dd>在全局设置中打开数据筛选功能 <em>CONDITION</em></dd>
                            <dd>使用excel建立数据文件，第一行为变量名。然后导出为txt格式文件，与模板文件放在同个目录下。导出的内容类似：</dd>
                            <dd><pre>valueA valueB  valueC
A1  B1  C1
A2  B1  C2
A3  B3  C2</pre>
                            </dd>
                            <dt>链接数据文件，设置筛选条件</dt>
                            <dd>在循环定义设置变量『DB』,变量类型为『set』,</dd>
                            <dd>设置变量『IF』,变量类型为『set』,</dd>
                            <dd><pre>&lt;!-- ::loop(商品列表)::auto::
@DB@:set|数据文件.txt;
@IF@:set(valueA)|A2;
@valueA@:text(变量A);
@valueB@:text(变量B);
@valueC@:text(变量C);
--&gt;
这里输出变量A的内容：@valueA@；
这里输出变量B的内容：@valueB@；
这里输出变量C的内容：@valueC@；
&lt;!-- ::loop end:: --&gt;</pre>
                            </dd>
                            <dt>结果：</dt>
                            <dd><pre>
这里输出变量A的内容：A2；
这里输出变量B的内容：B1；
这里输出变量C的内容：C2；
</pre>
                            </dd>
                        </dl>
                        <h3>二维码解析</h3>
                        <dl>
                            <dt>创建数据文件</dt>
                            <dd>使用excel建立数据文件，第一行为变量名。然后导出为txt格式文件，与模板文件放在同个目录下。导出的内容类似：</dd>
                            <dd><pre>valueA
ghostzhang</pre>
                            </dd>
                            <dt>设置二维码</dt>
                            <dd>设置变量为『QR』,变量类型为『set』，变量类型为『qr』</dd>
                            <dd><pre>@QR@:set(bg,w,m,el)|ffffff,100,10,h;

包含设置项：
bg:  // 背景颜色  bg=颜色代码，例如：bg=ffffff
fg:  // 前景颜色  fg=颜色代码，例如：fg=cc0000
gc:  // 渐变颜色  gc=颜色代码，例如：gc=cc00000
el:  // 纠错等级  el可用值：h\q\m\l，例如：el=h
w:  // 尺寸大小   w=数值（像素），例如：w=300
m:  // 静区（外边距）    m=数值（像素），例如：m=30
pt:  // 定位点颜色（外框） pt=颜色代码，例如：pt=00ff00
inpt:  // 定位点颜色（内点）   inpt=颜色代码，例如：inpt=000000
logo:  // logo图片  logo=图片地址</pre></dd>
                            <dd></dd>
                            <dd><pre>&lt;!-- ::loop(商品列表)::
@DB@:set|数据文件.txt;
@QR@:set(w,m)|100,10;
@valueA@:qr(变量A);
--&gt;
这里输出二维码的内容：&lt;img src="@valueA@" /&gt;
&lt;!-- ::loop end:: --&gt;</pre>
                            </dd>
                            <dt>结果：</dt>
                            <dd><pre>
这里输出二维码的内容：<img src="http://qr.liantu.com/api.php?text=ghostzhang&w=100&m=10" />；
</pre>
                            </dd>
                        </dl>
                    </div>
                </div>
            </form>
        </div>
    </div>
</body>

</html>