|
|
/**
|
|
|
* Created with JetBrains PhpStorm.
|
|
|
* User: xuheng
|
|
|
* Date: 12-9-26
|
|
|
* Time: 下午1:09
|
|
|
* To change this template use File | Settings | File Templates.
|
|
|
* 上面这部分是代码的文件头注释，通常由开发工具自动生成，包含了创建文件所使用的编辑器（JetBrains PhpStorm）、作者（xuheng）、创建日期以及关于修改模板相关的提示信息等，主要用于代码的溯源和基本信息记录
|
|
|
*/
|
|
|
// 定义一个名为charsContent的数组，数组中每个元素都是一个对象，用于存储不同类型的字符相关信息
|
|
|
var charsContent = [
|
|
|
// 第一个对象，代表一种字符类型（这里可能是特殊符号之类的，从包含的字符推测），有name、title、content三个属性
|
|
|
{ name:"tsfh", title:lang.tsfh, content:toArray("、,。,·,ˉ,ˇ,¨,〃,々,—,～,‖,…,‘,’,“,”,〔,〕,〈,〉,《,》,「,」,『,』,〖,〗,【,】,±,×,÷,∶,∧,∨,∑,∏,∪,∩,∈,∷,√,⊥,∥,∠,⌒,⊙,∫,∮,≡,≌,≈,∽,∝,≠,≮,≯,≤,≥,∞,∵,∴,♂,♀,°,′,″,℃,＄,¤,￠,￡,‰,§,№,☆,★,○,●,◎,◇,◆,□,■,△,▲,※,→,←,↑,↓,〓,〡,〢,〣,〤,〥,〦,〧,〨,〩,㊣,㎎,㎏,㎜,㎝,㎞,㎡,㏄,㏎,㏑,㏒,㏕,︰,￢,￤,℡,ˊ,ˋ,˙,–,―,‥,‵,℅,℉,↖,↗,↘,↙,∕,∟,∣,≒,≦,≧,⊿,═,║,╒,╓,╔,╕,╖,╗,╘,╙,╚,╛,╜,╝,╞,╟,╠,╡,╢,╣,╤,╥,╦,╧,╨,╩,╪,╫,╬,╭,╮,╯,╰,╱,╲,╳,▁,▂,▃,▄,▅,▆,▇,<2C>,█,▉,▊,▋,▌,▍,▎,▏,▓,▔,▕,▼,▽,◢,◣,◤,◥,☉,⊕,〒,〝,〞")},
|
|
|
{ name:"lmsz", title:lang.lmsz, content:toArray("ⅰ,ⅱ,ⅲ,ⅳ,ⅴ,ⅵ,ⅶ,ⅷ,ⅸ,ⅹ,Ⅰ,Ⅱ,Ⅲ,Ⅳ,Ⅴ,Ⅵ,Ⅶ,Ⅷ,Ⅸ,Ⅹ,Ⅺ,Ⅻ")},
|
|
|
{ name:"szfh", title:lang.szfh, content:toArray("⒈,⒉,⒊,⒋,⒌,⒍,⒎,⒏,⒐,⒑,⒒,⒓,⒔,⒕,⒖,⒗,⒘,⒙,⒚,⒛,⑴,⑵,⑶,⑷,⑸,⑹,⑺,⑻,⑼,⑽,⑾,⑿,⒀,⒁,⒂,⒃,⒄,⒅,⒆,⒇,①,②,③,④,⑤,⑥,⑦,⑧,⑨,⑩,㈠,㈡,㈢,㈣,㈤,㈥,㈦,㈧,㈨,㈩")},
|
|
|
{ name:"rwfh", title:lang.rwfh, content:toArray("ぁ,あ,ぃ,い,ぅ,う,ぇ,え,ぉ,お,か,が,き,ぎ,く,ぐ,け,げ,こ,ご,さ,ざ,し,じ,す,ず,せ,ぜ,そ,ぞ,た,だ,ち,ぢ,っ,つ,づ,て,で,と,ど,な,に,ぬ,ね,の,は,ば,ぱ,ひ,び,ぴ,ふ,ぶ,ぷ,へ,べ,ぺ,ほ,ぼ,ぽ,ま,み,む,め,も,ゃ,や,ゅ,ゆ,ょ,よ,ら,り,る,れ,ろ,ゎ,わ,ゐ,ゑ,を,ん,ァ,ア,ィ,イ,ゥ,ウ,ェ,エ,ォ,オ,カ,ガ,キ,ギ,ク,グ,ケ,ゲ,コ,ゴ,サ,ザ,シ,ジ,ス,ズ,セ,ゼ,ソ,ゾ,タ,ダ,チ,ヂ,ッ,ツ,ヅ,テ,デ,ト,ド,ナ,ニ,ヌ,ネ,ノ,ハ,バ,パ,ヒ,ビ,ピ,フ,ブ,プ,ヘ,ベ,ペ,ホ,ボ,ポ,マ,ミ,ム,メ,モ,ャ,ヤ,ュ,ユ,ョ,ヨ,ラ,リ,ル,レ,ロ,ヮ,ワ,ヰ,ヱ,ヲ,ン,ヴ,ヵ,ヶ")},
|
|
|
{ name:"xlzm", title:lang.xlzm, content:toArray("Α,Β,Γ,Δ,Ε,Ζ,Η,Θ,Ι,Κ,Λ,Μ,Ν,Ξ,Ο,Π,Ρ,Σ,Τ,Υ,Φ,Χ,Ψ,Ω,α,β,γ,δ,ε,ζ,η,θ,ι,κ,λ,μ,ν,ξ,ο,π,ρ,σ,τ,υ,φ,χ,ψ,ω")},
|
|
|
{ name:"ewzm", title:lang.ewzm, content:toArray("А,Б,В,Г,Д,Е,Ё,Ж,З,И,Й,К,Л,М,Н,О,П,Р,С,Т,У,Ф,Х,Ц,Ч,Ш,Щ,Ъ,Ы,Ь,Э,Ю,Я,а,б,в,г,д,е,ё,ж,з,и,й,к,л,м,н,о,п,р,с,т,у,ф,х,ц,ч,ш,щ,ъ,ы,ь,э,ю,я")},
|
|
|
{ name:"pyzm", title:lang.pyzm, content:toArray("ā,á,ǎ,à,ē,é,ě,è,ī,í,ǐ,ì,ō,ó,ǒ,ò,ū,ú,ǔ,ù,ǖ,ǘ,ǚ,ǜ,ü")},
|
|
|
{ name:"yyyb", title:lang.yyyb, content:toArray("i:,i,e,æ,ʌ,ə:,ə,u:,u,ɔ:,ɔ,a:,ei,ai,ɔi,əu,au,iə,εə,uə,p,t,k,b,d,g,f,s,ʃ,θ,h,v,z,ʒ,ð,tʃ,tr,ts,dʒ,dr,dz,m,n,ŋ,l,r,w,j,")},
|
|
|
{ name:"zyzf", title:lang.zyzf, content:toArray("ㄅ,ㄆ,ㄇ,ㄈ,ㄉ,ㄊ,ㄋ,ㄌ,ㄍ,ㄎ,ㄏ,ㄐ,ㄑ,ㄒ,ㄓ,ㄔ,ㄕ,ㄖ,ㄗ,ㄘ,ㄙ,ㄚ,ㄛ,ㄜ,ㄝ,ㄞ,ㄟ,ㄠ,ㄡ,ㄢ,ㄣ,ㄤ,ㄥ,ㄦ,ㄧ,ㄨ")}
|
|
|
];
|
|
|
|
|
|
// 定义一个立即执行函数，传入charsContent作为参数，用于创建选项卡相关的DOM结构以及绑定交互逻辑
|
|
|
(function createTab(content) {
|
|
|
// 循环遍历传入的content数组（也就是charsContent）
|
|
|
for (var i = 0, ci; ci = content[i++];) {
|
|
|
// 创建一个<span>元素，后续用于作为选项卡的标题之类的显示元素
|
|
|
var span = document.createElement("span");
|
|
|
// 给创建的<span>元素设置一个自定义属性tabSrc，值为当前对象的name属性（用于后续识别和关联）
|
|
|
span.setAttribute("tabSrc", ci.name);
|
|
|
// 将当前对象的title属性值设置为<span>元素的innerHTML，也就是显示的文本内容
|
|
|
span.innerHTML = ci.title;
|
|
|
// 如果是第一个选项卡（索引为1，因为索引从0开始，这里实际是第二个元素，但符合通常第一个选项卡默认选中的逻辑），给它添加名为"focus"的类名，用于样式上突出显示（比如改变背景色等）
|
|
|
if (i == 1)span.className = "focus";
|
|
|
// 给<span>元素绑定点击事件处理函数
|
|
|
domUtils.on(span, "click", function () {
|
|
|
// 获取id为tabHeads的元素的所有子元素（可能是所有选项卡标题元素）
|
|
|
var tmps = $G("tabHeads").children;
|
|
|
// 循环遍历这些子元素，将它们的类名都清空，用于取消之前的选中状态样式
|
|
|
for (var k = 0, sk; sk = tmps[k++];) {
|
|
|
sk.className = "";
|
|
|
}
|
|
|
// 获取id为tabBodys的元素的所有子元素（可能是各个选项卡对应的内容区域元素）
|
|
|
tmps = $G("tabBodys").children;
|
|
|
// 循环遍历这些子元素，将它们的display样式设置为"none"，也就是隐藏起来
|
|
|
for (var k = 0, sk; sk = tmps[k++];) {
|
|
|
sk.style.display = "none";
|
|
|
}
|
|
|
// 将当前点击的<span>元素的类名设置为"focus"，表示选中状态
|
|
|
this.className = "focus";
|
|
|
// 根据当前点击<span>元素的tabSrc属性值，获取对应的id的元素，并将其display样式设置为空字符串（一般就是显示出来，恢复默认显示状态）
|
|
|
$G(this.getAttribute("tabSrc")).style.display = "";
|
|
|
});
|
|
|
// 将创建并设置好的<span>元素添加到id为tabHeads的元素中，作为其子元素
|
|
|
$G("tabHeads").appendChild(span);
|
|
|
// 在添加的<span>元素后面插入一个换行的文本节点，用于排版美化之类的（可能影响页面布局呈现效果）
|
|
|
domUtils.insertAfter(span, document.createTextNode("\n"));
|
|
|
|
|
|
// 创建一个<div>元素，用于作为选项卡的内容区域容器
|
|
|
var div = document.createElement("div");
|
|
|
// 设置该<div>元素的id为当前对象的name属性值，方便后续通过id查找和操作
|
|
|
div.id = ci.name;
|
|
|
// 如果是第一个选项卡（索引为1），将其display样式设置为空字符串（显示出来），否则设置为"none"（隐藏起来）
|
|
|
div.style.display = (i == 1)? "" : "none";
|
|
|
// 获取当前对象的content属性值（是一个数组，包含了具体的字符内容）
|
|
|
var cons = ci.content;
|
|
|
// 循环遍历这个content数组
|
|
|
for (var j = 0, con; con = cons[j++];) {
|
|
|
// 创建一个<span>元素，用于显示单个字符
|
|
|
var charSpan = document.createElement("span");
|
|
|
// 将当前字符内容设置为<span>元素的innerHTML，也就是显示出来
|
|
|
charSpan.innerHTML = con;
|
|
|
// 给这个用于显示字符的<span>元素绑定点击事件处理函数
|
|
|
domUtils.on(charSpan, "click", function () {
|
|
|
// 调用editor对象的execCommand方法，执行"insertHTML"命令，将当前点击的<span>元素的innerHTML（也就是字符内容）插入到编辑器中（这里的editor应该是外部定义好的编辑器相关对象）
|
|
|
editor.execCommand("insertHTML", this.innerHTML);
|
|
|
// 调用dialog对象的close方法，关闭对话框（这里的dialog应该也是外部定义好的相关对象，用于展示这个字符选择的界面等）
|
|
|
dialog.close();
|
|
|
});
|
|
|
// 将创建并设置好的用于显示字符的<span>元素添加到对应的选项卡内容区域的<div>元素中
|
|
|
div.appendChild(charSpan);
|
|
|
}
|
|
|
// 将整个选项卡内容区域的<div>元素添加到id为tabBodys的元素中，作为其子元素
|
|
|
$G("tabBodys").appendChild(div);
|
|
|
}
|
|
|
})(charsContent);
|
|
|
|
|
|
// 定义一个函数toArray，用于将传入的字符串按照逗号进行分割，返回分割后的数组
|
|
|
function toArray(str) {
|
|
|
return str.split(",");
|
|
|
} |
