Skip to content
lifedraft edited this page Sep 13, 2010 · 2 revisions

Some Instructions how to install it.

1. First

Include the CSS and JavaScript Files like this:

This goes into the <head>

<link rel="stylesheet" href="../src/jquery.lifedraft_iphonealphabet.css" type="text/css" media="screen" charset="utf-8" />

This goes just before the closing </body> tag

<script src="../lib/jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../lib/lifedraft_style.js" type="text/javascript" charset="utf-8"></script>
<script src="../src/jquery.lifedraft_iphonealphabet.js" type="text/javascript" charset="utf-8"></script>

2. Second

Generate your data! It could look like the following, but the HTML structure wan’t limit your creativity. Believe me, it’s flexible!

<ol id="js">
  <li><a href="#">Acartophthalmidae</a></li>
  <li><a href="#">Acroceridae</a></li>
  <li><a href="#">Agromyzidae</a></li>
  <li><a href="#">Anisopodidae</a></li>
  <li><a href="#">Anthomyiidae</a></li>
  <li><a href="#">Anthomyzidae</a></li>
  <li><a href="#">Apioceridae</a></li>
  <li><a href="#">Apsilocephalidae</a></li>
  <li><a href="#">Apystomyiidae</a></li>
  <li><a href="#">Asilidae</a></li>
  <li><a href="#">Asteiidae</a></li>
  <li><a href="#">Atelestidae</a></li>
  <li><a href="#">Athericidae</a></li>
  <li><a href="#">Aulacigastridae</a></li>
  <li><a href="#">Australimyzidae</a></li>
  <li><a href="#">Austroleptidae</a></li>
  <li><a href="#">Axiniidae</a></li>
  <li><a href="#">Axymyiidae</a></li>
  <li><a href="#">Baeonotidae</a></li>
  <li><a href="#">Bengaliidae</a></li>
  <li><a href="#">Bibionidae</a></li>
  <li><a href="#">Blephariceridae</a></li>
  <li><a href="#">Bolitophilidae</a></li>
  <li><a href="#">Bombyliidae</a></li>
  <li><a href="#">Borboridae</a></li>
  <li><a href="#">Borboropsidae</a></li>
  <li><a href="#">Brachystomatidae</a></li>
  <li><a href="#">Braulidae</a></li>
  <li><a href="#">Calliphoridae</a></li>
  <li><a href="#">Calobatidae</a></li>
  <li><a href="#">Camillidae</a></li>
  <li><a href="#">Campichoetidae</a></li>
  <li><a href="#">Canacidae</a></li>
  <li><a href="#">Canthyloscelidae</a></li>
  <li><a href="#">Carnidae</a></li>
  <li><a href="#">Cecidomyiidae</a></li>
  <li><a href="#">Celyphidae</a></li>
  <li><a href="#">Ceratopogonidae</a></li>
  <li><a href="#">Chamaemyiidae</a></li>
  <li><a href="#">Chaoboridae</a></li>
  <li><a href="#">Chironomidae</a></li>
  <li><a href="#">Chiropteromyzidae</a></li>
  <li><a href="#">Chloropidae</a></li>
  <li><a href="#">Chyromyidae</a></li>
  <li><a href="#">Clusiidae</a></li>
  <li><a href="#">Cnemospathidae</a></li>
  <li><a href="#">Coelopidae</a></li>
  <li><a href="#">Coenomyiidae</a></li>
  <li><a href="#">Conopidae</a></li>
  <li><a href="#">Corethrellidae</a></li>
  <li><a href="#">Cramptonomyiidae</a></li>
  <li><a href="#">Cremifaniidae</a></li>
  <li><a href="#">Cryptochetidae</a></li>
  <li><a href="#">Ctenostylidae</a></li>
  <li><a href="#">Culicidae</a></li>
  <li><a href="#">Curtonotidae</a></li>
  <li><a href="#">Cuterebridae</a></li>
  <li><a href="#">Cylindrotomidae</a></li>
  <li><a href="#">Cypselidae</a></li>
  <li><a href="#">Cypselosomatidae</a></li>
  <li><a href="#">Deuterophlebiidae</a></li>
  <li><a href="#">Diadocidiidae</a></li>
  <li><a href="#">Diastatidae</a></li>
  <li><a href="#">Diopsidae</a></li>
  <li><a href="#">Ditomyiidae</a></li>
  <li><a href="#">Dixidae</a></li>
  <li><a href="#">Dolichopodidae</a></li>
  <li><a href="#">Drosophilidae</a></li>
  <li><a href="#">Dryomyzidae</a></li>
  <li><a href="#">Eginiidae</a></li>
  <li><a href="#">Empididae</a></li>
  <li><a href="#">Ephydridae</a></li>
  <li><a href="#">Eriopteridae</a></li>
  <li><a href="#">Eurychoromyiidae</a></li>
  <li><a href="#">Eurygnathomyiidae</a></li>
  <li><a href="#">Euxestidae</a></li>
  <li><a href="#">Evocoidae</a></li>
  <li><a href="#">Exeretonevridae</a></li>
  <li><a href="#">Fanniidae</a></li>
  <li><a href="#">Fergusoninidae</a></li>
  <li><a href="#">Gasterophilidae</a></li>
  <li><a href="#">Glossinidae</a></li>
  <li><a href="#">Gobryidae</a></li>
  <li><a href="#">Helcomyzidae</a></li>
  <li><a href="#">Heleomyzidae</a></li>
  <li><a href="#">Helosciomyzidae</a></li>
  <li><a href="#">Hesperinidae</a></li>
  <li><a href="#">Heterocheilidae</a></li>
  <li><a href="#">Heteromyzidae</a></li>
  <li><a href="#">Heterostomidae</a></li>
  <li><a href="#">Hilarimorphidae</a></li>
  <li><a href="#">Hippoboscidae</a></li>
  <li><a href="#">Homalocnemiidae</a></li>
  <li><a href="#">Huttoninidae</a></li>
  <li><a href="#">Hybotidae</a></li>
  <li><a href="#">Hyperoscelididae</a></li>
  <li><a href="#">Hypodermatidae</a></li>
  <li><a href="#">Ironomyiidae</a></li>
  <li><a href="#">Iteaphila group</a></li>
  <li><a href="#">Keroplatidae</a></li>
  <li><a href="#">Lauxaniidae</a></li>
  <li><a href="#">Leptoconopidae</a></li>
  <li><a href="#">Lestremiidae</a></li>
  <li><a href="#">Limoniidae</a></li>
  <li><a href="#">Lonchaeidae</a></li>
  <li><a href="#">Lonchopteridae</a></li>
  <li><a href="#">Lygistorrhinidae</a></li>
  <li><a href="#">Macroceridae</a></li>
  <li><a href="#">Manotidae</a></li>
  <li><a href="#">Marginidae</a></li>
  <li><a href="#">Megamerinidae</a></li>
  <li><a href="#">Mesembrinellidae</a></li>
  <li><a href="#">Microdontidae</a></li>
  <li><a href="#">Micropezidae</a></li>
  <li><a href="#">Microphoridae</a></li>
  <li><a href="#">Milichiidae</a></li>
  <li><a href="#">Mindidae</a></li>
  <li><a href="#">Mormotomyiidae</a></li>
  <li><a href="#">Muscidae</a></li>
  <li><a href="#">Mycetobiidae</a></li>
  <li><a href="#">Mycetophilidae</a></li>
  <li><a href="#">Mydidae</a></li>
  <li><a href="#">Mystacinobiidae</a></li>
  <li><a href="#">Mythicomyiidae</a></li>
  <li><a href="#">Nannodastiidae</a></li>
  <li><a href="#">Nemestrinidae</a></li>
  <li><a href="#">Neminidae</a></li>
  <li><a href="#">Neottiophilidae</a></li>
  <li><a href="#">Neriidae</a></li>
  <li><a href="#">Neurochaetidae</a></li>
  <li><a href="#">Nothybidae</a></li>
  <li><a href="#">Notomyzidae</a></li>
  <li><a href="#">Nycteribiidae</a></li>
  <li><a href="#">Nymphomyiidae</a></li>
  <li><a href="#">Odiniidae</a></li>
  <li><a href="#">Oestridae</a></li>
  <li><a href="#">Olbiogastridae</a></li>
  <li><a href="#">Opetiidae</a></li>
  <li><a href="#">Opomyzidae</a></li>
  <li><a href="#">Oreogeton</a></li>
  <li><a href="#">Otitidae</a></li>
  <li><a href="#">Pachyneuridae</a></li>
  <li><a href="#">Pallopteridae</a></li>
  <li><a href="#">Panthophthalmidae</a></li>
  <li><a href="#">Pediciidae</a></li>
  <li><a href="#">Pelecorhynchidae</a></li>
  <li><a href="#">Penthetriidae</a></li>
  <li><a href="#">Periscelididae</a></li>
  <li><a href="#">Perissommatidae</a></li>
  <li><a href="#">Phaeomyiidae</a></li>
  <li><a href="#">Phlebotomidae</a></li>
  <li><a href="#">Phoridae</a></li>
  <li><a href="#">Phycodromidae</a></li>
  <li><a href="#">Phytalmiidae</a></li>
  <li><a href="#">Piophilidae</a></li>
  <li><a href="#">Pipunculidae</a></li>
  <li><a href="#">Platypezidae</a></li>
  <li><a href="#">Platystomatidae</a></li>
  <li><a href="#">Pleciidae</a></li>
  <li><a href="#">Pseudopomyzidae</a></li>
  <li><a href="#">Psilidae</a></li>
  <li><a href="#">Psychodidae</a></li>
  <li><a href="#">Pterocallidae</a></li>
  <li><a href="#">Ptychopteridae</a></li>
  <li><a href="#">Ptychopteromorpha</a></li>
  <li><a href="#">Pyrgotidae</a></li>
  <li><a href="#">Rachiceridae</a></li>
  <li><a href="#">Rangomaramidae</a></li>
  <li><a href="#">Rhagionidae</a></li>
  <li><a href="#">Rhiniidae</a></li>
  <li><a href="#">Rhinophoridae</a></li>
  <li><a href="#">Rhinotoridae</a></li>
  <li><a href="#">Richardiidae</a></li>
  <li><a href="#">Risidae</a></li>
  <li><a href="#">Ropalomeridae</a></li>
  <li><a href="#">Sarcophagidae</a></li>
  <li><a href="#">Scathophagidae</a></li>
  <li><a href="#">Scatopsidae</a></li>
  <li><a href="#">Scenopinidae</a></li>
  <li><a href="#">Sciadoceridae</a></li>
  <li><a href="#">Sciaridae</a></li>
  <li><a href="#">Sciomyzidae</a></li>
  <li><a href="#">Sepsidae</a></li>
  <li><a href="#">Simuliidae</a></li>
  <li><a href="#">Siphonellopsidae</a></li>
  <li><a href="#">Solvidae</a></li>
  <li><a href="#">Somatiidae</a></li>
  <li><a href="#">Spaniidae</a></li>
  <li><a href="#">Sphaeroceridae</a></li>
  <li><a href="#">Stackelbergomyiidae</a></li>
  <li><a href="#">Stenomicridae</a></li>
  <li><a href="#">Stratiomyidae</a></li>
  <li><a href="#">Streblidae</a></li>
  <li><a href="#">Strongylophthalmyiidae</a></li>
  <li><a href="#">Stylogasteridae</a></li>
  <li><a href="#">Synneuridae</a></li>
  <li><a href="#">Syringogastridae</a></li>
  <li><a href="#">Syrphidae</a></li>
  <li><a href="#">Tabanidae</a></li>
  <li><a href="#">Tachinidae</a></li>
  <li><a href="#">Tachiniscidae</a></li>
  <li><a href="#">Taeniapteridae</a></li>
  <li><a href="#">Tanyderidae</a></li>
  <li><a href="#">Tanypezidae</a></li>
  <li><a href="#">Tephritidae</a></li>
  <li><a href="#">Teratomyzidae</a></li>
  <li><a href="#">Termitoxeniidae</a></li>
  <li><a href="#">Tethinidae</a></li>
  <li><a href="#">Thaumaleidae</a></li>
  <li><a href="#">Therevidae</a></li>
  <li><a href="#">Thyreophoridae</a></li>
  <li><a href="#">Tipulidae</a></li>
  <li><a href="#">Trichoceridae</a></li>
  <li><a href="#">Trixoscelididae</a></li>
  <li><a href="#">Trypetidae</a></li>
  <li><a href="#">Tunisimyiidae</a></li>
  <li><a href="#">Tylidae</a></li>
  <li><a href="#">Ulidiidae</a></li>
  <li><a href="#">Vermileonidae</a></li>
  <li><a href="#">Xenasteiidae</a></li>
  <li><a href="#">Xylomyidae</a></li>
  <li><a href="#">Xylophagidae</a></li>
  <li><a href="#">Xenasteiidae</a></li>
  <li><a href="#">Xylomyidae</a></li>
  <li><a href="#">Xylophagidae</a></li>
  <li><a href="#">Xenasteiidae</a></li>
  <li><a href="#">Xylomyidae</a></li>
  <li><a href="#">Xylophagidae</a></li>
  <li><a href="#">Xenasteiidae</a></li>
  <li><a href="#">Xylomyidae</a></li>
  <li><a href="#">Xylophagidae</a></li>
  <li><a href="#">Xenasteiidae</a></li>
  <li><a href="#">Xylomyidae</a></li>
  <li><a href="#">Xylophagidae</a></li>
  <li><a href="#">Xenasteiidae</a></li>
  <li><a href="#">Xylomyidae</a></li>
  <li><a href="#">Xylophagidae</a></li>
  <li><a href="#">Xenasteiidae</a></li>
  <li><a href="#">Xylomyidae</a></li>
  <li><a href="#">Xylophagidae</a></li>
  <li><a href="#">Xenasteiidae</a></li>
  <li><a href="#">Xylomyidae</a></li>
  <li><a href="#">Xylophagidae</a></li>
  <li><a href="#">Xenasteiidae</a></li>
  <li><a href="#">Xylomyidae</a></li>
  <li><a href="#">Xylophagidae</a></li>
  <li><a href="#">Xenasteiidae</a></li>
  <li><a href="#">Xylomyidae</a></li>
  <li><a href="#">Xylophagidae</a></li>
  <li><a href="#">Xenasteiidae</a></li>
  <li><a href="#">Xylomyidae</a></li>
  <li><a href="#">Xylophagidae</a></li>
  <li><a href="#">Xenasteiidae</a></li>
  <li><a href="#">Xylomyidae</a></li>
  <li><a href="#">Xylophagidae</a></li>
</ol>

This is a long list. Anyway.

3. Third

Initialize the plugin:

<script type="text/javascript" charset="utf-8">
  jQuery("#js").lifedraft_iphonealphabet();
</script>

Thats all.

Clone this wiki locally