Dec 31, 2009

Learn JQuery Here! How to Invoke JQuery?

Of late, JQuery seem to have more features than mere javascripting for web development. Go through this post and get to know how to invoke a simple jquery from a html page.
  • For using jquery, forst and foremost, you need to download the JQuery API (which is just a .js file available at http://docs.jquery.com/Downloading_jQuery#Current_Release).
  • Place this file jquery-1.3.2.js (current release when this post is being written) into a folder "test".
  • Write out a sample html page as shown below and place it in the same folder 'test'
<html>
<head>
<script language="javascript" src="jquery-1.3.2.js"></script>
<script language="javascript" src="sample.js"></script>
Heading of the Sample HTML Page
</head>
<title>
Title of the sample HTML Page
</title>
<body>
<p>
This is a sample HTML Page which invokes a jquery before page loads!
</body>
</html>
  • As per the above code, you have included the JQuery API into the html file using the following code
<script language="javascript" src="jquery-1.3.2.js"></script><br />
  • Now, your browser would understand that you would be using jquery for the html that is being rendered.
  • Further to this, you can have a separate js file by name sample.js, where you can write all teh jquery functions that would be invoked when the html page is rendered. For the sample, lets consider that teh sample.js has the following lines. Place this file too in the 'test' folder and invoke sample.html by opening it in IE or mozilla.
<br />$(document).ready(function() {<br />alert('invoked jquery');<br />   <br /> });<br />
  • In the above case, the $(document).ready(function() is equivalent to javascripts body onLoad() function. So when the html is loaded, the jquery is invoked.<br>The ready() function of jquery gets executed and the message is alerted.
  • So, now you have understood how to invoke jquery from a very simple html page!! You are set to go ahead! All the best!






Dec 30, 2009

Adding Tabs in HTML

Being into Java development for a while, I had a chance to work with tabs in html. One of the easiest ways to add tabs to a html page and link to url that I came across is as given below in the following code. I thought this might be useful for some one some day and hence this post.

<ul id="tabs">
<li class="active"><a href="#" title="tab1">Title Tab 1</a></li>
<li><a href="#" title="tab2">Title Tab 2</a></li>
</ul>

In the above code, just change the href to the link as in your
application. You are done! You can have a UI with a couple of tabs and
it would look great!All the best! If you really found this post useful,
please drop your comment in the comment form displayed below! Thanks

Testing SyntaxHighlighter


/*Test*/
public class Test
{
public static void main(String arg[])
{
System.out.println("Hello");
}