10 JQUERY 设计技巧

Posted on | 十一月 27, 2009 | No Comments

jQuery的技巧有很多，强大的jQuery的功能可满足几乎任何人的JavaScript需要。自从jQuery使JavaScript接近,设计师要加上简单的互动和可视化技术进入他们的设计不知情的情况下广泛的编程知识,他的应用技术值得我们去深刻的探讨

正如任何设计师都知道，jQuery可以使用少量的代码可以实现独特的视觉及、专业化和吸引任何网页设计 jQuery增加额外的小位视觉细节和方便用户可以添加的专业精神和具有独特魅力的网页设计。此外，出售的模板设计，WordPress的主题，网页设计和其他类型的设计使jQuery成为一个巨大的卖点。

让我一起看看下面10个优秀的简洁JQuery成功案例。让我们从中的启发，有助于提高我们都jQuery理解和进一步深化。.

1. Equal-Height Columns

Equal-Height Columns

Columns with equal heights have always been a problem for designers using divs, although now, there are quite a few solutions. Among the solutions available to you is using jQuery. This technique only requires a very small JavaScript function to handle everything, then some basic integration with the main layout to make the magic happen.

The function and snippets for this approach is from CSSNewbie. If anyone would like more insight to how the function works, it’s all there.

To solve this problem with jQuery, just add this function to your pages you wish to have equal heights (or include it as a JavaScript file – which is better for maintainability).

function equalHeight(group) {
  tallest = 0;
  group.each(function() {
    thisHeight = $(this).height();
    if(thisHeight > tallest) {
      tallest = thisHeight;
    }
  });
  group.height(tallest);
}

To get equal-height columns, link to the script that contains the function, and put the following code block below in the <head> tags of your pages.

<script type="text/javascript">
$(document).ready(function(){
  equalHeight($(".col1"));
  equalHeight($(".col2"));
  equalHeight($(".col3"));
});
</script>

