Bigger link
- 授权协议: 未知
- 开发语言:
- 操作系统: 未知
- 软件首页: http://plugins.jquery.com/project/biggerlink
软件介绍
Makes it really easy to enable specified element/s to behave as a proxy for their first contained link.
Adds additional css classes to provide the means for the specified element to visually reflect focus and hover states of it's contained link/s.
Requires
jQuery version 1.2.1
Using defaults
Normally this plugin will need very little configuration—although you do need to direct it to the element/s on which you wish it to act.
Use the regular jQuery manner to select an element which contains a link whose behaviour you wish the element to inherit. In this case the <li> elements.
HTML example. (Note the added title attributes will be copied to the <li> elements by the plugin).
<ul class="links">
<li><a target="_blank" rel="nofollow" href="http://www.fusion.com.au/" title="Fusion web site in a new window">Fusion</a></li>
<li><a target="_blank" rel="nofollow" href="http://jquery.com/" title="The write less, do more, JavaScript library">jQuery</a></li>
<li><a target="_blank" rel="nofollow" href="http://www.google.com.au/" title="More about everything in a new window">Google</a></li>
</ul>JavaScript example:
$('.links li').biggerlink();Settings for JavaScript pop-ups
Setting follow to false ensures the link will not be followed by the browser as it would by default; Thus not interferring with the action os JavaScript pop-ups applied to the same link. (Note that popwindow() is not part of this plugin).
$('.links li').popwindow().biggerlink({follow:false});Using custom classes
By default the plugin applies classes to the target elements:
hoverclass - class added to the parent element when hovering over it with you cursor or focusing a link it contains. By default this class is hover.
clickableclass - class added to each selected element which contains at least one link. By default this class is hot. Particularly useful if you wish to make the element appear 'clickable' when the link behaviours are assigned to it.
To avoid possible conflicts with other classes in your document they may be customised:
$('.links li').biggerlink({clickableclass:'yum',hoverclass:'roll'});Worth noting
The plugin will use the URL of the first link within the selected element. If there is a second link with a different URL it’s action will be overridden - using the URL of the first link instead.
More
Further details can be found on my blog post: Bigger link: easier clicking with jQuery.
Thanks
This code is the product of a few Friday afternoons. During this time my employer, Fusion, allows me and my fellow Fusionites to work on the internal projects that interest us most.
I’m sharing biggerlink in the hope that it can be further polished by people smarter than me; And to, in a small way, give back to others who have contributed to making jQuery brilliant.
Web信息架构(第3版)
Peter Morville、Louis Rosenfeld / 陈建勋 / 电子工业出版社 / 2008年8月 / 85.00
本书涵盖了信息架构基本原理和实践应用的方方面面。全书共7个部分,包括信息架构概述、信息架构的基本原理、信息架构的开发流程和方法论、信息架构实践、信息架构与组织、两个案例研究,以及参考资料清单。 本书兼具较高的理论价值和实用价值,曾被Web设计领域多本书籍重点推荐,是信息架构领域公认的经典书,不论新手还是专家都能各取所需。本书可供Web设计与开发者、Web架构师、网站管理者及信息管理相关人员参......一起来看看 《Web信息架构(第3版)》 这本书的介绍吧!
