Scribd
Upload
2K views

Installing JQuery

The document provides instructions for installing JQuery and using it with NetBeans. It describes how to download JQuery and JQuery UI files from their websites and save them locally. It then explains how to create a PHP project in NetBeans, copy the files over, and add sample code to test that JQuery is functioning properly. Alternative instructions are provided for using JQuery without XAMPP. The document also discusses replacing local JQuery/UI files with links to CDN versions.

Uploaded by

Vinay Hegde
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
2K views

Installing JQuery

The document provides instructions for installing JQuery and using it with NetBeans. It describes how to download JQuery and JQuery UI files from their websites and save them locally. It then explains how to create a PHP project in NetBeans, copy the files over, and add sample code to test that JQuery is functioning properly. Alternative instructions are provided for using JQuery without XAMPP. The document also discusses replacing local JQuery/UI files with links to CDN versions.

Uploaded by

Vinay Hegde
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

Installing JQuery Installing JQuery under XAMPP and NetBeans 1. 2. 3. 4. 5. 6. 7.

Make sure you have installed NetBeans and XAMPP on your system. Go to your desktop and create a folder named JS and another folder named CSS. Go to the site www.jquery.com and choose the Development Code version of JQuery. Click the Download button. You will see a page of JavaScript code. Right click in this page and save it in the just creates JS folder on your desktop. Click Back on your browser until you are back at the www.jquery.com page. Click the radio button for the Production Code version of JQuery, click Download and save this file in the JS folder. (The production code will look odd since it is compressed.) 8. Return to the main page of jquery and click the UI link at the top of the page to go to the page jqueryui.com page. 9. Click the link on the text Stable (1.8.10: jQuery 1.3.2+) to download a zip file. 10. Open this zip file and copy the contents of the zip files embedded CSS folder into the CSS folder on the Desktop and copy the contents of the zip files embedded JS folder into the just created JS folder on the desktop. Installing JQuery without XAMPP 1. Create a folder that will hold your JavaScript programs and in this folder create a CSS folder and a JS folder. 2. Using the steps listed above, download and save the Development and Production versions of JQuery into the JS folder. 3. Download the stable version of JQueryUI, unzip the file, and copy the contents of the CSS and the JS folders inside the zip file into your JavaScript folder. Using JQuery with NetBeans To use JQuery with NetBeans you can either create a PHP project and run JQuery through XAMPP or you can just save JavaScript files in your JavaScript folder directly. To Use a PHP Project: 1. 2. 3. 4. 5. Start NetBeans and create a new Project. Choose PHP and then choose PHP Application. Name the project jsproject1 Choose the Sources folder and place it under Documents\netbeansprojects\jsproject1 Click to put the NetBeans metadata in the Documents\netbeansproject\jsproject1 folder (under User). The dialog box looks like:

6. Click Next. 7. Set the project URL to http://localhost/jsproject1 8. Click the copy files from sources folder to another location option and specify the location c:\xampp\htdocs\jsproject1 9. Click Next and then click Finish. You must next make a copy of the JS and CSS folders from the desktop and paste them into the Project Source Files location. This will enable autocomplete. 10. On your desktop right click the JS folder and choose Copy. 11. In the NetBeans project window, right click the Source Files folder and choose Paste. This creates a folder named JS. 12. Perform these same steps for the CSS folder. You will next test your installation. 13. Make sure Apache is running from the XAMPP control panel and that you have created the JS and the CSS folders directly under HTDOCS. 14. Make sure you are copying your NetBeans files into the folder named jsproject1 which is located in the HTDOCS folder. 15. Right click the JSProject icon in the project window and choose New File. 16. Choose the HTML File option and name this file testjquery and click OK.

Enter the following HTML code: <!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link type="text/css" rel="stylesheet" href="http://jqueryui.com/themes/base/ui.all.css" /> <script type="text/javascript" src="http://jqueryui.com/js/jquery.js"></script> <script type="text/javascript" src="js/jquery-1.5.1.js"></script> <link type="text/css" href="css/smoothness/jquery-ui-1.8.10.custom.css" rel="Stylesheet" /> <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.8.10.custom.min.js"></script> <script> $(document).ready( function(){ $("h1").click(function(){ alert("Hello"); }); $("#date").datepicker(); $('#switcher').themeswitcher(); }); </script> </head> <body> <div>TODO write content</div> <h1>Some Text</h1> <form name="form1" method="post" action="abc.php"> Enter Date: <input type="text" name="date" id="date" /> </form> <br /> <script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"> </script> <div id="switcher"></div> </body> </html>

