Akordeona tipa izvēlne paša rokām
Šinī rakstā mēģināšu izstāstīt kā es veidotu akordeona tipa navigācijas izvēlni. Centos rakstīt tā lai arī tiem, kuri vēlas apgūt šo to jaunu būtu no kā smelties kādu ideju, kā arī tiem, kuri jau ilgāku laiku darbojas web jomā. Protams ka manis piedāvātais risinājums noteikti ir uzlabojams, ja ir kādi ierosinājumi labprāt tos uzklausītu.
Uzreiz jāpiebilst, ka dizaina noformējumam šoreiz ir atstāta otrā plāna loma. Pamata akcents likts uz jQuery iespējām, kā arī uz to kā es risinu šādas situācijas ar php un DB.
Sāksim izmantojot tikai css, html un javascript
Starp ievietojam atsauces uz mūsu css un javascript failiem, manā gadījumā tie izskatās šādi
<script src="jquery-1.3.2.min.js" type="text/javascript"></script> <script src="main.js" type="text/javascript"></script>
izveidojam html ul li sarakstu, kurš izskatās šādi:
<ul id="menu"> <li><a href="#">Menu item 1 (no subcats)</a></li> <li><a href="javascript:;">Menu item 2</a> <ul> <li><a href="#">Sumbenu item 1</a></li> <li><a href="#">Sumbenu item 2</a></li> </ul> </li> <li><a href="javascript:;">Menu item 3</a> <ul> <li><a href="#">Sumbenu item 1</a></li> <li><a href="#">Sumbenu item 2</a></li> <li><a href="#">Sumbenu item 2</a></li> </ul> </li> <li><a href="javascript:;">Menu item 4</a> <ul> <li><a href="#">Sumbenu item 1</a></li> <li><a href="#">Sumbenu item 2</a></li> <li><a href="#">Sumbenu item 2</a></li> </ul> </li> <li><a href="javascript:;">Menu item 5</a> <ul> <li><a href="#">Sumbenu item 1</a></li> <li><a href="#">Sumbenu item 2</a></li> <li><a href="#">Sumbenu item 2</a></li> </ul> </li> </ul>
Vienkārša html versija gatava, bet ja vēlamies šo te visu padarīt dinamisku, proti ieviest php un kādu no datubāzēm lasām tālāk.
main.css
*{ font-size: 12px; font-family: verdena serif; } a{ text-decoration: none; color: #333; display: block; margin: 0; outline: none; } #menu{ list-style: none; width: 200px; } #menu li{ border: 1px solid #dcdcdc; margin: 2px; padding: 2px; } #menu ul{ list-style: none; padding: 0; display: none; } #menu ul li{ padding-left: 2px; margin: 0; border: none; }
main.css nodrošina tikai vienkāršu silu ieviešu, vienīgais kam patiešām ir vērts pievērts uzmanību ir
#menu ul{ list-style: none; padding: 0; display: none; }
Noslēpjam visus apakšmenu, proti visus ul elementus iekš mūsu galvenā ul (#menu)
Javascript daļ, kura nodrošina atvēršanas/aizvēršanas animācijas lietas
$(document).ready(function(){ // atrodam iekš elamenta #menu a tagu un piešķiram click eventu $('#menu a').click(function() { //noslēpjam visus ul iekš #menu $("#menu ul").slideUp('slow'); // pārvietojam kursoru no a taga uz li tagu, meklējam ul un parādam to $(this).parent().find('ul').slideDown('slow'); return false; }); }) ;
Es izmantoju mysql, bet tik pat labi var izmantot jebkuru citu no datubāzēm.
Tātad izveidojam mūsu izvēlētajā datubāzē tabulu, kura pēc principa izskatās aptuveni šādi:
CREATE TABLE `test1` ( `id` INT( 11 ) NOT NULL AUTO_INCREMENT , `name` VARCHAR( 255 ) NOT NULL , `parentid` INT( 11 ) NOT NULL , PRIMARY KEY ( `id` ) );
Tā kā mums jau ir css un javascripts gatavs papildinām ul#menu izveidi ar php.
mans risinājums ir izmantot rekursīvu funkciju
/** * * Html struktūras ģenerācija * * @param integer * @return string */ function GetMenu($parentID=0){ $return =''; // Pieprasījums datubāzei pēc datiem $query = mysql_query("SELECT id,name,parentid FROM test1 WHERE parentid=".intval($parentID)); $count = mysql_num_rows($query); if($count > 0){ // Ja parent ID ir 0 tad piešķiram ul ID $return .='<ul id="menu">'; while($dataRow = mysql_fetch_array($query)){ // Izsaucam šo pašu funkciju rekursīvi $return .=' <li> <a onclick="OpenMneu(this);" href="javascript:;"> '.htmlspecialchars($dataRow['name']).' </a> '.GetMenu(intval($dataRow['id'])).' </li>'; } // Noslēdzam UL $return .='</ul>'; } //Izvadam savāktos datus return $return; } // Izsaucam mūsu izveidoto menu echo GetMenu();
Lejupielādēt visus izmantotos failus [download#2]
Autors: Roberts Mozgis (rob)
Web izstrādātājs ar vairāku gadu pieredzi. Esmu strādājis pie daudziem interesantiem projektiem Latvijā un ārpus tās. Specializācija PHP, JavaScript, CSS, Html, kā viss ap datubāzēm.
Piu www 26.02.2009 | 16:10
un kas notiek, ja nospiež uz jau atvērta parenta?
childi aizveras un atveras no jauna. Nesmuki!
Šito vajag novērst…!
Piu www 26.02.2009 | 16:12
Jā – un uzpiežot uz jebkura čailda – ie aizveras. Arī gļuks…
Pēc idejas viss, ko esi uztaisījis – ka uz jebkuru eventu aizveras viss un atveras tas, ko vajag.
Es to būtu savādāk taisījis… bet nu tas lai paliek manā ziņā…
rob www 26.02.2009 | 16:17
Labprāt uzklausītu tavu risinājumu
nelietis www 06.05.2009 | 13:22
Uz katru sadaļu un apakšsadaļu izpildās viens sql vaicājums, vaitad nebūtu labāk visus datus izvilkt masīvā ar vienu vaicājumu un tad no tā masīva vērtībām veidot koku? :)
Roberts 27.05.2009 | 05:11
Aww šitais ir tiešām draņķis. Jquery? Paši savu mini-freimworku nemākam saveidot kas izpilditu sito bez liekas alien interupcijas? Un nelietim taisnība, uz katru pa sql pieprasijumam? Cmoon, 1 pieprasijums uz piemēram 2000 hitiem dienā tikai menu ir nepieļaujami.
banesto 05.12.2009 | 20:11
off-topics – kāpēc netiek rādīti rakstu autori? tas palīdzētu nākotnē saprast pēc autora – vai rakstam ir potence būt sakarīgam vai nē, manuprāt.