View in EDS HTML Full Text PDF Full Text

Creating Dynamic Websites Using jQuery

Saved in:
Bibliographic Details
Title: Creating Dynamic Websites Using jQuery
Language: English
Authors: Miller-Francisco, Emily
Source: Computers in Libraries. Jul-Aug 2010 30(6):26-28.
Availability: Information Today, Inc. 143 Old Marlton Pike, Medford, NJ 08055-8750. Tel: 800-300-9868; Tel: 609-654-6266; Fax: 609-654-4309; e-mail: custserv@infotoday.com; Web site: http://infotoday.com
Peer Reviewed: N
Page Count: 3
Publication Date: 2010
Intended Audience: Media Staff
Document Type: Journal Articles
Reports - Descriptive
Education Level: Higher Education
Descriptors: Research Libraries, Internet, Web Sites, Higher Education, Computer Software, Computer System Design, Design Requirements, Client Server Architecture, Computers, Computer Interfaces, Programming Languages
Geographic Terms: Oregon
ISSN: 1041-7915
Abstract: As e-resource systems and web coordinator for Southern Oregon University, the author is deeply involved with the university library's website. In the latest revision of this website, the author knew she needed to jazz it up a little. With screen real estate on the main page at a premium, the author hoped to use a tabbed box and an accordion-style control to keep things findable without overcrowding the page. Implementing both the tabbed panels and the accordion control proved more difficult than she had anticipated. She began by using Dreamweaver's Spry Widgets, which provide "plug and play"-style widgets with just a few clicks of the mouse. Unfortunately, this attempt was plagued by technical difficulties. So she took stock of alternative approaches. Luckily, there are several JavaScript libraries that provide similar widgets. Ultimately, however, the author chose jQuery to help her. In this article, the author introduces jQuery, a powerful set of JavaScript libraries for selecting elements and then operating on them using a CSS-like syntax. It allows one to use JavaScript at a macro level so that he/she does not have to do all the microcoding. The author discusses how to get jQuery up and running on one's website.
Abstractor: ERIC
Entry Date: 2010
Access URL: https://www.infotoday.com/cilmag/jul10/index.shtml
Accession Number: EJ890695
Database: ERIC
Full text is not displayed to guests.
FullText Links:
  – Type: pdflink
    Url: https://content.ebscohost.com/cds/retrieve?content=AQICAHj0k_4E0hTGH8RJwT4gCJyBsGNe_WN95AvKlDbXJGqwxwH4TlgLvRr5EW3_Lwn94uoxAAAA4jCB3wYJKoZIhvcNAQcGoIHRMIHOAgEAMIHIBgkqhkiG9w0BBwEwHgYJYIZIAWUDBAEuMBEEDOavSDi5eS4g1OfkVgIBEICBmjYKaIbHj1_PMVCBNtM4zM7w_Rah0N5dgdSi4FdMU-Up1qHywck1QbIU4OJ6o1ZbDuOkOOuh6ZCQW2KFpq8hcWDqO1TQsuA4jxQRgx2HjFmlilHG1cGd3m9pwQof2Lg6RcwL7tkHv1gMO3E5fSvuediAklbLRCGVXwbZhkt7EEuU-PvRWD03fgvPkkx8eyclpH40Nw8YQcF37Fw=
