Uncommon Word Components

In the recent project, the existing rare word component has been rewritten, the component is mainly used in some people's names often appear in the uncommon word management, convenient for users in the input method can not be spelled out, enter their own name of the uncommon words.

The effect of the final implementation is shown in the following figure:

The specific code is written in the form of jquery plug-in code, as follows:

/** created by: Anchao Date Created: May 16, 2013 when the user input Chinese characters, for some uncommon strange words can not be input, this component collects life often used in the rare words, so that users can be based on the initials of Chinese characters to choose, complete the input @method rare words Insertunco Mmonword ([config]) @param {plainobject} config the unique attribute in the object Ajaxurl is used to configure the requested address @return {Jqueryobject} calls Insertuncommonword () Method of the JQuery object **/(function ($) {$.fn.extend ({"Insertuncommonword": function (config) {var _conf IG = {ajaxurl: '. /..
            /response/uncommonwords.json '}, $input = $ (this), $inputOffset = $input. Offset (), Letterspans = [], Htmlwordsspans = {},//Save All letters: Uncommon word $uncommonIco, $unfamiliar

            Div, $unfamiliarTitle, $spellDiv, $wordsDiv;
                    function Inputbindfocus () {//input Displays the "Uncommon characters icon" $input when the focus is obtained. focus (function () {
                $ (this). Next (). Show ();
            });
     } function Loaduncommontip () {//page load "uncommon character icon"           $uncommonIco = $ (' <span class= ' uncommontip "title=" input uncommon Characters "></span>"); $uncommonIco. InsertAfter ($input). Offset ({top: $inputOffset. Top, Left: $INPUTOFFSE
                T.left + $input. Outerwidth () + 2}). Hide (). Click (function () {$ (this). Next (). Show ();
            }); } function Loadunfamiliardiv () {//page load contains the letters and words of the layer unfamiliardiv, the letter layer unfamiliar-spells, the uncommon character layer Unfam
                    Iliar-words $unfamiliarDiv = $ (' <div class= ' unfamiliardiv ' > ' + ' <div class= ' unfamiliar-title ' > ' + ' <div class= ' unfamiliarclose ' > off </div><div class= "Unfamiliartext" > select uncommon characters by Alphabet </div> ' + ' </div> ' + ' <div class
                 = "Unfamiliar-spells" ></div> ' + ' <div class= "unfamiliar-words" ></div> "   + ' </div> ');
                    $unfamiliarDiv. InsertAfter ($uncommonIco). Offset ({top: $inputOffset. Top + $input. Outerheight () + 1,
            Left: $inputOffset. Left}). Hide (); } function Findunfamiliardivchild () {$unfamiliarTitle = $unfamiliarDiv. Find ('. unfamiliar-tit
                Le ');
                $spellDiv = $unfamiliarDiv. Find ('. Unfamiliar-spells ');

                $wordsDiv = $unfamiliarDiv. Find ('. Unfamiliar-words ');
                    Close the Unfamiliardiv and Uncommontip $unfamiliarTitle. Delegate ('. Unfamiliarclose ', ' click ', function () {
                $ (this). Parents ('. Unfamiliardiv '). Hide (). Prev (). hide ();
            }); } function Managedata (data) {$.each (data, function (key, value) {Letter

                    Spans.push (' <span> ' + key.touppercase () + ' </span> ');
              if (Value.length > 0) {          Htmlwordsspans[key] = ' <span> ' + value.join (' </span><span> ') + ' </span> ';

                }
                });
            The letter layer Unfamiliar-spells fills the letter content and binds the event $spellDiv. HTML (Letterspans.join ("));
                    } function Spelldivbindevent () {//Letter span binding event $spellDiv. Delegate (' span ', { Click:function () {$ (this). addclass (' Spanover '). Siblings (). Removeclass (' Spano
                        Ver ');

                        $wordsDiv. empty (); The Uncommon word layer unfamiliar-words fills the letters corresponding to the uncommon word and binds the event var Htmlspans = htmlwordsspans[$ (this). Text (). toLowerCase (

                        )];
                        if (Htmlspans) {$wordsDiv. html (Htmlspans). Show ();
                        } else {$wordsDiv. Hide ();
            }
                    }
                }); } function WOrdsdivbindevent () {//Word span binding event $wordsDiv. Delegate (' span ', {Mousee
                    Nter:function () {$ (this). addclass (' Spanover '). Siblings (). Removeclass (' Spanover ');
                        }, Click:function () {var txt = $ (this). text ();
                        $input. val (function (key, OldValue) {return oldValue + txt;
                    });
            }
                });

            } $.extend (_config, config); Load data $.ajax ({URL: _config.ajaxurl, DataType: ' JSON ', succes S:function (data) {//Return Data exception if (data.ec! = 0) {alert (d
                        ATA.EM);
                    Return
                    } inputbindfocus ();                    
 Loaduncommontip ();                   Loadunfamiliardiv ();
                    Findunfamiliardivchild (); Managedata (data[' CD '); Renders the HTML data in the page spelldivbindevent (); The letter corresponds to the event binding of span wordsdivbindevent (); The words correspond to the event bindings for span}, error:function (data) {Console.log 。
                ');

            }
            });
        return this;
}
    }); }) (JQuery);

