Budu k vám upřímný:stále jsem nepřišel na to, jestli se mi líbí můj spoluhráč z MooTools Guillermo Rauch. Je toho proti němu hodně naskládáno. Pochází z Argentiny, takže mi asi 10krát denně posíláme zprávy o tom, jak skvělý je Lionel Messi. Žije v Kalifornii, takže se nemusí potýkat s 3 měsíci třeskuté zimy jako já v Madisonu. Dokonce si bere i některá moje kuřátka. Všechno, co řekl...je prostě...jen...tak zatraceně chytrý. Nakonec si myslím, že část mé hořkosti ohledně Guillera spočívá v tom, že je chytřejší než já. Lepší než já v MooTools, JavaScriptu a dokonce i v životě.
Důkaz o Guillerově věku FTW lze nalézt v jeho pluginu TextboxList. TextboxList je vstupní seznam ve stylu Facebooku, který původně používal malý startup jménem Facebook. TextbloxList je k dispozici ve variantách MooTools i jQuery a je neuvěřitelně snadno implementovatelný. Pojďme si projít jednoduchý příklad.
Zobrazit ukázkuHTML
Enter tags (with commas)
Type the tag (one or more words) and press comma (,). Use left/right arrows, backspace, delete to navigate
Vstupní prvek. A je to. (Pozn. redakce:Někdy nechápu, proč jsem do příkladů kódu vložil malý popis části HTML. Jelikož se řídím filozofií „JS pro vylepšení“, část HTML je obvykle samovysvětlující. . ...To je vše.)
CSS
.textboxlist { font: 11px "Lucida Grande", Verdana; cursor: text; }
.textboxlist-bits { zoom: 1; overflow: hidden; margin: 0; padding: 3px 4px 0; border: 1px solid #999; *padding-bottom: 3px; }
.textboxlist-bit { list-style-type: none; float: left; display: block; padding: 0; margin: 0 5px 3px 0; cursor: default; }
.textboxlist-bit-editable { border: 1px solid #fff; }
.textboxlist-bit-editable-input { border: 0; padding: 2px 0; *padding-bottom: 0; height: 14px; font: 11px "Lucida Grande", Verdana; }
.textboxlist-bit-editable-input:focus { outline: 0; }
.textboxlist-bit-box { position: relative; line-height: 18px; padding: 0 5px; -moz-border-radius: 9px; -webkit-border-radius: 9px; border-radius: 9px; border: 1px solid #CAD8F3; background: #DEE7F8; cursor: default; }
.textboxlist-bit-box-deletable { padding-right: 15px; }
.textboxlist-bit-box-deletebutton { position: absolute; right: 4px; top: 6px; display: block; width: 7px; height: 7px; font-size: 1px; background: url('close.gif'); }
.textboxlist-bit-box-deletebutton:hover { border: none; background-position: 7px; text-decoration: none; }
.textboxlist-bit-box-hover { background: #BBCEF1; border: 1px solid #6D95E0; }
.textboxlist-bit-box-focus { border-color: #598BEC; background: #598BEC; color: #fff; }
.textboxlist-bit-box-focus .textboxlist-bit-box-deletebutton { background-position: bottom; }
TextboxList přichází s vlastní šablonou stylů CSS, takže část CSS je hotová za vás. TextboxList vyžaduje pouze jeden obrázek a ten je navíc sprited. Guiller nenechává nic neoptimalizovaného. (Pozn. redakce:Guillerova pozornost k detailům na mě dělá dojem a zároveň mě štve.)
Použití MooTools
//create an instance
var t2 = new TextboxList('myListElement', {
bitsOptions: {
editable: {
addKeys: 188
}
}
});
//add a few just for giggles
t2.add('Tag 1').add('Tag 2');
Výše uvedený příklad je velmi jednoduché použití - zadejte název, přidejte čárku a okamžitě uvidíte účinek. Ještě úžasnější je, že plugin je kompatibilní s klávesnicí, což znamená, že pomocí kláves se šipkami se můžete pohybovat „přes“ nebo mezi položkami a dokonce je mazat. V podstatě nikdy nemusíte používat myš. Za zmínku také stojí, že Guillermova třída TextboxList pracuje s přibaleným zásuvným modulem pro automatické doplňování, takže můžete TextboxList rychle připojit k vaší databázi. (Pozn. redakce:Existuje také speciální úryvek automatického doplňování pro binární vyhledávání....Jo, já vím, vsadím se, že ho nejspíš také začínáte mít rádi...)
Zobrazit ukázku Všechny vtipy stranou, Guillermo Rauch je úžasný vývojář. Můžete ho sledovat na Twitteru, nalákat jeho kód na GitHub (je to také guru Node.js) nebo se podívat na jeho úvahy na jeho blogu. Má také vytvořené stránky projektu pro verze TextboxList MooTools a jQuery, takže se na ně nezapomeňte podívat, abyste získali podrobnosti o možnostech třídy, událostech a použití.
Pokud si náhodou uděláte chvilku a hodíte mu tweet, určitě mu poděkujte za vytvoření MooTools Forge!