Text:
  Availability: 1
  Value: <anid>AN0052631454;clb01jul.10;2010Aug09.14:42;v2.2.460</anid> <title id="AN0052631454-1">Creating Dynamic Websites Using Query </title> <p>As e-resource systems and web coordinator for Southern Oregon University, I am deeply involved with the university library's website. In the latest revision of this website, I knew I needed to jazz it up a little. With screen real estate on our main page at a premium, I hoped to use a tabbed box and an accordion-style control to keep things findable without overcrowding the page.</p> <p>Implementing both the tabbed panels and the accordion control proved more difficult than I had anticipated. I began by using Dreamweaver's Spry Widgets, which provide "plug and play"-style widgets with just a few clicks of the mouse. Unfortunately, this attempt was plagued by technical difficulties. So I took stock of alternative approaches. Luckily, there are several JavaScript libraries that provide similar widgets. These include MooTools, Prototype, Dojo, script.aculo.us, and Yahoo! User Interface. Ultimately, however, I chose jQuery to help me.</p> <hd id="AN0052631454-2">What Is jQuery?</hd> <p>So what's jQuery? It's a powerful set of JavaScript libraries for selecting elements and then operating on them using a CSS-like syntax. Basically, it allows you to use JavaScript at a macro level so that you don't have to do all the microcoding. This makes it significantly easier to use. Also, a number of Ajax-style plug-ins have been developed and are out there to share, making it even easier. It was originally developed by John Resig and released in early 2006. Since then, it has gained a fair amount of traction among web developers. Several major websites use it, including Google, Mozilla, WordPress, and Netflix.</p> <p>Why use jQuery? I've already mentioned that it's relatively easy to use. It's also open source, so it's free too (although you should keep the original copyright statements intact in the code). Unlike some of the other JavaScript libraries, it has excellent documentation. It has cross-browser support, which, if you've done any web work at all, you know is essential. It's lightweight, so it won't bog your site down. And it's customizable, so you can alter the look and feel of the widgets to match your website. Finally, it provides an opportunity to have that "Web 2.0" look on your website without necessarily having all the expertise to do it yourself.</p> <p>That being said, you do need to know a few things. You need to feel pretty comfortable using HTML and CSS. Of course, it would be a bonus to know some JavaScript (and some developers say it's a requirement). But I found that you can use some of the widgets that are already developed by writing a minimal amount of JavaScript. To learn more about jQuery, go to its website at <ulink href="http://jquery.com">http://jquery.com</ulink>.</p> <hd id="AN0052631454-3">How to Work jQuery</hd> <p>So let's get down to specifics. Here's what you need to do to get jQuery up and running on your website. The first step is to find a widget or plug-in that you want to use. I'd recommend jQuery UI (user interface) as a place to start (<ulink href="http://jqueryui.com">http://jqueryui.com</ulink>). Next, read the documentation for that widget and see how you need to set up your HTML and CSS. You have a choice for the next step: You can either download the code and host it on your web server or link to it elsewhere. What I did, and what I would recommend doing, was to link to it on the Google AJAX Libraries API server. It is still very quick and reliable. You can learn more about it at <ulink href="http://code.google.com/apis/ajaxlibs">http://code.google.com/apis/ajaxlibs</ulink>. If you're not sure whether this is the way to go, try reading Dave Ward's reasoning at <ulink href="http://encosia.com/2008/12/10/3-reasons-why-you">http://encosia.com/2008/12/10/3-reasons-why-you</ulink> -should-let-google-host-jquery-for-you. If you do decide to go with the Google linking, this needs to be placed in the head section (although you may want to check to see whether these are still the most recent versions):</p> <ct id="AN0052631454-4"> <script type="text/javascript" src="<ulink href="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js</ulink>"></script> <script type="text/javascript" src="<ulink href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js">http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js</ulink>"></script></ct> <p>Note that the first script tag is loading jQuery itself. The second script is loading the jQuery UI library--which is necessary if you are using a widget from that library.</p> <hd id="AN0052631454-5">jQuery Widgets, Interactions, and Effects</hd> <p>Now the widget that you want to use needs to be called. My accordion widget came from the jQuery UI library. I needed my widgets to display as soon as the page was loaded, so here is the code I used:</p> <ct id="AN0052631454-6"> <script type="text/javascript"> $(document).ready(function(){ $("#accordion").accordion({ active: 2 }); }); </script> "</ct> <p>Other widgets may require you to call them from within the body of the HTML document, so read the documentation carefully.</p> <p>Keep in mind that you don't have to use the UI library to find jQuery widgets. There are many third-party plug-ins. I ended up getting my tabbed box code from the Sohtanaka Designer & Front-End Developer blog at <ulink href="http://www.sohtanaka.com/">www.sohtanaka.com/</ulink> web-design/simple-tabs-w-css-jquery.</p> <p>To give you a feel for what's available, here is the list of widgets in the jQuery UI as of this writing: accordion, autocomplete, button, datepicker, dialog, progressbar, slider, and tabs. For those of you with a little more JavaScript expertise, there are also "interactions" and "effects" available. The interactions include draggable, droppable, resizable, selectable, and sortable. The effects include effect, show, hide, toggle, color animation, add class, remove class, toggle class, and switch class. Visit the jQuery UI website to learn more about what these widgets, interactions, and effects can do. And remember, this is a major jQuery widget library, but there are others out there if you don't see exactly what you want.</p> <p>The final step is to customize the look and feel of your widgets. Depending on what you're doing, you may be able to just work with the CSS that you have to get your desired look. However, there's also a great tool that can help you design the look of widgets from the UI library. It's called ThemeRoller (<ulink href="http://jqueryui.com/themeroller">http://jqueryui.com/themeroller</ulink>). This user-friendly website will let you design the look and feel of your widgets. Then, you can download the theme and use it. It's pretty slick.</p> <p>So if you're getting ready to revise your website, consider adding jQuery to your toolkit. It may be just the thing to give a little pizzazz to your interface.</p> <p>PHOTO (BLACK & WHITE): Space is always an issue on the library's main page.</p> <p>PHOTO (BLACK & WHITE): ThemeRoller will help you design your widgets.</p> <aug> <p>By Emily Miller-Francisco</p> <p></p> <p>Emily Miller-Francisco (millere@sou.edu) is the e-resource systems and web coordinator at Southern Oregon University in Ashland, Ore. She has shepherded the library's website through several major revisions over the past 9 years.</p> </aug>
