Adding Functionality with jQuery and PHP Using Expression Web 4
- 12/29/2010
- Using jQuery in Expression Web
- Using the Expression Web PHP Tools
- Key Points
After completing this chapter, you will be able to:
Use jQuery in Expression Web
Use the Expression Web PHP tools
Microsoft Expression Web 4 provides support not only for Microsoft technologies, but also for other popular Web development tools. This chapter shows you how to take advantage of the jQuery JavaScript library and the PHP Web development language using Expression Web 4.
Using jQuery in Expression Web
jQuery is a lightweight JavaScript library that makes authoring JavaScript faster and easier than ever. It’s currently very popular among designers and developers alike, because it’s easy to use, flexible, and has a plug-in ecosystem that lets you add additional functionality.
With jQuery, you can write simplified JavaScript that’s compatible with multiple browsers, letting you create functionality more easily than ever before.
Because jQuery is a framework library it’s possible for developers to create “plug-ins” for the framework, which add specialized functionality that extends jQuery for specific needs. Many plug-ins have already been written; you can find a list of them at http://plugins.jquery.com/. After installing a plug-in, you can use its features on your pages with little to no coding.
In this exercise, you will write some jQuery-compatible JavaScript and use a jQuery plug-in.
Link a page to a jQuery library, write a simple function, and use a jQuery plug-in
Scroll the Code pane of Chapter8.html to the <head> section and set your cursor just before the closing <!-- #EndEditable --> in the “doctitle” editable region and then press Enter on your keyboard to break to a new line.
The first thing you need to do when using jQuery is link to the library itself; that’s what you will do in the next few steps.
With your cursor on a new line in the editable region within the page’s <head> section, begin to type <script… and the Expression Web Intellisense will appear. Each time the Intellisense pop-up displays the code fragment you want, press Enter on your keyboard. When complete, you will have a line that looks like this:
<script type="text/javascript" language="javascript" src="files/jquery-1.4.2.min. js"></script>
In this example, you are linking to the jQuery file that resides physically in the SampleSite’s folder structure—specifically, the site’s /files folder. Using a local copy of the jQuery library as in this example is just one option for linking to the library; many designers link to the jQuery library via an external URL. Both Google and Microsoft host this library, and anyone can link to it freely. The following example script tags would link a page to the Google or Microsoft hosted jQuery library:
<script language="javascript" type="text/javascript" src= "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script> <script language="javascript" type="text/javascript" src= "http://ajax.Microsoft.com/ajax/jQuery/jquery-1.3.2.min.js"> </script>
The next step in this jQuery example is to write actual script into the page. Press Enter on your keyboard to create a new line beneath the script tag that you inserted. Enter the following code:
<script type="text/javascript"> $(document).ready(function() { $("a[href^='http:']:not([href*='" + window.location.host + "'])").each(function() { $(this).attr("target", "_blank"); }) }); </script>
If you don’t want to type that entire block of code, you can continue this exercise by copying and pasting from within the comment tags in the file /files/external_blank.js, or simply link to the file in the same way that you did the jQuery library:
<script language="javascript" type="text/javascript" src=" files/external_blank.js"></script>
Click Save, and then click Preview on the Common toolbar to open your page in a browser. Scroll down to the jQuery Resources list.
Click a few of the hyperlinks in the list. Notice that they open in a new window. Return to the browser view of Chapter8.html and click one of the page links on the upper-left navigation area of the page. Notice that the internal links now open within the current browser window. The JavaScript you added works with the jQuery library to read all the hyperlinks in the page, and if they contain an HREF attribute that begins with “http,” gives them a _blank target attribute. The result: All the external links open in a new window, and all the internal links open conventionally.
Close the browser window and return to Expression Web. Click one of the jQuery Resource links in the Design pane and notice the Code pane. There is no target=“_blank” attribute in any of the links in the list, which is how you would normally make hyperlinks open in a new window.
)
In the next exercise, you will link to a jQuery plug-in, which is a pre-written set of functions designed and tested to work with the jQuery Library. You’ll use this particular plug-in to validate the input fields of the form you created in Chapter 7, “Adding Client-Side Functionality.”
Link to a jQuery plug-in and use it to validate user input
Set your cursor in the <head> section of the page where you’ve been working and press Enter on your keyboard to insert a new line after your most recent script block.
Using the Expression Web Intellisense pop-up as you did previously, enter the following script tag, which links to the jQuery plug-in:
<script type="text/javascript" src=" files/validateMyForm/jquery. validateMyForm.1.1.js"></script>
To use this plug-in, you must link to it just as you linked to the jQuery library. This plug-in is called Validate My Form. You can find a link to it beneath the Resources heading in the Chapter8.html file.
In the Code pane, press Enter on your keyboard to start a new line beneath your link to the form validation plug-in and then enter the following script tag and style sheet link:
<script type="text/javascript"> <!-- $(document).ready(function(){ $("#form1").validateMyForm(); }); --> </script> <link href="files/validateMyForm/css/plugin.css" rel="stylesheet" type="text/css" />Scroll the Design pane of your page to the Resources heading in the jQuery segment. Set your cursor in the Design pane at the end of the heading text and press Enter on your keyboard to create a new paragraph.
In the Folder List panel, expand the site’s /files folder and then double-click Chapter7Form.txt to open it in your workspace. Set your cursor in the code of that file and press Ctrl+A to select all of the text, and then Ctrl+C to copy it all to your Clipboard. Close Chapter7Form.txt and return to Chapter8.html.
Set your cursor inside of the new paragraph tag in the Design pane and then click the <p> tab on the Quick Tag Selector to select the entire tag. Right-click the highlighted code in the Code pane, and in the Context menu, click Paste. Then click Save on the Common toolbar.
The HTML form from Chapter 7 is now pasted into the page where your paragraph tag was, and the page is saved.
Set your cursor inside the Form tag in the Code pane and add the ID attribute id=“form1” to the tag.
By adding the ID to the form tag, you have given the plug-in the ability to manipulate the form and apply the validation functionality. This plug-in not only identifies the form by its ID, but enables validation simply by applying a class to the form field in question.
Click the Name form field in the Design pane to select it, and then in the Code pane, add class=“required” to the tag.
Click the Email form field in the Design pane and then add class=“required email” to the tag in the Code pane.
Click the Phone form field in the Design pane and add class=“required numeric” to the tag in the Code pane.
Click Save and then click Preview on the Common toolbar to view your page in a browser. In the browser view, scroll down to your form and enter some input values to test the validation. Click the Submit button and watch the form validation in action.
In the image above, I entered nothing into the Name field, entered an invalid email address into the Email field, and typed some text into the Phone field. In each case, this input failed to pass the validation function that the jQuery plug-in provides.
Close the browser window and return to Expression Web.
Select the Phone input field in the Design pane.
In many cases, designers will need to modify and experiment with the jQuery, JavaScript, or other attributes they add to their page. Expression Web provides tools that make this task quick, easy, and accurate. The Tag Properties panel is ideal for this operation.
With the form field still selected, notice the Tag Properties panel on the lower left of your workspace. Using the Tag Properties panel, remove the class (required numeric) from the form field’s Tag Properties.
In the Design pane, select the message text box of your form and, using the Tag Properties panel, enter required in the Class field.
The idea is to require users to enter something in the message field, but not the phone field.
Click Save, and then click Preview on the Common toolbar to check your page in a browser again. This time, test the validation by leaving the phone field blank. Submit the form. You should see a screen similar to the following one.
Close the browser window and return to Expression Web.
)
)
Although some HTML editors produce JavaScript code, such as the JavaScript that Expression Web created for the Interactive Buttons you used in the media player segment, the HTML editor is best suited for editing the code produced by JavaScript tools such as jQuery and its myriad of plug-ins. By using an open and pre-coded approach such as jQuery, you can make the latest and greatest scripting solutions available in your pages, without having to be a programmer. Using code libraries such as jQuery within Expression Web gives you virtually unlimited client-side scripting capabilities.