17. Save this file. 18. In the Project window right click this file and choose Run. The Browser opens and displays the file under LOCALHOST.

19. Click the Some Text string and you see an Alert box. 20. Click in the Text field and you see a pop-up Date picker.

To create a Project without XAMPP 1. Install NetBeans. 2. Download the JQuery Production and Development files from www.jquery.com and save these in a folder named JS on your desktop. 3. Download the stable version of JQueryUI from the site www.jqueryui.com as a zip file. 4. Open this zip file and copy the enclosed CSS folder to your desktop and the contents of the enclosed JS file to the JS file on your desktop. 5. Create a new PHP Application project named Jqueryp2 and put it in the default sources folder location under \DOCUMENTS\NetBeansProjects\jqueryp2 6. For RunAs choose Local Web Site (but you will not be using the web browser) and dont the Copy Files option. 7. Copy and paste the JS and CSS folders from your desktop to the Projects Source files folder. 8. Create a new HTML file under your Projects Source Folder and name it jq2 Insert the following code into this file: <!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link type="text/css" rel="stylesheet" href="http://jqueryui.com/themes/base/ui.all.css" /> <script type="text/javascript" src="http://jqueryui.com/js/jquery.js"></script> <script type="text/javascript" src="js/jquery-1.5.1.js"></script> <link type="text/css" href="css/smoothness/jquery-ui-1.8.10.custom.css" rel="Stylesheet" /> <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.8.10.custom.min.js"></script> <script> $(document).ready( function(){ $("h1").click(function(){ alert("Hello"); }); $("#date").datepicker(); $('#switcher').themeswitcher(); }); </script> </head>

<body> <div>TODO write content</div> <h1>Some Text</h1> <form name="form1" method="post" action="abc.php"> Enter Date: <input type="text" name="date" id="date" /> </form> <br /> <script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"> </script> <div id="switcher"></div> </body> </html>

9. Right click the HTML file in the Project widow and choose View rather than Run. Replacing your local JQuery and JQueryUI references with CDN references Rather than include local copies of the JQuery and JQuery UI files you can use network cached versions. These are stored by Google and Microsoft on their network servers. The Google version requires that you register for a free Developer API code, but the Microsoft version does not. To add your own versions you would remove or comment out the following lines of code: <script type="text/javascript" src="js/jquery-1.5.1.js"></script> <link type="text/css" href="css/smoothness/jquery-ui-1.8.10.custom.css" rel="Stylesheet" /> <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.8.10.custom.min.js"></script>

Add the following lines of code: <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.js" type="text/javascript"></script> <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/jquery-ui.js"></script> <link type="text/css" rel="Stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/redmond/jqueryui.css" />

When adding external links you must do so in a very particular way. For example, the sample page, using external links, looks like: <!DOCTYPE html> <html> <head> <title></title>

<link type="text/css" rel="stylesheet" href="http://jqueryui.com/themes/base/ui.all.css" /> <link type="text/css" rel="Stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/redmond/jqueryui.css" /> </head> <body> <div>TODO write content</div> <h1>Some Text</h1> <form name="form1" method="post" action="abc.php"> Enter Date: <input type="text" name="date" id="date" /> </form> <br /> <div id="switcher"></div> <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.js" ></script> <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/jquery-ui.js"></script> <script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script> <script> $(document).ready( function(){ $("h1").click(function(){ alert("Hello"); }); $("#date").datepicker(); $('#switcher').themeswitcher(); }); </script> </body> </html>

The external <link> tags are added in the head part of the page. After the page content, all the <script> tags are included. Notice the order these <script> tags are being included. They are being added before the page level <script> information. The jquery-1.5.1.js is added before the jquery-ui.js script and the themeswitchertool is added last of all.

You might also like