Depending on the CSS file, the following is shown:

. uncommontip {width:20px;
	height:20px; Background:url (.. /..
	/themes/default/images/uncommonwordpic.png) left bottom no-repeat;
	Position:absolute;
	Overflow:hidden;
Cursor:pointer;
	}. unfamiliardiv {width:286px;
	border:1px solid #95B8E7;
Position:absolute;
	}. unfamiliar-title {font-size:12px;
	Font-weight:bold;
	height:16px;
	line-height:16px;
	Color: #0E2D5F;
	padding:6px;
    border-bottom:1px solid #95B8E7;  
    Background-image:-webkit-gradient (linear, left top, left bottom, Color-stop (0%, #EFF5FF), Color-stop (100%, #E0ECFF));
    Background-image:-moz-linear-gradient (Top, #EFF5FF 0, #E0ECFF 100%);  
    Background-image:-o-linear-gradient (Top, #EFF5FF 0, #E0ECFF 100%);
	Background-image:linear-gradient (Top, #EFF5FF 0, #E0ECFF 100%);
	Background-repeat:repeat-x;
    Filter:progid:DXImageTransform.Microsoft.gradient (startcolorstr= #EFF5FF, endcolorstr= #E0ECFF, gradienttype=0);
_background-color: #E0ECFF; }. unfamiliartext {float:left;}. UnfamiliarClose {text-indent: -1000px;
	width:16px;
	height:16px;
	Float:right; Background:url (.. /..
	/themes/default/images/uncommonwordpic.png) left top no-repeat;
	Overflow:hidden;
Cursor:pointer;
	}. unfamiliar-spells span {font-weight:bold;
	width:20px;
	height:20px;
	Text-align:center;
	line-height:20px;
	Background-color: #b7d2ff;
	margin:1px;
	Float:left;
Cursor:pointer;
	}. Unfamiliar-spells. Spanover,. unfamiliar-words. spanover {color:white;
Background-color: #0437c8;
	}. unfamiliar-words span {width:20px;
	height:20px;
	Text-align:center;
	line-height:20px;
	Background-color: #E2C608;
	margin:1px;
	Float:left;
Cursor:pointer; }

The component simulates the data used:

{"EC": "0", "em": "Normal", "CD": {"a": ["width", "靉", "Mitsu"], "B": ["dominates", "昺", "Deployment", "霦", "Ben", "愊", "Ben", "Coffee", "majestic", "po", "No", "horse", "Watch"], "C": [" 旵 "," Halls "," 棽 "," unconscious "," Chong "," Huacheng "," Chu "," moustached "," Cheng "," Yang "," Chiiori "," Apsonic "," 捵 "," 茝 "," fat "," Cheng "," Cheng "," Cha "," 嶒 "," D ": [" Conv "," 昳丽 "," the "," Ros "," Betty "," Matangi "," Tantrayana "," 俤 "," Cloudy Sky "," Fumihiko "," 璗 "," Linton "," E ": [" I Do "]," F ": [" Backup "," bum "," Bambu "," Fang "," EJ "," Dews "," Peak "," Fu "," Flint "," Bambu "," Fen "," Fen "," 頫 "]," G ": [" Ga "," Nabrown "," 芶 "," 姏 "," 堽 "," Cake "," suppressive "," gu ' "," 釭 "]," H ": [" Frontline "," Han Yingde "," 訸 "," the "," strapless "," Houn "," 隺 "," Huihong "," First "," Yuhui "," 翯 "," Grandsolar "," Hengbin "," principally "," 皜 "," Kokusai "," Hao "," Hobart "," Phoenixes "," 銲 "," 鉷 "," 澒 "," Haw "," Combine Practicalness "," Beautiful "," Huang "," Huan "," Plover "," BCR "," Avanthi "," Jih "," 谹 "," subfolders "]," I ": []," J ": [" 冏 "," Beamy "," Jie "," Chard "," June "," 暕 "," Argenta "," 椈 "," June "," Jing "," athletics "," 煚 "," Jay "," Jue "," differential "," 瑨 "," 瑨 "," Jin "," 勣 "," 寯 "," 烱 "," Aenon "," 斚 "," Jie "," 瑴 "," Sunny "," new "," Guy "," jiao "]," K ": [" Kevin "," Kun "," Quine "," Kun "," Kun "," Kun "," Kua "," 衎 "," 鵾 "," doing "," Hanja "]," L ": [" Vue "," Lui Che woo "," Tuzhou "," Lee "," Another "," Yili "," DJI "," softball "," Esrella "," iting "," Yerin "," Din Daeng "," Yili "," beautiful "," Leung "," Kaohsiung "," Necklace "," Pineleng "," Chain "," 镠 "," Keung "," 箖 "," Byzantium "," 竻 "," Wagtails "," blessing "," Glasswear "," 騄 "," knots "," Ruri "," Davis Pok "," The Prism "," Kong "," dawning "]," M ": [" Mai "," 忞 "," Min "," 旼 "," Meng "," Kidman "," Wei "," Mang "," 鋩 "," Minghe "," underway "," 媔 "," 祃 "," 牻 "," Simin "," Shishmanian "," Chu Enterprises Company "," beauteous "," 瑂 "]," n ": [" 婻 "," 寗 "," 嫟 "," Nongsa "," Kennedy "," 闀挎柟褰 "," 薿 "," Greater "]," O ": []," P ":["Peng", "caulked", "Jaya", "PI", "毰", "Pei", "apple", "Ka", "弸", "glimpsed", "sacrificed", "砯"], "Q": ["玘", "Chyuan hsing Electrical", "hearings", "踆", "bisecting", "Revelation", "Carlee", "Man", "勍", "droning", "婍", "璆", "deeply", "Bazil" , "駸", "綪", "Richtek", "downward", "釥", "Cuiwenqin", "Kai", "R": ["Ruizheng", "Traffic", "Rong", "讱", "Rong", "Ruoma", "Eizan", "Konjac", "Seeketh", "rang"], "s": ["屾", "Sheng", "妽", "Shen", "姼", "sang", "湦", " Shuang "," 塽 "," Busty "," Mengsu "," 鉥 "," ho "," hence "," Seng "," 莦 "," maxed "," Keun "," 佀 "," holy "," su "," 琡 "]," T ": [" Tooling Co "," tinted "," Shanti "," 慆 "," Mingtao "," yiting "," Tan "," Tong "," Tan "," myopia "," Ting ","
			Sfons "," Yikanghuayuan "," Tang "," Wenhaoli "," Fallow "," 頲 "," the "," Tina "," 鰧 "]," U ": []," V ": []," w ", [" Swastika "," Ian "," Stew "," Russell "," Nightingale "," Apoz "," Wei "," Wai "," Ridgewood "," Arwen "," Northrend "," following "," Nouakchott ", "X": ["仚", "Bion", "has", "sin", "昍", "Sheuan", "爔", "斅", "Herba", "Isamu", "boosted", "Xiao", "鈃", "Xuan Huong", "sup", "Szeto", "Xi", "Yin", "翾飞", "Xuan", "Hao", "Varasittikorn", "Shizhuo", "Jae", "焮", "Xun", " Magsun "," but "," Freedom "," 皛 "," Xiao "," Strew "," Jinseo "," 迿 "," Misaki "," 婞 "," Mithushi "," stitching "," 姁 "," 猇 "," Sizzle "," 箮 "," 翛 "," Akatsuki "," Y ": [" QE "," 冘 "," Huayi "," Yun "," Denzo "," Concubine "," Dali "," Yun "," Yang "," Man "," Yue "," Yao "," kind "," Emmanuel "," Dumbo "," circumspectly "," Yun "," flown "," Yi Guan "," Yee "," Yoon-jin "," 祎 "," Yu "," Flood "," Brigitte "," Portrait "," Yun "," Tian "," Keyinn "," Yun "," Hongyu "," Enday "," Wan Leng "," Qiuyan "," Yong "," collapse " , "inspiring", "顒", "Fan", "羕", "Yang", "Yanshan", "Ripple", "눉payment", "sharing", "Humei", "Antonacci", "嶢", "centering", "Yi", "cloud", "Keyinn", "Eagle", "Yuang", "Weller", "Yang", "Wing", "Yao", "Western", "歈", "貟", "Leytoneric", "Zhu", " Jessie "," 畇 "," 娫 "," Danish "," Bless "," 溳 "," 崯 "," Ying "," 煬 "," 靷 "," Felon "," interracial "," 軏 "," Yi "," z ": [" Cheng "," 梽 "," Zhe "," Jason "," Magazine ","Superciliousness "," 衠 "," Shibuya "," incur "," 詟 "," Cizhao "," Zan "," 珘 "," Alms "}} 

Specific images: The HTML of the page shown in the Picture:

<! DOCTYPE html>  

Video commentary punch here