new coding learnt n.
Skip this Video
Loading SlideShow in 5 Seconds..
New coding learnt PowerPoint Presentation
Download Presentation
New coding learnt

New coding learnt

100 Vues Download Presentation
Télécharger la présentation

New coding learnt

- - - - - - - - - - - - - - - - - - - - - - - - - - - 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 -