Hvordan lage den MooTools trekkspill Reverse
MooTools er en Javascript-rammeverk som hjelper deg å skrive cross-browser kode som gjør det mulig for utvidbar, uttrekkbare atferd som for eksempel de som brukes i utvid og uttrekk nettstedet trekkspill. Når svever over en MooTools trekkspill element, klikker du for å få trekkspill element for å utvide. Ved å klikke på et annet element, trekker det første klikket menyen og det nye elementet utvides. Etter å utvide alle trekkspill elementer, trenger du bare å klikke på den første menyen igjen for å reversere trekkspill til sin opprinnelige posisjon.
Bruksanvisning
1 Last ned og installer MooTools Javascript rammeverk konsollen. Kopiere eller skrive i din webside HTML-kode.
2 Åpne konsollen og skape HTML markup for MooTools trekkspill der du ønsker det. Skriv inn følgende kode for å få trekkspill rammen skal vises:
<Div id = "mymenu">
<H3 class = "toggler menusection"> Meny § 1 </ h3>
<Div class = "element menusection">
<Ul>
<Li> <a href="1"> Link 1 </a> </ li>
<Li> <a href="2"> Link to </a> </ li>
<Li> <a href="3"> Link 3 </a> </ li>
<Li> <a href="4"> Link 4 </a> </ li>
</ Ul>
</ Div>
Endre "toggler menyen avsnittet" posisjoner til hva tittelen du ønsker å bruke i trekkspill.
<H3 class = "toggler menusection"> Meny § 2 </ h3>
<Div class = "element menusection">
<Ul>
<Li> <a href="1"> Link 1 </a> </ li>
<Li> <a href="2"> Link to </a> </ li>
</ Ul>
</ Div>
<! - Legg her andre deler ... ->
</ Div> "
3 Skriv inn koden for å knytte MooTools rammeverket til HTML-siden. Plasser denne koden ovenfor header tag: <script type = "text / javascript" src = "mootools.svn.js"> </ script>.
4 Skriv inn Javascript rammeverk for MooTools trekkspill klassen mellom <head> tag på siden:
<Script type = "text / javascript">
window.addEvent ( 'domready', function () {
Var trekkspill = ny Accordion ( 'h3.menusection', 'div.menusection', {
opacity: falsk,
onActive: function (toggler, element) {
toggler.setStyle ( 'farge', '# 333333');
toggler.setStyle ( 'bakgrunn', '#FFFFCC');
}
onBackground: function (toggler, element) {
toggler.setStyle ( 'farge', '#FFFFFF');
toggler.setStyle ( 'bakgrunn', '# 999999');
}
}, $ ( 'mymenu'));
});
</ Script>
5 Tilpass CSS-koden slik du vil. Juster størrelsen på trekkspill, bakgrunnsfarge, skriftstørrelse og skriftfarge til størrelse og type du ønsker. Når du programmere i Java, eller CSS, vil disse endringene avhenge av hvor bredt du ønsker trekkspill å være, bakgrunnsfarger du bruker og størrelse og stil på skriften du vil ha. For eksempel legge til følgende CSS endringer for å gjøre trekkspill 500 piksler bred med en 1-piksel margin, en grå bakgrunn og en 12-punkts skrift:
Hoved {width: 500px; margin: 1opx auto;}
#accordion h3{ background:#cccccc;}
border-bottom: solid 2px #999999;
font-size:12px;
6 Skriv resten av HTML eller kopier koden til den andre HTML utvikle konsollen. Last siden til domenet ditt via FTP-program.
Hint
- Selv om dette er en grunnleggende trekkspill kode, er det mange varianter til Mootools trekkspill. En utvikler vil legge til, slette eller endre koden for å få riktig type, størrelse og stil på trekkspill han vil.