The code will execute as soon as the DOM is ready to be utilized, ($(document).ready(function()) and then uses the equalHeight function to accurately calculate the height of all the columns. As one can see, all a designer needs to do is use divs with classes of col1, col2, and col3 to make this example work properly.

2. Rounded corners without the HTML mess

Fortunately, CSS3 has come out with a way to create rounded corners automatically without using images, but on the other hand, many popular browsers (such as Internet Explorer) may take a while before it fully/partially supports CSS3 W3C recommendations.

Rounded corners without the HTML mess

Many designers know how to create rounded corners using CSS, HTML, and a bunch of images, but these techniques cause a lot of HTML/CSS clutter.

Below is an example of some cluttered HTML used to create rounded corners.

<div>
  <div>
  <div></div>
</div>
<div>
  <div>
    <div>
      <-- main content goes here -->
    </div>
  </div>
</div>
<div>
  <div></div>
</div>
</div>

That’s quite a lot of code for one rounded box. Most designers know that it can be difficult to sift though HTML code like this, especially when trying to alter a page that use several rounded corners.

A solution to our problem is simple though – instead of writing all of the extra HTML divs each time we need a new rounded box, we can simply have jQuery do all the work for us (by way of DOM manipulation).

This useful technique is from Day 13 of the 15 Days of jQuery site. For a full tutorial or more detail on how it works, head on over there.

By utilizing the script below, we can automatically add the extra divs where needed.

<script type="text/javascript">
$(document).ready(function(){
    $("div.roundbox").wrap('
      <div>'+
      ' <div>'+
      '   <div>'+
      '     <div>'+
      '     </div>'+
      '  </div>'+
      ' </div>'+
      '</div>');
});
</script>

The use of div.roundbox in the snippet above is key. Now, instead of writing out all of those divs every time we need to create a new rounded box, all we have to do is use the class roundbox; jQuery will traverse the DOM to find all elements that has that class value and will automatically wrap it around div’s.

Here’s a sample div HTML structure:

<div>
  <-- main content goes here -->
</div>

Of course, you’ll still have to use some CSS to get the rounded corner images to work, and Jack Born of 15 Days of jQuery provides you with a downloadable package that includes the auxiliary source files you’ll need.

3. Scrolling Content

Animated scrolling in jQuery can be used to create image carousels and to simplify a design by being able to display more content in a smaller space.

Below is an example of a jQuery plugin called Scrollable (check out the demo on that page to see the plugin in action).

Scrolling Content

There are tons of plugins and tutorials on the web for how to create scrollable content, the Scrollable plugin being one of them.

To help you scroll up and down a web page in an animated way, check out the tutorial called Scroll window smoothly in jQuery on Freelancer ID Blog.

In order to tell jQuery to scroll, we need a section in a web page to scroll up or down to (ScrollTarget).

<div>
  <p>After a scroll button is clicked, jQuery will animate the
  page to this point.</p>
</div>

Next, we can use any HTML element to use as a trigger to call a function called scroll(), such as an image or input button to tell the browser to scroll to the above div when clicked.

Example of a input button:

<input onclick="scoll();" type="button" value="Scroll" />

Example of an image:

<img onclick="scoll();" src="images/scroll.jpg" alt="Scroll" />

Here is the code for the scroll() function.

function scroll(){
  $('html, body').animate({
    scrollTop: $(".ScrollTarget").offset().top
  }, 2000);
}

The downside to this technique is that it uses an onclick property which is bad practice if you’re interested in obeying unobtrusive JavaScript principles. So, you can modify the element’s markup in such a way that it has a class property value of, for example, scrollTrigger:

<input type="button" value="Scroll" />

And then simply replace the above scroll() function to this script below:

$('.scrollTrigger').click(function(){
  $('html, body').animate({
    scrollTop: $(".ScrollTarget").offset().top
  }, 2000);
});

4. CSS Style Switcher

Switching themes is a great way to vary the theme and look of a web page. Switching stylesheets may be necessary to accommodate different screen resolutions, or perhaps to allow users to pick a light background alternative to a dark design.

CSS Style Switcher

It’s quite easy to do (really). Include the following jQuery script to the <head> of your HTML file.

<script type="text/javascript">
  $(".styleswitch").click(function() {
    $('link[rel=stylesheet]').attr('href' , $(this).attr('rel')); 
  });
</script>

To give options to the user for switching styles, just assign the styleswitch class to an HTML element (a elements would be good candidates), using the rel attribute to reference the location of your stylesheets.

<a href="#" rel="dark.css">Dark</a>
<a href="#" rel="light.css">Light</a>

For example, if this is how you reference your default stylesheet:

<link rel="stylesheet" href="dark.css" type="text/css">

Clicking on the second link above will modify the DOM in such a way that the href attribute will take on the value of light.css.

5. Resizing text dynamically

This common trick among designers can make it easy for users to control how big or small they see the text on a web page without having to modify their web browser settings.

Resizing text dynamically

Using links to increase, decrease, or reset the text size of a webpage can easily be implemented using jQuery.

The following snippet from Queness will do the trick.

<script type="text/javascript">
$(document).ready(function(){
  var section = new Array('span','.section2'); 
  section = section.join(',');
  // Reset Font Size
  var originalFontSize = $(section).css('font-size');
  $(".resetFont").click(function(){
    $(section).css('font-size', originalFontSize); 
  });
  // Increase Font Size
  $(".increaseFont").click(function(){
    var currentFontSize = $(section).css('font-size');
    var currentFontSizeNum = parseFloat(currentFontSize, 10);
    var newFontSize = currentFontSizeNum*1.2;
    $(section).css('font-size', newFontSize);
    return false;
  });
  // Decrease Font Size
  $(".decreaseFont").click(function(){
    var currentFontSize = $(section).css('font-size');
    var currentFontSizeNum = parseFloat(currentFontSize, 10);
    var newFontSize = currentFontSizeNum*0.8;
    $(section).css('font-size', newFontSize);
    return false;
  });
});
</script>

In the code above, you will notice an array called section. This defines which HTML elements can be resized.

From there, we can use basic HTML to create text-resizing links.

<a>+</a> | <a>-</a>
| <a>=</a>
<span>Font size can be changed in this section</span>
<div>This won't be affected</div>
<div>This one is adjustable too!</div>

6. Animated accordions for interactive content displays

Accordions that use jQuery can take on many forms, from displaying only necessary content, to creating expandable/collapsible navigation menus.

Designers can create accordion menus with some pretty cool animation effects using jQuery.

Animated accordion.

To view a demo of an accordion in action, check out the accordion over on WebDesignerWall.

Using the jQuery script below, we can use a mixture of <h3> and <p> elements to hide and show the paragraphs below the heading tags.

<script type="text/javascript">
$(document).ready(function(){
  $(".accordion p").hide();
  $(".accordion h3").click(function(){
    $(this).next("p").slideToggle("slow")
     .siblings("p:visible").slideUp("slow");
    $(this).toggleClass("active");
    $(this).siblings("h3").removeClass("active");
  });
});
</script>

Note: If you’d like a faster animation movement, modify the slideToggle and slideUp methods so that it passes either the strings 'normal' or 'fast', or simply use an integer in millisecond units (such as .slideUp(500) for a half -second transition).

Below is the HTML we need to use. As you can see, it’s pretty straightforward and all we need to have is the div.accordion element, and <h3>/<p> pairs inside it.

<div>
  <h3>Item One</h3>
  <p>Lorem ipsum dolor sit amet.</p>
  <h3>Item Number Two</h3>
  <p>Lorem ipsum dolor sit amet.</p>
  <h3>Here is Item Three</h3>
  <p>Lorem ipsum dolor sit amet.</p>
</div>

Take a closer look at this and some other jQuery tricks over at WebDesignerWall.

7. Tooltips to convey contextual messages on an element of interest

Tooltips are an easy way to give users more information when they hover on a particular page element. By hovering over an element of choice, the user can view a simple tooltip that pops up displaying links, content, a larger image, and other contextual information that they might find useful.

Tooltips to convey contextual messages on an element of interest

The image above is actually an example of a demo page in action (from CSSGlobe). To download this script set, head on over to their write-up of it called Easiest Tooltip and Image Preview Using jQuery.

Here is the HTML markup you need, which, as you can see follows unobtrusive JavaScript best practices by using a class (.preview)to indicate which elements will have tooltips.

<a href="image.jpg" title="Image">Preview</a>

8. Modal windows to replace pop-up windows

Modal windows can be used to display images, content, and even iFrames.

Modal windows to replace pop-up windows

A dialog box like this takes more than just a few snippets of code, it takes an entire tutorial. Above is an image of what the NetTuts+ tutorial for creating a modal dialog box can do. It is a great tutorial to follow if you would like to make your own, and customize it along the way.

jQuery Plugins for Modal Windows

Instead of creating your own jQuery script for modal windows, there are plenty of plugins that you can use to get the job done; below are just a few of them.

FancyZoom

FancyZoom

WordPress jQuery Lightbox Plugin

SimpleModal

9. Tabbed interfaces for displaying content

Tabs are a great way to save space, just like an accordion. With a rise in minimalist designs, designers need new ways to decrease the space that web page content can take up. Tabs are also a great way to organize information on a web page, making the design much more user-friendly. The image below showcases a tabbed area demonstration using the jQuery UI tabs.

Tabbed interfaces for displaying content

10. Using jQuery UI for easy widget implementation

The last “trick” for designers is easy: take a look at (and learn about) the jQuery User Interface (jQuery UI).

Using jQuery UI for easy widget implementation

Basically, jQuery UI extends the jQuery core library to give you access to useful and common UI components (widgets) such as date pickers, accordion, tabs, sliders, and more.

To make things easier for designers wanting to save time and coding requirements, they have provided a nifty tool for quickly testing and creating your own jQuery UI themes, aptly called ThemeRoller, (which is also available as a Firefox bookmarklet).

Needless to say that there are plenty of features that come from jQuery UI that let designers “Code Less, Do More.”

Wrapping Up

Many visual effects and impressive interaction can be achieved using jQuery. The above ten tips may be common and incredibly useful, but the power of jQuery does not stop there. I hope that this post has gotten you interested enough to keep exploring and learning more about this designer-friendly JavaScript library.

Category: IT, WEB
Tags: JQUERY

评论|Comments

留言|Leave a Reply

About

本博客采用创作共用版权协议,要求署名、非商业用途和保持一致. 转载本博客内容也遵循“署名-非商业用途-保持一致”的创作共用协议.

CQ-CSER

计算机爱好者