jQuery Link Control - Give it to your users

Demos

Inline Sample:
This is a inline sample, when you roll over the link it simply pushes the text to the right.

Just a note, this could become problamatic if your text wraps to the next line and you'll more than likely want to give one of the other options a go.

Overlay Sample:
This is the overlay sample, when you roll over the link it will display above the content to the right, like a tooltip.

This is the best used option and will give your user more real estate when it comes to clicking what they want.

It adapts to your longer links also.

Adding to Your Website

To add this you'll need jQuery and jQuery.linkControl.js, then add the following to the head of your document: <script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jQuery.linkControl.js"></script>

<script type="text/javascript">

$().ready(function(){
$('a.inline').linkControl({inline:true});
$('a.overlay').linkControl({overlay:true, padding:5, bgColor:'#fff', borderColor:'#333'});
});

</script>

The two areas in bold are the DOM elements you want to add the code to. If you want to add it to all links just use $('a') then add the function call '.linkControl({})'.

You then need to specify whether you're using inline or overlay controls inside the open/close brackets. If you where using inline it would look like this:
$('a').linkControl({inline:true});

Options

After you have the initial plugin working there are a few different options to help in customizing this. They go inside the open/close brackets.

inline:true (sets links up to inline style)

overlay:true (sets links up to overlay style)

padding:NUMERIC VALUE (sets padding for overlay link)

bgColor:'#HEX COLOR' (sets background color for overlay link)

borderColor:'#HEX COLOR' (sets border color for overlay link)

So, if I wanted to use the overlay style with 10 pixel padding, a grey background and white border, it would look like this:
$('a').linkControl({overlay:true, padding:10, bgColor:'#777', borderColor:'#fff'});

Other Plugins

Right now I've only got 1 other one, but be assured, the list will grow.

jQuery Page Peel: A jQuery plugin for the page peel ad effect used on quite a few sites now.

适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.

代码整理：站长图库