Header DbId: eric
DbLabel: ERIC
An: EJ890695
AccessLevel: 3
PubType: Academic Journal
PubTypeId: academicJournal
PreciseRelevancyScore: 0
IllustrationInfo
Items – Name: Title
  Label: Title
  Group: Ti
  Data: Creating Dynamic Websites Using jQuery
– Name: Language
  Label: Language
  Group: Lang
  Data: English
– Name: Author
  Label: Authors
  Group: Au
  Data: <searchLink fieldCode="AR" term="%22Miller-Francisco%2C+Emily%22">Miller-Francisco, Emily</searchLink>
– Name: TitleSource
  Label: Source
  Group: Src
  Data: <searchLink fieldCode="SO" term="%22Computers+in+Libraries%22"><i>Computers in Libraries</i></searchLink>. Jul-Aug 2010 30(6):26-28.
– Name: Avail
  Label: Availability
  Group: Avail
  Data: Information Today, Inc. 143 Old Marlton Pike, Medford, NJ 08055-8750. Tel: 800-300-9868; Tel: 609-654-6266; Fax: 609-654-4309; e-mail: custserv@infotoday.com; Web site: http://infotoday.com
– Name: PeerReviewed
  Label: Peer Reviewed
  Group: SrcInfo
  Data: N
– Name: Pages
  Label: Page Count
  Group: Src
  Data: 3
– Name: DatePubCY
  Label: Publication Date
  Group: Date
  Data: 2010
– Name: Audience
  Label: Intended Audience
  Group: Audnce
  Data: Media Staff
– Name: TypeDocument
  Label: Document Type
  Group: TypDoc
  Data: Journal Articles<br />Reports - Descriptive
– Name: Audience
  Label: Education Level
  Group: Audnce
  Data: <searchLink fieldCode="EL" term="%22Higher+Education%22">Higher Education</searchLink>
