1 / 6

New coding learnt

New coding learnt. Charlotte Jenkins 21122365 Designing the social web. JQuery Tabs. I decided that for my search bar I would like to have different colour tabs for each different option of searching.

les
Download Presentation

New coding learnt

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. New coding learnt Charlotte Jenkins21122365Designing the social web

  2. JQuery Tabs • I decided that for my search bar I would like to have different colour tabs for each different option of searching. • I found a nice example of this in the JQuery widgets where they offer all different functions of the tabs allowing them to be sortable where the user can move them around. However I didn’t need any sophisticated options just regular tabs that would fulfil their purpose. • I began by downloading JQuery and storing it in my root folder.

  3. Javascript Code // refer to JQuery in root folder <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" charset="utf-8“>// when document ready execute code $(function () { vartabContainers = $('div.tabs > div'); // store tab containers $('div.tabsul.tabNavigation a').click(function () { tabContainers.hide().filter(this.hash).show(); //filter to only show the selected tab $('div.tabsul.tabNavigation a').removeClass('selected'); // remove last selected tab $(this).addClass('selected'); // add selected to tab clicked on return false; //stops the page from jumping to the content when a tab is selected }).filter(':first').click(); //first tab selected on page open }); </script>

  4. HTML Code <div id=“bodyArea”> <div class="tabs"> <ul class="tabNavigation"> //tab names and list order //hash refers to the div id <li><a href="#first"><imgsrc="images/search.jpg" /></a></li> <li><a href="#second"><imgsrc="images/spotify.jpg" /></a></li> <li><a href="#third"><imgsrc="images/lastfm.jpg" /></a></li> </ul> <div id="first" class="headings"> //contains contents of first tab <form method="post" action="search.html"> // form for search box Search your favourite song title : <input align="middle" type="text" name="search" size="80" maxlength="80" /> <input type="submit" value=" Load lyrics and video! " id="submit" /> </form> </div>

  5. <div id="second" class="headings"> //contains content of second tab <form> // form for search box Spotify URI : <input align="middle" type="text" name="searchSpot" size="80" maxlength="80" /> <input type="submit" value=" Load lyrics and video! " id="submit" /> Example: <span class="style1">spotify:user:114670323:playlist:5iwkYfnHAGMEFLiHFFGnP4 </span></p> </form> </div> <div id="third" class="headings"> //contains content of third tab <form> // form for search box Last.FM username : <input align="middle" type="text" name="searchLast" size="80" maxlength="80" /> <input type="button" value=" Load playlists! " id="submit" /> </form> </div> </div>

  6. Have a look This is what they turned out like after I added some nice icons for each option. They also change colour depending on what tab you have selected. To view the functioning version visit my zappa site at - http://zappa.uwl.ac.uk/~21122635/Jukebox/tabs.html

More Related