| Module 3 |
|
| Example and explanations |
|
| Before we move to the example, there are some points which you must be known; there are some terms that should be known by you that can help you to understand the jQuery with ease. |
|
| What is ready() function- |
|
| This is the main function used in the jQquery, it is the heart of the jQuery, if you want to run any event the event (function) must be placed inside this function. This code is to load your functions if you do not add this code your jquery will be useless. |
|
| Basically this function work as- Any function which you want to be fire (process) on the web page it (event) must be present in that [$(document). ready ()] function. Through this $(document).ready () function you can fire/move your event as you want |
|
| The working of the function is start as soon as the DOM is loaded and before the page contents are loaded. |
|
| Syntax- |
|
$(document).ready(function() {
//all of your code goes here
});
|
|
| About the function : As you can see the function, it have a little bit confusing, may it makes little bit hard you to understand. |
|
| $ function- One of the critical concepts in any jQuery code is the so called ‘$’ function.‘$’ is actually an ‘alias’ for the ‘jQuery’ namespace. |
|
| $(document) - Activate jquery for object |
|
| *Note: some points must be taken in mind before using the above function. |
|
function(){
} |
|
| Resides in the ready(), so syntax will be little bit confusing at the last step- |
|
| }); - The curly brases for the inner function (function()) closed before the round bracket which is close for the ready function. |
|
| Frequently used in script |
|
| $(document):- This option will apply the jQuery library methods to a DOM object (in this case, the document object). |
|
| $(’#mydiv’):- This option will select every < div> that has the < id> attribute set to “mydiv”. |
|
| $(’p.first’):- This option will select all of the < p> tags with the class of “first”. |
|
| $(’p[title="Hi!!!"]‘):- This option will select from the page all < p> tags that have a title of “Hi!!!”. Techniques like this enable the use of much more semantically correct(X)HTML markup, while still facilitating the DOM scripting required to create complex interactions. |
|
| $(’p[title^="K"]‘):- This enables the selection of all of the < p> tags on the page that have a title that starts with the letter K. |
|
| Steps for installing and running a jquery- |
|
| So Now you are familier with jQuery, in this section you can lern the steps of processing the jquery , we will download and install jquery for developing our demo application, and on following the steps you can be run the jquery example shortly. |
|
| Step 1: Download jQueryv1.3: |
|
| < http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-.3.2.min.js&downloadBtn= > |
|
| you can also download the jquery form jquery.com site or the link given above. |
|
| Step 2: After downloading the jQuery,extect the files with in the same folder add it into your web application.You can rename the folder if you want (Its optional). |
|
| Basic Stucture: The basic structure of the jquery is as follows, on following this structuren you can run your jQuery script. |
|
< html>
< head>
< script type="text/JavaScript " src="jquery.js">< /script>
< script type="text/JavaScript ">
// Your JavaScript code
< /script>
< /head>
< body>
< !-- Your HTML content -->
< /body>
< /html>
|
|
| Note*: Make sure that the path(src= “jquery.js”) given buy you is correct and your jquery is in the right folder. |
|
| Examples and explanation: |
|
| First Example (JavaScript alert): Now we can move to our first example, we follow the basic structure explained above; every thing in the above structure should be cleared to you. |
|
| Example description: Let us take an example of the simple alert on click the link. In this example we have to display a pop up window on clicking a link. |
|
| Php Page Name: alert.php |
|
< html>
< head>
1. < script type="text/JavaScript " src=" jQuery/jquery.js">< /script>
2. < script type="text/JavaScript ">
3. $(document).ready(function() {
4. $("a").click(function() {
5. alert ("Welcome to jQuery!");
6. });
7.});
< /script>
< /head>
|
|
| Exaplanation: This is a simple and the first example of displaying the alert onclicking over the links. |
|
| Let us we explain the code writing above for this example, the line by line it can be explained to you, we do not consider the html tags as a line we only gives the explanation of script, not the HTML tags. |
|
| Line 1: Including the supporting jquery files in the script. |
|
| Line2: < script type="text/JavaScript "> It simply tells that JavaScript code are written here. |
|
| Line3: $(document).ready(function() { - |
|
| This is the main function from where all the event (Function) are handled. |
|
| We have explained this function above if you want to know more about this function, kindly see the above section. Basically working of the function is start as soon as the DOM is loaded and and before the page contents are loaded. |
|
| Line4: $("a").click(function() { - A important point of the jquery is the selector, the selection of appropriate selector makes your work more effective. |
|
| The line 4 have a selector $(“a”) which is called on a ‘click’ function, the $(a) is a selector, it basically calls all the anchor tags (links) used in the script. It selects all theelements, and $ it self a is an alias for the jquery class, $() construct a new juery object. |
|
| So that’s why we here give the example of two links, both having two anchor tag and both calls the same function on click. |
|
| Line 5: alert ("Welcome to jQuery alert!"); - This is a JavaScript arert for displaying the alert in the alert window. |
|
| Line6 & 7:- brases closed. |
|
| Line 8 & 9:- It is the HTML Code for Display Links. |
|
| Second Example (delete content): |
|
| In the second example, we take an example of removing a div, containing paragraph, there are several paragraphs are displayed here and on clicking the cross image placed on each paragraph it disappears. |
|
| Php Page Name: hideDiv.php |
|
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html xmlns="http://www.w3.org/1999/xhtml">
< head>
< meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
< title>Div Disappear< /title>
1.< script type="text/JavaScript " src=" jQuery/jquery.js">< /script>
2.< script type="text/JavaScript ">
3.$(document).ready(function(){
4.$(".divClass .deleteDiv").click(function(){
5.$(this).parents(".divClass").animate({ opacity: 'hide' }, "slow");
});
});
< /script>
6.< style type="text/css">
body {
margin: 10px auto;
width: 470px;
}
h3 {
margin: 0;
padding: 0 0 .10em;
}
p {
margin: 0;
padding: 0 0 .10em;
}
.divClass {
background: #339999;
padding: 10px 10px 10px;
position: relative;
border-top: solid 2px #003300;
}
.divClass .deleteDiv {
position: absolute;
top: 5px;
right: 5px;
cursor: pointer;
}
7.< /style>
< /head>
< body>
8.< div class="divClass">
9.< h3>First Div< /h3>
10.< p>This is the content place for div no.1< /p>
11.< img src="images/del.gif" alt="delete" class="deleteDiv" />
12.< /div>
< div class="divClass">
< h3>Second Div< /h3>
< p>This is the content place for div no. 2< /p>
< img src="images/del.gif" alt="delete" class="deleteDiv" />
< /div>
< div class="divClass">
< h3>Third Div 3< /h3>
< p>This is the content place for div no. 3< /p>
< img src="images/del.gif" alt="delete" class="deleteDiv" />
< /div>
< div class="divClass">
< h3>Fourth Div 2< /h3>
< p>This is the content place for div no. 4< /p>
< img src="images/del.gif" alt="delete" class="deleteDiv" />
< /div>
< /body>
< /html>
|
|
| Exapmle Explained: As you can see the code above, the code contains no new thing to explened, so only the core part of the example is explained here, I thing there is no need to to explain each and every thing. |
|
| Line1: .< script type="text/JavaScript " src="jquery.js">< /script> - Including the jQuery file. |
|
| Line2: .< script type="text/JavaScript "> - JavaScript starts for here |
|
| Line 3: $(document).ready(function(){ - event handler function (Explained above). |
|
| Line 4: $(".divClass .deleteDiv").click(function(){ - This function is works on calling ckick event applied on both the divs.(one is parent and the another is child). |
|
| Line 5: $(this).parents(".divClass").animate({ opacity: 'hide' }, "slow"); - This parent function is works for the parent function (.divClass) the function have two parameter one is for the visibility and the other is for the effects. The function tells about the div is hide the div and the process for hiding is slow. |
|
| Line 6- 7: < style type="text/css"> …< /style>- CSS is applied in the line. |
|
| Line 8: < div class="divClass"> - This is the div used as a parent element. |
|
| Line 9: < h3>First Div< /h3>- html heading tag. |
|
| Line 10: < p>This is the content place for div no.1< /p> - html parameter tag. |
|
| Line 11: < img src="images/del.gif" alt="delete" class="deleteDiv" />- This is for the image is used in the div. |
|
| Line 12: < /div> - Div is closed. |
|
| Example 3(Slide up Contents): This is a very simple example, in this example the contents are present in many divs burt resembles us to be present in different lines, and on clicking the content line the line goes disappears.(Actually the div of that line will be disappear on clicking the text.). |
|
| Php Page Name: clickon.php. |
|
< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
< html>
< head>
< script src="jQuery/jquery.js">< /script>
< script>
1. $(document).ready(function(){
2. $("p").click(function () {
3. $(this).slideUp();
});
4. $("p").hover(function () {
5. $(this).addClass("hilite");
6. }, function () {
7. $(this).removeClass("hilite");
});
});
< /script>
< style>
p { color:green; margin:13px; cursor:pointer; }
p.hilite { background:orange; }
< /style>
< /head>
< body>
8. < p>Click on this text message to disappear< /p>
9. < p>This is the second text message which is disappear on click< /p>
10. < p>This is the third text message which is disappear on click< /p>
11. < p>This is the Fourth text message which is disappear on click< /p>
< /body>
< /html>
|
|
| Explanation: If you understand the above two example then this example could not create much complication to understand. So below only kew points are consider for discussion. |
|
| Line1: $(document).ready(function(){ - event handler function (Explained above). |
|
| Line2: $("p").click(function () – click function calls on p selector |
|
| Line3: $(this).slideUp(); - A jQuery function |
|
| Line4: $("p").hover(function () {- hover function calls on the p selector. |
|
| Line5: $(this).addClass("hilite"); - Adding a C.S.S class hillite. |
|
| Line6: function () { |
|
| Line 7: $(this).removeClass("hilite");- Removing a C.S.S class hillite. When calls the function. |
|
| Line 8-11: < p>Click on this text message to disappear< /p> - HTML Paragraph tag containing the text messages.. |
|
| Example 4(Hide-Show content): This is an example to hide/show the div containing text, the basic work of the example is, there are list of divs(containing the headings. ex- index) when you click on the div. it will expand and show the content inside the div.And onclicking it again it will hide the contents. This is a good exmple for applying on the List. |
|
| Php Page name: showHideDiv.php |
|
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html xmlns="http://www.w3.org/1999/xhtml">
< head>
< meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
< title>Accordion 1< /title>
< script type="text/JavaScript " src="jQuery/jquery.js">< /script>
< script type="text/JavaScript ">
$(document).ready(function(){
$(".showHide h3:first").addClass("active");
$(".showHide p:not(:first)").hide();
$(".showHide h3").click(function(){
$(this).next("p").slideToggle("slow")
.siblings("p:visible").slideUp("slow");
$(this).toggleClass("active");
$(this).siblings("h3").removeClass("active");
});
});
< /script>
< style type="text/css">
body {
margin: 10px auto;
width: 570px;
font: 75%/120% Arial, Helvetica, sans-serif;
}
.showHide{
width: 480px;
border-bottom: solid 1px #c4c4c4;
}
.showHide h3 {
background: #e9e7e7 url(images/arrow-square.gif)
no-repeat right -51px; padding: 7px 15px;
margin: 0;
font: bold 120%/100% Arial, Helvetica, sans-serif;
border: solid 1px #c4c4c4;
border-bottom: none;
cursor: pointer;
}
.showHide h3:hover {
< /head>
< body>
< div class="showHide">
< h3>EBIZ.COM< /h3>
< p>Today in the world Computers and
Information Technology are widespread,
they are also a part of Modern Education System.
Computers are used in Schools, Colleges and Offices
for many applications such as Distaining Music, Watching Movies, Play Games,
Software Development or Searching the Internet for Information.
To see all of these requirements ,
In 8 june 2001,a new company EBIZ.COM came.< /p>
< h3>About Founder< /h3>
< p> Mr. Pawan Malhan is the founder of eBIZ.com.
He has started the company with his strong vision and continuous hard effort.
He has grown this company from scrap to strength and stature.
Today, eBIZ family is considerably big in size with uncountable associates.
Many of them are successful entrepreneurs. He is very much present in India.
He is an Indian citizen and also a son of soil. < p>
< h3>Our Mission< /h3>
< p>The mission of the company is to educate people of all ages,
in the use of computers,
help them to reap benefits from the vast powerhouse of information
– the Internet .To enable them to earn through the Internet by learning through our
e-Educational Packages and helping others to do the same.< /p>
< h3>Educational Packages < /h3>
< p> EBIZ offers the following Self Learning Educational Packages:
- Free Basic eBIZ Educational Package
- EBIZ Educational Package
- Advance eBIZ Educational Package.< /p>
< h3>Organization's Aim:< /h3>
< p> - It’s a Computer, Internet Learning and Earning Program by
ebiz.com pvt. Ltd.
- It provides Online and Offline Tutorial with a Web space Package to learn more
and more about the Internet and Website Development as well as
Computer Education.
- This is a Discounted, Easy and Affective Online / Offline
Tutorial to Computer Education Solution for all.
- Computer Languages, Project Development with
proper Project Documentation Development Process.< /p>
< /div>
< /body>
< /html>
|
|
| Example Explanation: |
|
| This is a simple example and commonly used example in the web application today, if you want to give a effective look to your web page, this is a better example to made your page dynamic look type. |
|
| The example is so simple and and only the main part(jQuery part) of this example wiil discussed here. |
|
| Code Explanation: |
|
$(document).ready(function(){
$(".showHide h3:first").addClass("active");
$(".showHide p:not(:first)").hide();
$(".showHide h3").click(function(){
$(this).next("p").slideToggle("slow")
.siblings("p:visible").slideUp("slow");
$(this).toggleClass("active");
$(this).siblings("h3").removeClass("active");
});
});
|
|
| Look at the code above, the Line $(document).ready(function(){- I think no need to explain. |
|
| $(".showHide h3:first").addClass("active");- This line tells about the function used in the script, it simply tells that the all heading (HTML, h3) containing CSS class show Hide, are to be active initially and the all ‘p’ containing the text messages are hide in initially. |
|
| $(".showHide h3").click(function(){ - This calls the click function,wich works onclick to the divs. |
|
| $(this).next("p").slideToggle("slow") – Here jquery functions are applied on the HTML < p> tag and the argument (slow) defines the process going to be slow. |
|
| siblings("p:visible").slideUp("slow"); - This jquery function is applicable on < p>, which works for slideup the < p>(para). |
|
| $(this).toggleClass("active"); - jQuery function. |
|
| Example 5(Slide headings): This is a good example for showing the headings on slide, mostly used today on the web pages, it is basically a slide panel showing with a ackick button on the top it expands on clicking the button. |
|
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html xmlns="http://www.w3.org/1999/xhtml">
< head>
< meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
< title>Simple Slide Panel< /title>
< script type="text/JavaScript " src="jQuery/jquery.js">< /script>
< script type="text/JavaScript ">
$(document).ready(function(){
$(".btn-slide").click(function(){
$("#panel").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
< /script>
< style type="text/css">
body {
margin: 0 auto;
padding: 0;
width: 570px;
font: 75%/120% Arial, Helvetica, sans-serif;
}
a:focus {
outline: none;
}
#panel {
background: #CCCCCC;
height: 200px;
display: none;
}
.slide {
margin: 0;
padding: 0;
border-top: solid 15px #CC6633;
background: url(images/btn-slide.gif) no-repeat center top;
}
.btn-slide {
background: url(images/white-arrow.gif) no-repeat right -50px;
text-align: center;
width: 144px;
height: 31px;
padding: 10px 10px 0 0;
margin: 0 auto;
display: block;
font: bold 120%/100% Arial, Helvetica, sans-serif;
color: #fff;
text-decoration: none;
}
.active {
background-position: right 12px;
}
< /style>
< /head>
< body>
< div id="panel">
< !-- you can put content here -->
< div> < /div>< div> < /div>
< b>eBIZ is very much a social service system committed for spreading the
computer education among the downtrodden children and make them
financially self-sufficient.
People become happy and find a solution to their financial problem
after attending the conventions.
They become enthusiastic. No unruly act is committed.
This is concocted and exaggerated information about eBIZ.< /b>
< /div>
< p class="slide">< a href="#" class="btn-slide">Click for Slide< /a>< /p>
< /body>
< /html>
|
|
|
|
|
|
| Module 4: Advance JQuery |
|
| Now in this section we will explain you the example and the code explanation about the jquery, in this section we will try to give some advance jquery examples, like jquery with database, jquery with ajax and etc. |
|
| Example 1: Heading Hover: This is the Example of the Heading hover which gives an information on mousehover the heading (image). In this examples there are three headings, each heading having some information and on mousehover of each heading show the related information of the headings. |
|
| Php Page Name: headingHover.php |
|
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html xmlns="http://www.w3.org/1999/xhtml">
< head>
< meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
< title>Animated Menu Hover 1< /title>
< script type="text/JavaScript " src="jQuery/jquery.js">< /script>
< script type="text/JavaScript ">
$(document).ready(function(){
1. $(".menu a").hover(function() {
2. $(this).next("em").animate({opacity: "show", top: "-75"}, "slow");
3. }, function() {
4. $(this).next("em").animate({opacity: "hide", top: "-85"}, "fast");
});
});
< /script>
5. < style type="text/css">
body {
margin: 10px auto;
width: 570px;
font: 75%/120% Arial, Helvetica, sans-serif;
}
.menu {
margin: 100px 0 0;
padding: 0;
list-style: none;
}
.menu li {
padding: 0;
margin: 0 2px;
float: left;
position: relative;
text-align: center;
}
.menu a {
padding: 14px 10px;
display: block;
color: #000000;
width: 144px;
text-decoration: none;
font-weight: bold;
background: url(images/button.gif) no-repeat center center;
}
.menu li em {
background: url(images/hover.png) no-repeat;
width: 180px;
height: 45px;
position: absolute;
top: -85px;
left: -15px;
text-align: center;
padding: 20px 12px 10px;
font-style: normal;
z-index: 2;
display: none;
}
6. < /style>
< /head>
< body>
7.< ul class="menu">
< li>
< a href="http://www.ebizelindia.com">Heading1< /a>
< em>This contains some information about the Heading1< /em>
< /li>
< li>
< a href="http://www.ebizelindia.com">Heading2< /a>
< em>This contains some information about the Heading2< /em>
< /li>
< li>
< a href="http://www.ebizelindiao.com">Heading3< /a>
< em>This contains some information about the Heading3< /em>
< /li>
8.< /ul>
< /body>
< /html>
|
|
| Explanation: In the above example, script uses some code which is described below. |
|
| 1. $(".menu a").hover(function() { // This is the hover function which acts on mousehover . |
|
| 2. (this).next("em").animate({opacity: "show", top: "-75"}, "slow"); // animate is an another function having which works on mousehover , it have some argument which defines the appearance and the position of the animated block. |
|
| 3. }, function() { |
|
| 4. $(this).next("em").animate({opacity: "hide", top: "-85"}, "fast"); // same as above but acts for hide headings. }); }); |
|
| Example 2 (Searching Text) Php Page Name: jquery_search.php: |
|
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html xmlns="http://www.w3.org/1999/xhtml">
< head>
< meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
< title>test< /title>
< script type="text/JavaScript " language=
"JavaScript " src="jQuery/jquery.js">< /script>
< script type="text/JavaScript " language=
"JavaScript " src="jQuery/jquery.quicksearch.js">< /script>
< script type="text/JavaScript " charset="utf-8">
$(document).ready(function () {
$('table#searchoption tbody tr').quicksearch({
stripeRowClass: ['odd', 'even'],
position: 'before',
attached: '#searchoption',
labelText: 'Search ',
loaderImg: 'images/loading.gif'
});
$('#checkAllAuto').click( function(){ $("INPUT[type='checkbox']").
attr('checked', $('#checkAllAuto').is(':checked')); } )
});
< /script>
< /head>
< body>
< form name="frm" action="" method="post">
< table border="0" id="searchoption" align="left"
width="400" cellpadding="2" cellspacing="2">
< tr>
< td> < /td>
< /tr>
< tr>
< td>
< table border="1" cellpadding="0" cellspacing="0" width="50%">
< tr>
< td>kamal< /td>
< /tr>
< tr>
< td>Aman< /td>
< /tr>
< tr>
< td>Tarun< /td>
< /tr>
< tr>
< td>Dhirendra < /td>
< /tr>
< /table>
< /td>
< /tr>
< /table>
< /form>
< /body>
< /html>
|
|
| Searching text is a good example for helping in searching of the name, address, and other details pf a user with simple typing the text which you want to be search. |
|
| If you have some text or data in the database or hard coded the text, there is a text box called search box which search your text enter in the search box. |
|
| Code explanation: 2 files are included in the script, one of them have the search script, called jquery. Quick search is (and one is jquery, js the normal jquery file ). This file having the jquery search concept so this is better to include this file before using the jquery search script. |
|
$(document).ready(function () {
$('table#searchoption tbody tr').quicksearch({
stripeRowClass: ['odd', 'even'],
position: 'before',
attached: '#searchoption',
labelText: 'Search ',
loaderImg: 'images/loading.gif'
});
$('#checkAllAuto').click( function(){ $("INPUT[type='checkbox']").
attr('checked', $('#checkAllAuto').is(':checked')); } )
});
|
|
| The above script uses in the search example, this is the script for the search option. If you can see the hml part, it have an option “id= search option” in the table. Which is for applying the serch script on the table data?/td> |
|
| Example3 (mages Magnifier) |
|
| Php Page Name: clickImages.php |
|
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//
EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html xmlns="http://www.w3.org/1999/xhtml">
< head>
< meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
< title>Image Changing< /title>
< script type="text/JavaScript " src="jQuery/jquery.js">< /script>
< script type="text/JavaScript ">
$(document).ready(function(){
$("h2").append('< em>< /em>')
$(".thumbs a").click(function(){
var largePath = $(this).attr("href");
var largeAlt = $(this).attr("title");
$("#largeImg").attr({ src: largePath, alt: largeAlt });
$("h2 em").php(" (" + largeAlt + ")"); return false;
});
});
< /script>
< style type="text/css">
body {
margin: 20px auto;
padding: 0;
width: 580px;
font: 75%/120% Arial, Helvetica, sans-serif;
}
h2 {
font: bold 190%/100% Arial, Helvetica, sans-serif;
margin: 0 0 .2em;
}
h2 em {
font: normal 80%/100% Arial, Helvetica, sans-serif;
color: #999999;
}
#largeImg {
border: solid 1px #ccc;
width: 550px;
height: 400px;
padding: 5px;
}
.thumbs img {
border: solid 1px #ccc;
width: 100px;
height: 100px;
padding: 4px;
}
.thumbs img:hover {
border-color: #FF9900;
}
< /style>
< /head>
< body>
< h2>Illustrations< /h2>
< p>< img id="largeImg" src="images/img6.jpg" alt="Large image" />< /p>
< p class="thumbs">
< a href="images/img1.jpg" title="Image 2">< img src="images/img1-thumb.jpg" />< /a>
< a href="images/img2.jpg" title="Image 3">< img src="images/img2-thumb.jpg" />< /a>
< a href="images/img3.jpg" title="Image 5">< img src="images/img3-thumb.jpg" />< /a>
< a href="images/img4.jpg" title="Image 6">< img src="images/img4-thumb.jpg" />< /a>
< a href="images/img5.jpg" title="Image 6">< img src="images/img5-thumb.jpg" />< /a>
< /p>
< /body>
< /html>
|
|
| Explanation: This is an example of the image display from thumbnail to large form on sim[ple click to the thumbnails, a user seens many thumbnails when he clicks on the thumb nail the large form of that picture will be appear and while on click on the other image the next pics, is appears. |
|
| Example 4: (Search country with suggestions) |
|
| Php Page Name: search Country.php |
|
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html xmlns="http://www.w3.org/1999/xhtml">
< head>
< meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
< title>AUto suggest country< /title>
< script type="text/JavaScript " src="jQuery/jquery.js">< /script>
< script type="text/JavaScript ">
function findCountry(inputString) {
if(inputString.length == 0) { //Hide the suggestion box.
$('#suggestions').hide();
} else {
$.post("rpc.php", {queryString: ""+inputString+""}, function(data){
if(data.length >0) {
$('#suggestions').show();
$('#autoSuggestionsList').php(data);
}
});
}
} // findCountry
function searchOption(thisValue) {
$('#inputString').val(thisValue);
setTimeout("$('#suggestions').hide();", 200);
}
< /script>
< style type="text/css">
body {
font-family: verdana;
font-size: 10px;
color: #000;
}
h3 {
margin: 0px;
padding: 0px;
}
.suggestionsBox {
position: relative;
left: 30px;
margin: 10px 0px 0px 0px;
width: 200px;
background-color:#5FA2C9;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border: 3px solid #0099CC;
color: #fff;
}
.suggestionList {
margin: 0px;
padding: 0px;
}
.suggestionList li {
margin: 0px 0px 3px 0px;
padding: 3px;
cursor: pointer;
}
.suggestionList li:hover {
background-color: #C55E18;
}
< /style>
< /head>
< body>
< div>
< form name="searchCountry">
< div>
Country Name:
< br />
< input type="text" size="30" value="" id="inputString"
onkeyup="findCountry(this.value);" onblur="searchOption();" />
< /div>
< div class="suggestionsBox" id="suggestions" style="display: none;">
< img src="images/upArrow.png" style="position:
relative; top: -12px; left: 30px;" alt="upArrow" />
< div class="suggestionList" id="autoSuggestionsList">
< /div>
< /div>
< /form>
< /div>
< /body>
< /html>
|
|
| Secede Php Page With this Page is: |
|
< ?php
$db = mysql_connect('localhost', 'root', '');
## Create Database connection
if(!$db) {
echo 'ERROR: Could not connect database.';
## Show error If database not connected
} else {
mysql_select_db('autocomplete', $db);
## Select the Database
if(isset($_POST['queryString'])) {
$queryString = mysql_real_escape_string
($_POST['queryString']);
if(strlen($queryString) >0)
{ ## Checks the length of posted queryString greater than 0.
$query = "SELECT value FROM countries
WHERE value LIKE '$queryString%' LIMIT 10";
## Mysql Query $result = mysql_query($query);
if($result) {
while ($rs = mysql_fetch_assoc($result)) {
echo '< li onClick="fill(\''.$rs['value'].'\');">'.$rs['value'].'< /li>';
}
} else {
echo 'ERROR: There was a problem with the query.';
}
} else {
// Don't write anything.
} // There is a queryString.
} else {
echo 'No direct access!';
}
}
?>
|
|
| Explanation: Country search is an example to search your country while typing initials of the country, when a user types the initial letter of the any country, the scripts shows all the country starts with the initial letter typed in the text box. User can choose the desired country. This actually helps the user to find the country instantaneously. |
|
| This is the example of the jquery using the data from the database, this script also includes an another file called rpm, which have the php coding. |
|
| Example 5: (Demo Box) |
|
| Php Page Name: demo Box.php |
|
| This is an example of a jquery box which appears, when we click on the button. The box comes on the same page without refreshing the page , basically box having an another page data which appears in the box without reloading the page , it is very useful script for creating a form, displaying a message and any thing which you want to come on the same page where the action is fired. |
|
| It includes an additional file called facebox.js which has the function or script related to the box. it also include an css called facebox.css, having the css related to the face box. |
|
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html xmlns="http://www.w3.org/1999/xhtml">
< head>
< meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
< title>Demo box< /title>
< link href="css/facebox.css" rel="stylesheet" type="text/css" />
< script type="text/JavaScript " language="JavaScript "
src="jQuery/jquery.js">< /script>
< script type="text/JavaScript " language="JavaScript " src="jQuery/facebox.js">< /script>
< script type="text/JavaScript " charset="utf-8">
$(document).ready(function () {
$('a[rel*=ebizbox]').facebox({loadingImage: 'images/jquery/loading.gif'
, closeImage: 'images/jquery/closelabel.gif', overlay: false});
});
< /script>
< /head>
< body>
< center>
< form name="mainfrm" method="post" action="demoBox.php">
< table width="100%" valign="top" border="0"
cellspacing="0" cellpadding="0" bgcolor="#ffffff">
< tr>
< td align="left" valign="top" class="navleft-box"> < /td>
< /tr>
< tr>
< td width="100" align="left">< lable>< b>< u>click to view comment< /u>:
< /b>< /lable> < a href="addInfo.php" rel="ebizbox">
< img src="images/add2.gif" align="absmiddle"
border="0" alt="Add Category">< /a>< /td>
< /tr>
< /table>
< /form>
< /center>
< /body>
< /html>
|
|
| Second Php Page of this script: |
|
| Php Page Name: addInfo.php |
|
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html xmlns="http://www.w3.org/1999/xhtml">
< head>
< meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
< title>Demo Box< /title>
< /head>
< body>
< table width="100%" border="0" align="center" cellpadding="3" cellspacing="3">
< tr>
< td align="left">< b>Hi This is the demo version of a box which is like
a pop up box, you can create a form in this as box or to use it as a view page,
when a user clicks on the button, this box will open and on pressing close button
it will close the box.< /b>
< /td>
< /tr>
< /table>
< /body>
< /html>
|
|
| Code explanation: The example having the simple script it all the functional are in the included file called facebox.js, and the code which is new for you is describe here: |
|
| This is jQuery box code which is used I the script for calling the box called facebox as the name ebizbox. |
|
| $('a[rel*=ebizbox]').facebox({loading Image: 'images/jquery/loading.gif', closeImage: 'images/jquery/closelabel.gif', overlay: false}); |
|
| This ebixbox called at the button where you want as ; ;< a href="addInfo.php" rel="ebizbox"> < img src="images/add2.gif" align="absmiddle" border="0" alt="Add Category">< /a> so the box is now applicable to this button, as you click on that button the box opens, you can try this with the demo. |
|
|
|
|
|
|
|
0 comments: