INTERACTIVE WEB WITH JQUERY

Web development has experienced a rapid development, the website becomes more interactive, are you ready to follow it?

As the fashion world that always switch mode, the display continues to update the website with a new face. Although there must be a significant change, but can be engaging and make another website to follow.



For example, look at the website-the website of the leading search functionality, including an amazon.com, wikipedia.org, or search engines such as google.com, yahoo.com, and so on. What similarity? In fact everything is using autosuggest (often called AutoComplete) may suggest an alternative keyword for visitors.

Autosuggest only one example of how websites appear more rich improvisation, friendly and interactive. Behind all that, there is a code that is quite complex. But if you understand the jQuery code, complex code can be display simple.

Overview of jQuery

Until this article was written, the jQuery address in http://jquery.com turn has been the age of 3 years. However, jQuery is not actually a new thing to see if all that is therein, because a function written in JavaScript, and JavaScript itself was introduced by Netscape in 1995.

jQuery offers modern features that is ready to use, although the idea is to create a simple JavaScript library, jQuery was able to attract large companies to the jQuery in bundling products. Nokia will integrate jQuery into a web platform Run-Time and Microsoft to adopt jQuery in Visual Studio

In addition, Google also provides a host for the special jQuery to be able to directly access the free, jQuery also received support from various parties that make a variety of additional plugins.

Using jQuery it is easy, you need is a download file on the jQuery http://jquery.com, the latest version, this time it is up to version 1.3.2 with the name of the file jquery-1.3.2.min.js. Size is also small enough to a library of powerful, only about 56 kilobytes, and the only reason that you need. JavaScript file has functions Ajax, Dom (Document Object Mode), Event, and the various effects that are prepared by the web developer.

For ease of use, you can change the file jquery-1.3.2.min.js become jquery.js it, and paste them on the program code (HTML / PHP / ASP and so on) as follows:



Path lib / jQuery.js shows the location of the file jQuery.js. Because jQuery is a JavaScript library, especially the web developer just need to deepen knowledge of JavaScript, and jQuery also can be used by web designers that deepens CSS (Cascading Style Sheets) language does not have a program that new, but many new things that can be created on your website.

For web developers who will use the new jQuery, it's easier to understand the principles basically see the first example the case of using the HTML / CSS is static, and therefore does not need to be with the server side scripting such as PHP and so on, also do not need to do database operations.

Once you understand how jQuery works, you can easily implementing into a dynamic website

Some examples below will introduce you to the jQuery code in HTML / CSS is simple, and then can easily be developed based on the needs of your website.

CSS Controls

With jQuery, you can control the CSS used. First look at the following simple code, in it you can see there is HTML code, CSS and JavaScript / jQuery.



If you save this code in an HTML file (like index.html) and run in a browser, will be in a different view. Now let us study how collaboration jQuery and CSS can produce this effect. Note the following JavaScript:



Command $ (document). Ready (function () is a command to run the code below when the document is ready, or are ready with the event. If the documents have been completed in the load, the line $ ( "p: last"). AddClass ( " selected highlight "); will run. This code is called to add class and highlights the selected element p: last. That is, class-the class will be executed for the new tag

last. Next, the following code defines a CSS class with a defined above:



Tags

last in the index.html is

Rocks!

, So any posts will appear in accordance with the class that has been defined. From this example, you certainly have started to understand the flow of jQuery. New things that you may find is the use of symbols such as $ on:

$ (Document). ready (function ()

$ Alias is a symbol of the jQuery namespace, which can also be written:

jQuery (document). ready (function ()

Therefore, you will find the use of the symbol $ in use jQuery

The Elegant Read More

Sure you visit the website or blog that has the article. Because, in general, the article consists of several paragraphs, it will usually be shown first paragraph beginning, and the key is available / link as "read more" if you click on will lead you to the article or the entire paragraph, complete with the process and call the page refresh other.

In the example of this, we will create more articles that may appear on the same page, without a refresh, even accompanied by animation. Do not imagine a complex code, just like this:




Full paragraph will be displayed if you click the button "Read More" nearly no new things here, unless the use of show and hide function, the parameters have the time to animation. For example the line:



Slide Panel

Previously only a few alternatives if you want to divide a page into several separate parts, for example, by using the table or frame, and everything seemed rigid.

With jQuery, you can create a slide bar with easy, and certainly does not seem as rigid panel is able to move with a smooth animation. Note the following code:




If you already understand the previous examples, you certainly do not have difficulties to understand this example slide panel. The only new function or command is located on the line $ ( "# panel"). SlideToggle ( "slow") that call the function slideToggle provided jQuery

Ajax with jQuery

One of the purposes is to support jQuery AJAX techniques (Asynchronous JavaScript and XML) is a web application to take data from the server and work in the background so it does not display the web page subject. In this case, jQuery generally used by more designers than programmers, as Ajax to the server, which means the server must use the side scripting / programming

Using the jQuery Ajax in the nick does not differ from the examples already described, there is a difference only PHP files (or other server side scripting) Here is an example of Ajax to display a quote at random, there is a index.html file as follows:




Note on the line $ ( "# quote p"). Load ( "quote.php) where the jQuery element id =" quote "that contain content that is produced by quote.php.

Quote.php itself contains a simple PHP code as follows:



Function quote.php makes only a number, where number is used as the array index variable $ quote, which is then displayed. Of course, you can make further modifications, for example, take the content from the database.

Click and Drag

The past may not be a website page can be very interactive so that the withdrawal has the ability desktop applications, for example, have the ability to click and drag, resize, progress bars, and various effects and smooth animation.

Many developed based jQuery plugins and libraries that have different features and can be integrated on your website. One of them is the User Interface library jQuery or jQuery UI in the address http://jqueryui.com

Write Less, Do More

JQuery is not excessive if it has the slogan "Write Less, Do More" shows a lot of things we can do with only a few of the writing code. If JavaScript is considered only the expertise of web developers, but with jQuery has a way of writing JavaScript easier, create a web designer can use jQuery to need.