Tip1
Tip2
Tip3
Some can be menus
Using it available options
sticky:'move', -- options are move(follows mouse), slide(slides with mouse along the x-axis
forewrap:'<p>', -- options are what ever you want, you may set the wrapper for the tip yourself
backwrap:'</p>', -- MAKE SURE TO CLOSE YOUR WRAPPERS or else unpleasant things happen
hook:'bottom-right', -- see the hooking guide below
color:'bstip', -- choose the class you want to apply to the master wrapper
speed:'fast', -- the speed of the fade in / out : fast or slow or a number
type:'tip', -- set to tip to get the content from the title or to
tack:0, -- number of milliseconds the tip hangs around after mouseout. only works for none and slide sticky. if you mouse over the tip while it is tacked it won't disappear!
keep:2000, -- doesn't really apply to you . don't bother with it
ynudge:15, -- pixels nudged along the y axis
xnudge:15, -- pixels nudged along the x axis
opacity:.8 -- opacity you can set
Using it Usage
BE SURE TO SET YOUR CSS. LOOK AT MINE IF YOU CANT FIGURE YOURS OUT!
I will leave it up to you to get the jQuery library and make your own css put those in your head...
<script src='../js/jquery.pack.js' type='text/javascript'></script>
Make sure you download my plugin too and include it in your document head.
<script src='../js/bs.js' type='text/javascript'></script>
Put the following between brackets in the $(document).ready(function(){ // your code here }); between script tags.
View my page source for an example.
$('.bslink').bstip();
<a class="bslink" title"An easy example">this</a>
This will run the tip at default and will look like this. -- Make sure you set a title to your element... that is were the tip comes from on the 'tip' type.
$('.bslink2').bstip({
xnudge:0,
ynudge:10,
tack:1000,
class:"bstip2",
hook:"bottom-mid",
sticky:"none",
opacity:1
});
<a class="bslink2" title="Wow">this</a>
Turns out like this. Notice it sticks around for 1 second unless you mouseover it? Neat huh. -- Make sure you set a title to your element... that is were the tip comes from on the 'tip' type.
$('.bslink4').bstip({
class:"bswrap",
type:"menu",
tack:500,
hook:"top-mid",
sticky:"none"
});
<a class="bslink4" title="menu2">this</a><div id="menu2"><a style="background:#CCC" href="#">link</a></div>
This makes a tip from inline content like this. You can put menus in here or what ever you want. make sure your title is the same as the ID you are grabbing for the menu. That element will be removed so put everything important inside of it so it will be grabbed into the tooltip.
Using it hooking
You can hook using the following options. The basic form for setting up a hook using the hook:"" is y-x.
I.E. UpDown-LeftRight.
The "Y" available values are top, mid, and bottom.
The "X" available values are left, mid, and right.
Some do not work together. See examples for usage. You will have to play around to find your personal preference.
Download it Version 1
It's cleaner, it's fresher, it's lighter. Use it.
You can see from this example how easy it is to use it! Here is the entire code used to generate this tab panel!
Using it The ENTIRE code ... Yea. It's that easy.
Here is the code for the head
<script type="text/javascript" src="js/tw.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#tabs2").tabworld();
});
</script>
Here is the code for the body
<ul id="example1">
<ul id="tabs2">
<li>Tab World
<q>
Content Here
<q>
</li>
<li>How
<q>
Content for tab 2 Here
<q>
</li>
</ul>
With easy HTML that's how.
The set up offers endless configurablity. User your own css and tags (as long as you don't use the "q" tag anywhere) to style your tab panel. It's easy to do, easy to set up, easy to style because Tab World does all the hard work.
The basic setup is a ul with a specific ID - IT HAS TO BE AN ID - You don't want two tabs duplicating - If you do... your not so good at this stuff -- anyway, then your li tags and then your q tags. IMPORTANT! After that long sentence it is important that you understand, everything not in that q tag will be the tag title, while everything inside of it will be the content. Don't use q tags in your actual content other than to wrap it because it is a) bad practice anyway and b) it won't even show up. That may change in later versions but its not a really good idea.
Here's a little bit on styling the code.
You can assume that the Tabs will render in this manner
You can style the li tags and you can also style the a tag in the tabs plus you can add all your own tags to your code before the "q" tags in your original set up.
<div id="menu">
<ul id="tabs1">
<li rel="tabs1-0"><a>Field 1</a></li>
<li rel="tabs1-1"><a>Field 2</a></li>
</ul>
</div>
<div id="tabs1content">
<div class="space">
<div id="tabs1-0">
Content 1
</div>
<div id="tabs1-1">
Content 2
</div>
</div>
</div>
When you run $("#tabs1").tabworld(); from your header with this you willl get the above script loaded into your DOM
<div id="menu">
<ul id="tabs1">
<li>Field 1<q>Content 1</q></li>
<li>Field 2<q>Content 2</q></li>
</ul>
</div>
I Recomend adding a "div" wrapper around your ul if you are not using a tabloc: or contloc: option because the tabs will load into the parent of the original ul tag.
These are the options If these settings are not included or unchanged these defaults will be used
Put them in the funtion in your header using a similar style like the examples below View this page source for examples
$(document).ready(function(){
$("#tabs2").tabworld({
mislpace:'none', // this does nothing that you have to worry about yet
speed:'fast', // this sets the transition speed (you can do fast, slow, or set a number in milliseconds
color:'menu', // sets the class to apply additionally to the ul tag
area:'space', // the class to apply to the wrapper for your content divs
tabloc:'none', // if you change this you can choose the place were the tabs are appended
// it over rides the append to parent but you need to put the # or . or @[rel*=] before it yourself or else it wont work
contloc:'none', // same as tabloc only it changes the element that the content divs are appended
dopen:0, // choose the default tab to open ... remember tab numbers start at 0
transition:'fade', // transition effects can be fade or slide. anything else will just show
tabactive:'tabactive' // active class applies to the a tag and the li tag. Send me requests for additional active tag support
}); });
Version 1.1 -- For jquery 1.3
Version 1 -- not for jquery 1.3