This walkthrough will instruct you how to create a new jQuery project and get started with your coding using the documented jQuery library supplied by Aptana.
- Access your projects.
- Click the Project tab to view your Aptana projects.
- Create a new jQuery project.
- From the Aptana File menu, select New > Project...
The New Project wizard opens. - On the New Project wizard, expand the Aptana Projects folder and select General Web Project.
- Click the Next button.
- In the Project name: field, type a name for your new project.
- Click the Next button.
- From the Select Ajax Libraries list, check the box next to jQuery. Click Next.
- On the Jaxer Support screen, click the Select All button if you want to automatically add Jaxer support to the project. Click Next.
- On the HTML Preview settings page, configure any special HTML preview settings for your project. Click Next.
- Click the Finish button.
Aptana creates a new jQuery project, which includes a lib folder for the jQuery library, a new jQuery-linked HTML template file named jquery_sample.htm, and a new Code Assist Profile.
The jquery_sample.htm file automatically opens in the HTML Editor. Because jquery_sample.htm is now the active file, your jQuery profile now becomes the active Profile in the Code Assist Profiles View.
- From the Aptana File menu, select New > Project...
- Explore the jQuery project.
- Just below the open jquery_sample.htm file in the Editor, click the Preview tab.
Aptana displays a preview of the Local Links example from jQuery. - Click the Source tab to return to the source view of jquery_sample.htm.
- In the Project View, expand your project folder to view the files in your jQuery project.
- In the Code Assist Profiles View, expand the jquery_sample.htm project folder to view the documented JQuery library files. <p>These are the files that will be available to you in Code Assist.
- Just below the open jquery_sample.htm file in the Editor, click the Preview tab.
- Preview Code Assist.
- In your jquery_sample.js file, just inside of the
$(document).ready(function(){...});
function, add the following line:$("p")
. - While entering that selector you should have seen documentation come up for how to use the
$
function. - Now insert your cursor just after "
$("p")
" and type.ad
and press ctrl+space.
Code Assist displays a list of jQuery functions that begin with the letters "ad" (e.g. add, addClass, etc). Use Code Assist to help you code.
- In your jquery_sample.js file, just inside of the
- Start coding.
- As you type, notice that Code Assist is now active for the jQuery objects and functions that you use.
- Press ctrl+space at any time to activate Code Assist.