（Jquery）推进网站应用时尚元素-----Boost Your Website’s Fanciness Factor

   开发时，应用不少时尚，花俏的网页元素，不施是一种吸引用户眼球，增强用户体验的不错选择；这样一来，应合用户的口味、二来可以打造时尚以及个性化的元素来贴近web2.0; 以下介绍4个比较时尚，实用的东东。

  • DockMenu ---  个性化网站必不可少的嘘头元素
  • GreyBox    ---- 我个人认为比较不错，它可以在当前页面基础之上打开其他站点的网页，不需要新开一个tab页面，或者新开一个浏览页面，

                              互 动性好；并且greyBox还坚持多页面的切换，Great Cool!

  • AmberJack---适合应用于website向导功能，可以使用它，你可以及时介绍网站上的新东东，新内容，或者新闻，视频，照片等等
  • ImageFlow---用过Ipod touch,或者itunes的人，都会知道，这个东东应用于网页上显示图片是非常不错的选择。（现在不少网站上显示图片，都是下一页、或者点击图片下一张，这样太土了。）

1.Dock Menu

css-dock-menu

       If you are a big Mac fan, you will love this CSS dock menu that I designed. It is using Jquery Javascript library and Fisheye component from Interface and some of my icons. It comes with two dock styles - top and bottom. This CSS dock menu is perfert to add on to my iTheme. Here I will show you how to implement it to your web page.

Download CSS Dock Menu

(View Demo)
Zip package included JS, CSS, and icons

1. Download source files

Download the CSS dock menu zip package.

2. Insert code

In between the HTML <head> tag, add the following code

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/interface.js"></script>

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

<!--[if lt IE 7]>
<style type="text/css">
.dock img { behavior: url(iepngfix.htc) }
</style>
<![endif]–>

The first part is the Javascript, second part is CSS stylesheet, and last part is the PNG hack for IE 6.

3. Configuration

Don’t forget to add the following code to anywhere within the <body> tag:

<script type="text/javascript">
$(document).ready(
function()
{
$(’#dock2′).Fisheye(
{
maxWidth: 60,
items: ‘a’,
itemsText: ’span’,
container: ‘.dock-container2′,
itemWidth: 40,
proximity: 80,
alignment : ‘left’,
valign: ‘bottom’,
halign : ‘center’
}
)
}
);
</script>

4. Add or remove item

To add menu item to the top dock (note: span tag is after the img tag):

<a class="dock-item" href="#">

<img src="images/home.png" alt="home" />

<span>Home</span>

</a>

To add menu item to the bottom dock (note: span tag is before the img tag):

<a class="dock-item2" href="#">

<span>Home</span>

<img src="images/home.png" alt="home" />

</a>

Browser Compatibility

I have tested on IE 6, IE 7, Opera 9, Firefox 2, and Safari 2 (although there are some minor rendering issues with Safari).

2 GreyBox

graybox screenshotGreyBox allows you to launch other websites in a modal window (like a pop-up window, but it doesn’t open another browser). This is great for when you’re linking to multiple websites and don’t want the user to navigate away from your web page or to open another browser window that might be blocked by the user’s browser. Using GreyBox is easy and involves a 3-step process outlined in the web page.

Here’s some key pages regarding GreyBox: Download page, Documentation, Examples, Installation, and Advanced Usage (for the more experienced JavaScript’ers, check this page out for tips on how you can extend the library’s functionality).
3 AmberJack: Site Tour Creator

AmberJack Site Tour Creator screenshotHere’s a lightweight JavaScript library that allows you to create a scripted website tour, allowing users to visit key web pages in real-time with a small description box on each page.

This allows users to take a tour of the various sections of a website, without them having to view a static demo created in flash or some other method. Extra bonus, you can download various “skins” or even create your own, to match the look and feel of your website. Here’s the skins gallery so you may see if they have a theme that doesn’t clash with your website.
4 ImageFlow

ImageFlow screenshotInspired by iPod’s “coverflow”, ImageFlow is a simple effect that displays a collection of images that the user can scroll there using a scroll bar at the bottom of the image set. Advanced developers can probably modify the slider to spruce it up a bit more.

When the user clicks on an image, it re-directs them to another web page with the image displayed, so an excellent idea would be to use this in conjunction with a modal box script to open the image instead.

Update: Just now, the author of ImageFlow emailed me announcing ImageFlow version 0.9. Check it out here (it fixes the issue of the image opening another browser window when clicked, and it works with Lightbox compatibility). Thanks for the update Finn!
posted @ 2008-07-14 14:13  RicoRui  阅读(2725)  评论(11)  编辑  收藏  举报