– Name: Subject
  Label: Descriptors
  Group: Su
  Data: <searchLink fieldCode="DE" term="%22Research+Libraries%22">Research Libraries</searchLink><br /><searchLink fieldCode="DE" term="%22Internet%22">Internet</searchLink><br /><searchLink fieldCode="DE" term="%22Web+Sites%22">Web Sites</searchLink><br /><searchLink fieldCode="DE" term="%22Higher+Education%22">Higher Education</searchLink><br /><searchLink fieldCode="DE" term="%22Computer+Software%22">Computer Software</searchLink><br /><searchLink fieldCode="DE" term="%22Computer+System+Design%22">Computer System Design</searchLink><br /><searchLink fieldCode="DE" term="%22Design+Requirements%22">Design Requirements</searchLink><br /><searchLink fieldCode="DE" term="%22Client+Server+Architecture%22">Client Server Architecture</searchLink><br /><searchLink fieldCode="DE" term="%22Computers%22">Computers</searchLink><br /><searchLink fieldCode="DE" term="%22Computer+Interfaces%22">Computer Interfaces</searchLink><br /><searchLink fieldCode="DE" term="%22Programming+Languages%22">Programming Languages</searchLink>
– Name: Subject
  Label: Geographic Terms
  Group: Su
  Data: <searchLink fieldCode="DE" term="%22Oregon%22">Oregon</searchLink>
– Name: ISSN
  Label: ISSN
  Group: ISSN
  Data: 1041-7915
– Name: Abstract
  Label: Abstract
  Group: Ab
  Data: As e-resource systems and web coordinator for Southern Oregon University, the author is deeply involved with the university library's website. In the latest revision of this website, the author knew she needed to jazz it up a little. With screen real estate on the main page at a premium, the author hoped to use a tabbed box and an accordion-style control to keep things findable without overcrowding the page. Implementing both the tabbed panels and the accordion control proved more difficult than she had anticipated. She began by using Dreamweaver's Spry Widgets, which provide "plug and play"-style widgets with just a few clicks of the mouse. Unfortunately, this attempt was plagued by technical difficulties. So she took stock of alternative approaches. Luckily, there are several JavaScript libraries that provide similar widgets. Ultimately, however, the author chose jQuery to help her. In this article, the author introduces jQuery, a powerful set of JavaScript libraries for selecting elements and then operating on them using a CSS-like syntax. It allows one to use JavaScript at a macro level so that he/she does not have to do all the microcoding. The author discusses how to get jQuery up and running on one's website.
– Name: AbstractInfo
  Label: Abstractor
  Group: Ab
  Data: ERIC
– Name: DateEntry
  Label: Entry Date
  Group: Date
  Data: 2010
– Name: URL
  Label: Access URL
  Group: URL
  Data: <link linkTarget="URL" linkTerm="https://www.infotoday.com/cilmag/jul10/index.shtml" linkWindow="_blank">http://www.infotoday.com/cilmag/jul10/index.shtml</link>
– Name: AN
  Label: Accession Number
  Group: ID
  Data: EJ890695
PLink https://search.ebscohost.com/login.aspx?direct=true&site=eds-live&db=eric&AN=EJ890695
RecordInfo BibRecord:
  BibEntity:
    Languages:
      – Text: English
    PhysicalDescription:
      Pagination:
        PageCount: 3
        StartPage: 26
    Subjects:
      – SubjectFull: Research Libraries
        Type: general
      – SubjectFull: Internet
        Type: general
      – SubjectFull: Web Sites
        Type: general
      – SubjectFull: Higher Education
        Type: general
      – SubjectFull: Computer Software
        Type: general
      – SubjectFull: Computer System Design
        Type: general
      – SubjectFull: Design Requirements
        Type: general
      – SubjectFull: Client Server Architecture
        Type: general
      – SubjectFull: Computers
        Type: general
      – SubjectFull: Computer Interfaces
        Type: general
      – SubjectFull: Programming Languages
        Type: general
      – SubjectFull: Oregon
        Type: general
    Titles:
      – TitleFull: Creating Dynamic Websites Using jQuery
        Type: main
  BibRelationships:
    HasContributorRelationships:
      – PersonEntity:
          Name:
            NameFull: Miller-Francisco, Emily
    IsPartOfRelationships:
      – BibEntity:
          Dates:
            – D: 01
              M: 01
              Type: published
              Y: 2010
          Identifiers:
            – Type: issn-print
              Value: 1041-7915
          Numbering:
            – Type: volume
              Value: 30
            – Type: issue
              Value: 6
          Titles:
            – TitleFull: Computers in Libraries
              Type: main
ResultId 1