Top Ten jQuery Plugin
credit : http://webtopten.wordpress.com/2012/10/23/top-ten-useful-jquery-plugins/
Hey are you a web Developer or a Web Designer, if yes then this Jquery plugins can be useful to you. Here is the list of top ten jquery plugins and api’s tointegrate your website. Checkout the list of Top 10 Jquery Websites.
Turn.js a jquery plugin that will make your web page content looks like amagazine or a ebook. You can feel like you are reading original book on web. This Jquery plugin is also useful to online book sellers and also e-commerce store owners. You can also create a book shelf using this jquery plugin and put books on that shelf and click it and read it. It will be awesome experience.
2. Dynamic Grid Layout Jquery Plugin
Want to make your website look a like pinterest.com. Here is the solutionBlocksit.js. this plugin is also known as Dynamic grid layout jquery plugin. Blockit.js jquery plugin will reposition html elements using css absolute solution property and this jquery capable of calculate top and left positions for element based on certain criteria.
Page Scroller jquery plugin used to create scroll path for content on web page. Jquery scroll path plugin uses canvas flavoured syntax to create arcs and lineson a web page. Here you can see a quick demo of it.
Hey want to make your progress bar more interactive then this jquery will help you to create beautiful progress bar. You can also load multiple percentage loaders simultaneously. You can also use this percentage loader as a controllerlike in iphone. Here you can see the demo.
5. Noty.js
Noty, A Jquery Plugin that is used to create alert, confirmation, error, warning, success and information type messages. Using this plugin you can createawesome alert boxes. It’s best feature is you can put this alert boxes on any direction of web browser window like you can put it to centre left, centre right, centre, top left, top centre etc. you can also customize text, animation, button and speed.
6. Ideal Forms
Bored with the old html elements validations? Want to create awesome jquery validations then you can try this Ideal form jquery plugin. You can validate textbox, radiobuttons, dropdownlists, checkboxes and file upload controls using this plugin. Ideal Forms are used to build and validate HTML forms. You can checkout the demo here.
Ajax Paypal cart a shopping cart developed using jquery and ajax. It’s main feature that it supports paypal integration. This jquery plugin is very useful to developers who want to develop shopping carts. This plugin also providesthemes and it can be customizable using cascading stylesheets.
Want to filp the box on your web page this jquery plugin can be useful for that. Using This plugin you can flip any html element. You can also change it’s direction, speed of flip, depth. This Plugin is easy to integrate and cross browser compatible.
This plugin is used to Display the popup interactively. Don’t worry this Jquery Plugin is Easy to Implement and also it is cross browser compatible. You can edit and change the css to make more beautiful modal popup. You can see the instruction on their website and attach it and make your site more beautiful.
10. FitText
Fit the Text on web page as per resolution of the screen. It only used for large texts that are uncomfortable with small screens. This Jquery plugin changes the font sizes as per the resolution of screen. So that you can see more mobile friendly, tablet friendly websites.
jQuery Validate
ไฟล์ index.html ใส่ฟอร์ม
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!doctype html> <html lang="en"> <head> <script type="text/javascript" src="jquery-1.7.1.min.js"></script> <script type="text/javascript" src="myscript.js"></script> <script type="text/javascript" src="jquery.validate.min.js"></script> <script type="text/javascript" src="jQueryPlugin.js"></script> </head> <body> <div id="info"><form id="commentForm" action=""> <input type="text" id="hello" value="" /><br/> <input type="text" id="studentid" name="studentid" value="" /><input type="button" id="submit" value="get"/><input type="button" id="addstudent" value="add"/><input type="button" id="updatestudent" value="update"/><input type="button" id="deletebt" value="del"/><br/> <input type="text" id="firstname" name="firstname" value="" /><br/> <input type="text" id="lastname" name="lastname" value="" /><br/> <input type="button" id="getallstudent" value="get all student"/><br/> <table id="studentlist"> </table> <input type="submit" id="btnSubmit" value="submit validate" /> </form></div> </body> </html> |
ไฟล์ script validate
|
1 2 3 4 5 6 7 8 9 10 |
$(document).ready(function () { $('#studentid').myhightlight(); $("#info form").validate({ rules: { studentid: { required: true }, firstname: { required: true }, lastname: { required: true } } }); }); |
jQuery สร้าง Plugin function ใช้เอง
|
1 2 3 4 5 6 7 8 9 10 11 |
/// <reference path="jquery-1.7.1.min.js" /> (function ($) { //สร้างชื่อฟังชั่นไว้ใช้งานเอง $.fn.myhightlight = function () { return this.each(function(){ $(this).css('background-color','#aa0000') }); } })(jQuery) |
เอาไปใช้กับไฟล์ MyScript.js
|
1 2 3 4 5 |
/// <reference path="jquery-1.7.1.min.js" /> /// <reference path="jQueryPlugin.js" /> $(document).ready(function () { $('#studentid').myhightlight(); }); |
เวลาพิมพ์โค้ดใน jQuery ถ้าอยากให้มันมี Inteligent ช่วยใช้ลากไฟล์มาวางในไฟล์ ที่ต้องการพิมพ์พอลากมาแล้วมันจะเป็น //ชื่อไฟล์ jQuery ที่เรียกใช้
การทำ Web service ด้วย WCF + Restful + Json PART II
ต่อจากของเดิม http://kungtee.rmutp.ac.th/index.php/wcf-restful-json/
ต่อจากครั้งที่แล้วทำ table และปุ่ม
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!doctype html> <html lang="en"> <head> <script type="text/javascript" src="jquery-1.7.1.min.js"></script> <script type="text/javascript" src="myscript.js"></script> </head> <body> <input type="text" id="hello" value="" /><br/> <input type="text" id="studentid" value="" /><input type="button" id="submit" value="submit"/><br/> <input type="text" id="firstname" value="" /><br/> <input type="text" id="lastname" value="" /><br/> <input type="button" id="getallstudent" value="get all student"/><br/> <table id="studentlist"> </table> </body> </html> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$('#getallstudent').click(function(){ $.getJSON('http://localhost:8000/getAllStudent?callback=?', null, function(data){ $.each(data,function(i,student){ $('<tr><td>'+student.firstname+'</td><td>'+student.lastname+'</td></tr>').appendTo('#studentlist'); //alert(student.firstname); }); } ); }); |
การ Insert Data ให้กลับไปแก้ WCF ในส่วนของ interface iService1 แล้วเพิ่มโค้ดลงไป
แก้ไข โค้ด
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 |
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows.Forms; using System.ServiceModel; using System.ServiceModel.Web; namespace WCF { public partial class Form1 : Form { public Form1() { InitializeComponent(); } private void button1_Click(object sender, EventArgs e) { WebServiceHost wsh = new WebServiceHost( typeof(Service1), new Uri("http://localhost:8000")); // JSONP WebHttpBinding whb = new WebHttpBinding(); whb.CrossDomainScriptAccessEnabled = true; wsh.AddServiceEndpoint(typeof(iService1), whb, ""); wsh.Open(); } [System.ServiceModel.ServiceContract] public interface iService1 { [OperationContract, WebGet(ResponseFormat = WebMessageFormat.Json)] string Hello(); [OperationContract, WebGet(ResponseFormat = WebMessageFormat.Json)]// ต้องครอบทุกตัวด้านบน List<student> getAllstudent(); [OperationContract, WebInvoke(Method="GET", ResponseFormat = WebMessageFormat.Json, UriTemplate="studentbyid/{StudentID}")]// ต้องครอบทุกตัวด้านบน student getStudentById(String StudentID); [OperationContract, WebInvoke(Method = "GET", ResponseFormat = WebMessageFormat.Json, RequestFormat = WebMessageFormat.Json, BodyStyle=WebMessageBodyStyle.WrappedRequest)] int AddStudent(String StudentID, String FirstName, String LastName); } public class Service1 : iService1 { public string Hello() { return "ss"; } WCFDataContext mywcfdb1 = new WCFDataContext(); public List<student> getAllstudent() { return mywcfdb1.students.ToList(); } public student getStudentById(String StudentID) { int sid = int.Parse(StudentID); return mywcfdb1.students.Where( s => s.studentId == sid).SingleOrDefault(); } public int AddStudent(String StudentID, string FirstName, string LastName) { int stdID = int.Parse(StudentID); student newstudent = new student(); newstudent.studentId = stdID; newstudent.firstname = FirstName; newstudent.lastname = LastName; mywcfdb1.students.InsertOnSubmit(newstudent); mywcfdb1.SubmitChanges(); return 1; } } } } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
$(document).ready(function(){ /* $.getJSON('http://localhost:8000/Hello?callback=?', null,function(data){ $('#hello').val(data); }); */ /* $('#submit').click(function(){ $.getJSON('http://localhost:8000/studentbyid/'+$('#studentid').val()+'?callback=?', null,function(data){ $('#firstname').val(data.firstname); $('#lastname').val(data.lastname); }); */ $('#getallstudent').click(function(){ $('#studentlist').empty();//ลบพวก table dropdown div $.getJSON('http://localhost:8000/getAllStudent?callback=?', null, function(data){ $.each(data,function(i,student){ $('<tr><td>'+student.firstname+'</td><td>'+student.lastname+'</td></tr>').appendTo('#studentlist'); //alert(student.firstname); }); } ); }); $('#addstudent').click(function(){ $.getJSON('http://localhost:8000/addstudent?callback=?', { StudentID:$('#studentid').val(), FirstName:$('#firstname').val(), LastName:$('#lastname').val() }, function(data){ alert('complete'); }); } ); }); |
Login Panel
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
$(document).ready(function(){ $('#login a').toggle(function(){ $(this) .addClass('active') .next('from') .animate({'height' : 'show'},{ duration: 'slow', easing: 'easeOutBounce' }); },function(){ $(this) .removeClass('active') .next('form') .slideUp(); }); }); |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 |
<!doctype html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>StarTrackr!</title> <link rel="stylesheet" href="../../css/base.css" type="text/css" media="screen" charset="utf-8"/> <link rel="stylesheet" href="login.css" type="text/css" media="screen" charset="utf-8"/> <script src="../../lib/jquery-1.7.1.min.js" type="text/javascript" ></script> <script src="../../lib/jquery-ui-1.8.17.custom.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" src="script.js"></script> </head> <body> <div id="container"> <div id="header"> <h1>StarTrackr!</h1> <div id="login"> <a href="#">Log in</a> <form action=""> <div> <label for="username">Username:</label> <input name="username" id="username" type="text"/> </div> <div> <label for="password">Password:</label> <input name="password" id="password" type="password"/> </div> <div> <input type="submit" value="Log in!" /> </div> </form> </div> </div> <div id="content"> <h2> Welcome! </h2> <ul> <li><a href="#">What's new?</a></li> <li><a href="#">Member extras</a></li> <li><a href="#">About Us</a></li> </ul> <p> Welcome to <strong>StarTrackr!</strong> the planet's premier celebrity tracking and monitoring service. Need to know where in the world the best bands, musicians or producers are within 2.2 square meters? You've come to the right place. We have a very special special on B-grade celebs this week, so hurry in! </p> <p id="disclaimer"> Disclaimer! This service is not intended for the those with criminal intent. Celebrities are kind of like people so their privacy should be respected. </p> <div id="news"> <h2>Latest News</h2> <p> Which member of the seminal calypso/lectro band <em>C&C Music Sweatshop</em> was spotted last night at <em>Dirt</em>, the trendy New York restaurant that serves only food caught and retrieved by the chef's own hands? <span class="spoiler">Yes! It's the ever-effervescent, <em>Glendatronix</em>!</span> </p> <p>Who lost their recording contract today? <span class="spoiler">The Zaxntines!</span></p> </div> <div id="celebs"> <h2 class="heading">Our Celebrities</h2> <p class="info"> We have an ever changing roster of newly chipped celebrities. But it can take as little as a week for the little critters to realise they've been tagged - so you have to be fast! </p> <table class="data"> <thead> <tr> <th>ID</th> <th>Name</th> <th>Occupation</th> <th>Approx. Location</th> <th>Price</th> </tr> </thead> <tbody> <tr> <td>203A</td> <td>Johny Stardust (<a href="bio.pdf">bio</a>)</td> <td>Front-man</td> <td><a href="#" class="location" title="Check out all the Celebs in LA this week!">Los Angeles</a></td> <td>$39.95</td> </tr> <tr> <td>141B</td> <td>Beau Dandy (<a href="img.jpg">pic</a>,<a href="bio.pdf">bio</a>)</td> <td>Singer</td> <td><a href="#" class="location" title="Check out all the Celebs in New York this week!">New York</a></td> <td>$39.95</td> </tr> <tr> <td>2031</td> <td>Mo' Fat (<a href="img.jpg">pic</a>)</td> <td>Producer</td> <td><a href="#" class="location" title="Check out all the Celebs in New York this week!">New York</a></td> <td>$19.95</td> </tr> <tr> <td>007F</td> <td>Kellie Kelly (<a href="bio.pdf">bio</a>,<a href="w.doc">press</a>)</td> <td>Singer</td> <td><a href="#" class="location" title="Check out all the Celebs in Omaha this week!">Omaha</a></td> <td>$11.95</td> </tr> <tr> <td>8A05</td> <td>Darth Fader (<a href="img.jpg">pic</a>)</td> <td>DJ</td> <td><a href="#" class="location" title="Check out all the Celebs in London this week!">London</a></td> <td>$19.95</td> </tr> <tr> <td>6636</td> <td>Glendatronix (<a href="bio.pdf">bio</a>,<a href="w.doc">press</a>)</td> <td>Keytarist</td> <td><a href="#" class="location" title="Check out all the Celebs in London this week!">London</a></td> <td>$39.95</td> </tr> </tbody> </table> </div> <div id="comment"> <h2>Leave a comment</h2> name:<br /> <input type="text" /><br/> comment:<br/> <textarea rows="5" cols="30"></textarea> </div> <h2>Fine Print</h2> <p id="fine_print"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </div> <div id="footer"> <p> © Copyright 2010 CelebriTracker Productions </p> </div> </div> </body> </html> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
#container { position: relative; } #login { position: absolute; top: 0; right: 10px; background: #94C5EB; padding: 5px; -moz-border-radius: 4px; width: 155px; } #login form { margin-top: 10px; } #login form label, #login form input { display: block; } #login form button { float: right; margin-top: 10px; } #login a { display: block; text-decoration: none; font-size: 130%; font-weight: bold; height: 20px; padding: 0 20px 0 5px; background: url(links.png); background-position: right -20px; background-repeat: no-repeat; } #login a.active { background-position: right 0; } |
Multi level accordion
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
$(document).ready(function(){ $('#accordion > li ul') .click(function(event){ event.stopPropagation(); }) .filter(' :not(:first)') .hide(); $('#accordion > li,#accordion > li > ul > li').click(function(){ var selfClick=$(this).find('url:first').is('visible'); if(!selfClick){ $(this) .parent() .find('> li ul:visible') .slideToggle(); } $(this) .find('ul:first') .stop(true,true) .slideToggle(); }); }); |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
#accordion { width:200px; } #accordion li{ cursor: pointer; background:url(accordion_bg.png) repeat-x; font-weight:bold; color:#015287; border:1px solid #b2b2b2; margin-bottom:2px; list-style-image:none; list-style-position:outside; list-style-type:none; -moz-border-radius: 4px; -webkit-border-radius: 4px; padding: 4px 8px; } #accordion li.active{ color:#D15600 } #accordion li ul{ padding:0; margin:10px 0 0 0; } #accordion .second { background:url(accordion_bg.png) repeat-x; border:1px solid #b2b2b2; font-weight: bold; } #accordion li.active li{ text-indent:0; } #accordion li li{ font-weight: normal; background:none; border:0; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 |
<!doctype html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>StarTrackr!</title> <link rel="stylesheet" href="../../css/base.css" type="text/css" media="screen" charset="utf-8"/> <link rel="stylesheet" href="accordion.css" type="text/css" media="screen" charset="utf-8"/> <script src="../../lib/jquery-1.7.1.min.js" type="text/javascript" ></script> <script type="text/javascript" src="script.js"></script> </head> <body> <div id="container"> <div id="header"> <h1>StarTrackr!</h1> </div> <div id="content"> <h2> Welcome! </h2> <div id="navigation"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Buy Now!</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Gift Ideas</a></li> </ul> </div> <p id="intro"> Welcome to <strong>StarTrackr!</strong> the planet's premier celebrity tracking and monitoring service. Need to know where in the world the best bands, musicians or producers are within 2.2 square meters? You've come to the right place. We have a very special special on B-grade celebs this week, so hurry in! </p> <p id="disclaimer"> Disclaimer! This service is not intended for the those with criminal intent. Celebrities are kind of like people so their privacy should be respected. </p> <div id="celebs"> <h2 class="heading">Our Celebrities</h2> <p class="info"> We have an ever changing roster of newly chipped celebrities. But it can take as little as a week for the little critters to realise they've been tagged - so you have to be fast! </p> <ul id="accordion"> <li class="active"> A-List Celebrities <ul> <li><a href="#">Computadors</a> New!</li> <li class="second"> Rising Stars <ul> <li><a href="#">Johny Stardust</a></li> <li><a href="#">Beau Dandy</a></li> </ul> </li> <li class="second"> Falling Stars <ul> <li><a href="#">Kellie Kelly</a></li> <li><a href="#">Darth Fader</a></li> </ul> </li> </ul> </li> <li> B-List Celebrities <ul> <li><a href="#">Sinusoidal Tendancies</a></li> <li><a href="#">Steve Extreme</a></li> </ul> </li> <li> Has Beens <ul> <li><a href="#">Duran Duran Duran</a></li> <li><a href="#">Mike's Mechanic</a></li> </ul> </li> <li> Barely Famous Celebrities <ul> <li><a href="#">Lardy Dah</a></li> <li><a href="#">Rove Live</a></li> </ul> </li> </ul> </div> <div id="comment"> <h2>Leave a comment</h2> name:<br /> <input type="text" /><br/> comment:<br/> <textarea rows="5" cols="30"></textarea> </div> <h2>Fine Print</h2> <p id="fine_print"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </div> <div id="footer"> <p> © Copyright 2010 CelebriTracker Productions </p> </div> </div> </body> </html> |
Simple accordion menus
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
$(document).ready(function(){ $('#celebs ul > li ul') .click(function(event){ event.stopPropagation(); }) .filter(' :not(:first)') .hide(); $('#celebs ul > li').click(function(event){ var selfClick=$(this).find('url:first').is('visible'); if(!selfClick){ $(this) .parent() .find('> li ul:visible') .slideToggle(); } $(this) .find('ul:first') .stop(true,true) .slideToggle(); }); }); |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
#accordion { width:200px; } #accordion li{ cursor: pointer; background:url(accordion_bg.png) repeat-x; font-weight:bold; color:#015287; border:1px solid #b2b2b2; margin-bottom:2px; list-style-image:none; list-style-position:outside; list-style-type:none; -moz-border-radius: 4px; -webkit-border-radius: 4px; padding: 4px 8px; } #accordion li.active{ color:#D15600 } #accordion li ul{ padding:0; margin:10px 0 0 0; } #accordion li.active li{ text-indent:0; } #accordion li li{ font-weight: normal; background:none; border:0; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 |
<!doctype html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>StarTrackr!</title> <link rel="stylesheet" href="../../css/base.css" type="text/css" media="screen" charset="utf-8"/> <link rel="stylesheet" href="accordion.css" type="text/css" media="screen" charset="utf-8"/> <script src="../../lib/jquery-1.7.1.min.js" type="text/javascript" ></script> <script type="text/javascript" src="script.js"></script> </head> <body> <div id="container"> <div id="header"> <h1>StarTrackr!</h1> </div> <div id="content"> <h2> Welcome! </h2> <div id="navigation"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Buy Now!</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Gift Ideas</a></li> </ul> </div> <p id="intro"> Welcome to <strong>StarTrackr!</strong> the planet's premier celebrity tracking and monitoring service. Need to know where in the world the best bands, musicians or producers are within 2.2 square meters? You've come to the right place. We have a very special special on B-grade celebs this week, so hurry in! </p> <p id="disclaimer"> Disclaimer! This service is not intended for the those with criminal intent. Celebrities are kind of like people so their privacy should be respected. </p> <div id="celebs"> <h2 class="heading">Our Celebrities</h2> <p class="info"> We have an ever changing roster of newly chipped celebrities. But it can take as little as a week for the little critters to realise they've been tagged - so you have to be fast! </p> <ul id="accordion"> <li class="active"> A-List Celebrities <ul> <li><a href="#">Computadors</a> New!</li> <li><a href="#">Johny Stardust</a></li> <li><a href="#">Beau Dandy</a></li> </ul> </li> <li> B-List Celebrities <ul> <li><a href="#">Sinusoidal Tendancies</a></li> <li><a href="#">Steve Extreme</a></li> </ul> </li> <li> Has Beens <ul> <li>Duran Duran Duran</li> <li>Mike's Mechanic</li> </ul> </li> <li> Barely Famous Celebrities <ul> <li>Lardy Dah</li> <li>Rove Live</li> </ul> </li> </ul> </div> <div id="comment"> <h2>Leave a comment</h2> name:<br /> <input type="text" /><br/> comment:<br/> <textarea rows="5" cols="30"></textarea> </div> <h2>Fine Print</h2> <p id="fine_print"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </div> <div id="footer"> <p> © Copyright 2010 CelebriTracker Productions </p> </div> </div> </body> </html> |
Dropdown with hover intent
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
$(document).ready(function(){ $('#menu li ul').css({ display:"none", left:"auto" }); $('#menu li').hoverIntent(function(){ $(this) .find('ul') .stop(true,true) .slideDown('fast'); },function(){ $(this) .find('ul') .stop(true,true) .fadeOut('fast'); }); }); |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
#container { position: relative; } #menu { position: absolute; top: 0; right: 0; } #menu, #menu ul { padding: 0; margin: 0; list-style: none; } #menu li { float: left; background: #FFF; } #menu a { display: block; padding: 5px; width: 130px; } #menu li ul { position: absolute; left: -999em; width: 140px; } #menu li:hover ul, #menu li ul:hover { left:auto; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 |
<!doctype html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>StarTrackr!</title> <link rel="stylesheet" href="../../css/base.css" type="text/css" media="screen" charset="utf-8"/> <link rel="stylesheet" href="menus.css" type="text/css" media="screen" charset="utf-8"/> <script src="../../lib/jquery-1.7.1.min.js" type="text/javascript" ></script> <script src="jquery.hoverIntent.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" src="script.js"></script> </head> <body> <div id="container"> <div id="header"> <h1>StarTrackr!</h1> </div> <div id="content"> <h2> Welcome! </h2> <nav role="navigation"> <ul id="menu"> <li><a href="#">What's new?</a> <ul class="active"> <li><a href="#">Weekly specials</a></li> <li><a href="#">Last night's pics!</a></li> <li><a href="#">Users' comments</a></li> </ul> </li> <li><a href="#">Member extras</a> <ul> <li><a href="#">Premium Celebrities</a></li> <li><a href="#">24-hour Surveillance</a></li> </ul> </li> <li><a href="#">About Us</a> <ul> <li><a href="#">Privacy Statement</a></li> <li><a href="#">Terms and Conditions</a></li> <li><a href="#">Contact Us</a></li> </ul> </li> </ul> </nav> <p id="intro"> Welcome to <strong>StarTrackr!</strong> the planet's premier celebrity tracking and monitoring service. Need to know where in the world the best bands, musicians or producers are within 2.2 square meters? You've come to the right place. We have a very special special on B-grade celebs this week, so hurry in! </p> <p id="disclaimer"> Disclaimer! This service is not intended for the those with criminal intent. Celebrities are kind of like people so their privacy should be respected. </p> <div id="news"> <h2>Latest News</h2> <p> Which member of the seminal calypso/lectro band <em>C&C Music Sweatshop</em> was spotted last night at <em>Dirt</em>, the trendy New York restaurant that serves only food caught and retrieved by the chef's own hands? <span class="spoiler">Yes! It's the ever-effervescent, <em>Glendatronix</em>!</span> </p> <p>Who lost their recording contract today? <span class="spoiler">The Zaxntines!</span></p> </div> <div id="celebs"> <h2 class="heading">Our Celebrities</h2> <p class="info"> We have an ever changing roster of newly chipped celebrities. But it can take as little as a week for the little critters to realise they've been tagged - so you have to be fast! </p> <table class="data"> <thead> <tr> <th>ID</th> <th>Name</th> <th>Occupation</th> <th>Approx. Location</th> <th>Price</th> </tr> </thead> <tbody> <tr> <td>203A</td> <td>Johny Stardust (<a href="../../images/johnny_400.jpg" class="lightbox">pic</a>)</td> <td>Front-man</td> <td>Los Angeles</td> <td>$39.95</td> </tr> <tr> <td>141B</td> <td>Beau Dandy (<a href="../../images/beau_400.jpg" class="lightbox">pic</a>)</td> <td>Singer</td> <td>New York</td> <td>$39.95</td> </tr> <tr> <td>2031</td> <td>Mo' Fat (<a href="../../images/mofat_400.jpg" class="lightbox">pic</a>)</td> <td>Producer</td> <td>New York</td> <td>$19.95</td> </tr> <tr> <td>007F</td> <td>Kellie Kelly (<a href="../../images/kellie_400.jpg" class="lightbox">pic</a>)</td> <td>Singer</td> <td>Omaha</td> <td>$11.95</td> </tr> <tr> <td>8A05</td> <td>Darth Fader (<a href="../../images/fader_400.jpg" class="lightbox">pic</a>)</td> <td>DJ</td> <td>London</td> <td>$19.95</td> </tr> <tr> <td>6636</td> <td>Glendatronix (<a href="../../images/glenda_400.jpg" class="lightbox">pic</a>)</td> <td>Keytarist</td> <td>London</td> <td>$39.95</td> </tr> </tbody> </table> </div> <div id="comment"> <h2>Leave a comment</h2> name:<br /> <input type="text" /><br/> comment:<br/> <textarea rows="5" cols="30"></textarea> </div> <h2>Fine Print</h2> <p id="fine_print"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </div> <div id="footer"> <p> © Copyright 2010 CelebriTracker Productions </p> </div> </div> </body> </html> |
Expandable menus
|
1 2 3 4 5 6 7 8 9 10 11 12 |
$(document).ready(function(){ $('#menu > li > ul') .hide() .click(function(event){ event.stopPropagation(); }); $('#menu > li').toggle(function(){ $(this).find('ul').slideDown(); },function(){ $(this).find('ul').slideUp(); }); }); |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
#menu { float: right; width: 200px; } #menu, #menu ul { list-style-type: none; padding: 0; margin: 0; } #menu li { cursor: pointer; background: #94C5EB; border-bottom: 1px solid #444; } #menu li a { text-decoration: none; } #menu > li > a { padding: 2px 10px; font-weight:bold; } #menu li li { cursor: auto; border: 0; padding: 0 14px; background-color: #fff; } #disclaimer, #intro { width: 400px; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 |
<!doctype html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>StarTrackr!</title> <link rel="stylesheet" href="../../css/base.css" type="text/css" media="screen" charset="utf-8"/> <link rel="stylesheet" href="menus.css" type="text/css" media="screen" charset="utf-8"/> <script src="../../lib/jquery-1.7.1.min.js" type="text/javascript" ></script> <script type="text/javascript" src="script.js"></script> </head> <body> <div id="container"> <div id="header"> <h1>StarTrackr!</h1> </div> <div id="content"> <h2> Welcome! </h2> <nav role="navigation"> <ul id="menu"> <li><a href="#">What's new?</a> <ul class="active"> <li><a href="#">Weekly specials</a></li> <li><a href="#">Last night's pics!</a></li> <li><a href="#">Users' comments</a></li> </ul> </li> <li><a href="#">Member extras</a> <ul> <li><a href="#">Premium Celebrities</a></li> <li><a href="#">24-hour Surveillance</a></li> </ul> </li> <li><a href="#">About Us</a> <ul> <li><a href="#">Privacy Statement</a></li> <li><a href="#">Terms and Conditions</a></li> <li><a href="#">Contact Us</a></li> </ul> </li> </ul> </nav> <p id="intro"> Welcome to <strong>StarTrackr!</strong> the planet's premier celebrity tracking and monitoring service. Need to know where in the world the best bands, musicians or producers are within 2.2 square meters? You've come to the right place. We have a very special special on B-grade celebs this week, so hurry in! </p> <p id="disclaimer"> Disclaimer! This service is not intended for the those with criminal intent. Celebrities are kind of like people so their privacy should be respected. </p> <div id="news"> <h2>Latest News</h2> <p> Which member of the seminal calypso/lectro band <em>C&C Music Sweatshop</em> was spotted last night at <em>Dirt</em>, the trendy New York restaurant that serves only food caught and retrieved by the chef's own hands? <span class="spoiler">Yes! It's the ever-effervescent, <em>Glendatronix</em>!</span> </p> <p>Who lost their recording contract today? <span class="spoiler">The Zaxntines!</span></p> </div> <div id="celebs"> <h2 class="heading">Our Celebrities</h2> <p class="info"> We have an ever changing roster of newly chipped celebrities. But it can take as little as a week for the little critters to realise they've been tagged - so you have to be fast! </p> <table class="data"> <thead> <tr> <th>ID</th> <th>Name</th> <th>Occupation</th> <th>Approx. Location</th> <th>Price</th> </tr> </thead> <tbody> <tr> <td>203A</td> <td>Johny Stardust (<a href="../../images/johnny_400.jpg" class="lightbox">pic</a>)</td> <td>Front-man</td> <td>Los Angeles</td> <td>$39.95</td> </tr> <tr> <td>141B</td> <td>Beau Dandy (<a href="../../images/beau_400.jpg" class="lightbox">pic</a>)</td> <td>Singer</td> <td>New York</td> <td>$39.95</td> </tr> <tr> <td>2031</td> <td>Mo' Fat (<a href="../../images/mofat_400.jpg" class="lightbox">pic</a>)</td> <td>Producer</td> <td>New York</td> <td>$19.95</td> </tr> <tr> <td>007F</td> <td>Kellie Kelly (<a href="../../images/kellie_400.jpg" class="lightbox">pic</a>)</td> <td>Singer</td> <td>Omaha</td> <td>$11.95</td> </tr> <tr> <td>8A05</td> <td>Darth Fader (<a href="../../images/fader_400.jpg" class="lightbox">pic</a>)</td> <td>DJ</td> <td>London</td> <td>$19.95</td> </tr> <tr> <td>6636</td> <td>Glendatronix (<a href="../../images/glenda_400.jpg" class="lightbox">pic</a>)</td> <td>Keytarist</td> <td>London</td> <td>$39.95</td> </tr> </tbody> </table> </div> <div id="comment"> <h2>Leave a comment</h2> name:<br /> <input type="text" /><br/> comment:<br/> <textarea rows="5" cols="30"></textarea> </div> <h2>Fine Print</h2> <p id="fine_print"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </div> <div id="footer"> <p> © Copyright 2010 CelebriTracker Productions </p> </div> </div> </body> </html> |
ต้วอย่างที่ 2 เพิ่มรูปลงไป
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
$(document).ready(function(){ $('#menu > li > ul') .hide() .click(function(event){ event.stopPropagation(); }); $('#menu > li').toggle(function(){ $(this) .css('background-position','right -20px') //รูปมีรูปเดียวแต่เลือกที่จะแสดงว่าจะแสดงครึ่งบนครึ่งล่าง .find('ul').slideDown(); },function(){ $(this) .css('background-position','right top') .find('ul').slideUp(); }); }); |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
#menu { float: right; width:200px; } #menu, #menu ul{ list-style-type: none; padding: 0; margin: 0; } #menu li { cursor:pointer; background:#94C5EB url(arrows.png) no-repeat right top; border-bottom:1px solid #444; } #menu li a { text-decoration: none; } #menu>li>a { padding: 2px 10px; font-weight:bold; } #menu li li{ cursor:auto; border:0; padding:0 14px; background-color:#fff; background-image: none; } #disclaimer, #intro { width: 400px; } |
Recent Comments