JQuery Tools tab (slide)

JQuery Tools tab (slide) _jquery

Last Update:2017-01-19 Source: Internet

Author: User

Tags prev wrapper

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Html

Copy Code code as follows:

<! DOCTYPE html>
<title>jquery Tools Standalone Demo</title>

<script src= "Http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js" ></script>
<link rel= "stylesheet" type= "Text/css"
Href= "./tabs-slideshow.css"/>
<body>
<a class= "Backward" >prev</a>

<div class= "Images" >

<div>
<p style= "Font-weight:bold" >
Aenean nec Imperdiet Ligula. Cum sociis natoque Penatibus et
Magnis dis parturient montes, Nascetur ridiculus mus.
</p>
<p>
Suspendisse Potenti. Sed elementum risus eleifend massa
Vestibulum Consectetur. Duis massa augue, aliquam eget Fringilla
Vel, Aliquam vitae arcu. Nam sed magna mi. praesent odio neque,
Dapibus sit amet suscipit at, tempus sed nibh. Aliquam Sagittis
Ligula in Ligula faucibus cursus. Quisque vulputate Pellentesque
Facilisis.
</p>
</div>

<div>
<p style= "Font-weight:bold" >
Consectetur adipiscing elit. Praesent bibendum Eros AC
Nulla. Integer vel lacus ac neque viverra.
</p>
<p>
Vivamus euismod euismod sagittis. Etiam cursus neque Non lectus
Mattis Cursus et a libero. Vivamus condimentum hendrerit Metus,
A sollicitudin magna vulputate EU. Donec sed tincidunt
Lectus. Donec tellus lectus, fermentum sit amet Porta,
Rhoncus ac mi. Quisque placerat auctor Justo, a egestas Urna
Tincidunt eleifend.
</p>
</div>

<div>
<p style= "Font-weight:bold" >
Non lectus Lacinia Egestas. Nulla hendrerit, Felis quis
Elementum Viverra, Purus felis egestas magna.
</p>
<p>
Aenean elit Lorem, Pretium vitae dictum in, fermentum consequat
Dolor. Proin Consectetur Sollicitudin Tellus, non elementum
Turpis Pharetra Non. Sed quis tellus quam.
</p>
</div>
</div>

<a class= "Forward" >next</a>

<div class= "Slidetabs" >
<a href= "#" ></a>
<a href= "#" ></a>
<a href= "#" ></a>
</div>
<div style= "clear:both;margin:30px 0 0;text-align:center;" >
<button onclick= ' $ (". Slidetabs"). Data ("slideshow"). Play (); ' >Play</button>
<button onclick= ' $ (". Slidetabs"). Data ("slideshow"). Stop (); ' >Stop</button>
</div>
<script language= "JavaScript" >
$ (function () {
$ (". Slidetabs"). Tabs (". Images > div", {
Enable "cross-fading" effect
Effect: ' fade ',
Fadeoutspeed: "Slow",
Start from the beginning on the Last tab
Rotate:true
Use the slideshow plugin. It accepts its own configuration
}). slideshow ();
});
</script>
</body>

Css

Copy Code code as follows:

/* Container for slides * *
. images {
Background: #fff repeat-x;
border:1px solid #ccc;
position:relative;
height:300px;
width:560px;
Float:left;
margin:15px;
Cursor:pointer;
/* CSS3 tweaks for modern browsers * *
-moz-border-radius:5px;
-webkit-border-radius:5px;
-moz-box-shadow:0 0 25px #666;
-webkit-box-shadow:0 0 25px #666;
}
/* Single Slide * *
. Images Div {
Display:none;
Position:absolute;
top:0;
left:0;
margin:7px;
padding:15px 30px 15px 15px;
height:256px;
font-size:12px;
}
/* Header * *
. Images H3 {
font-size:22px;
Font-weight:normal;
margin:0 0 20px 0;
Color: #456;
}
/* Tabs (those little circles below slides) * *
. slidetabs {
Clear:both;
margin-left:310px;
}
/* Single TAB * *
. slidetabs a {
width:8px;
height:8px;
Float:left;
margin:3px;
Background:url (./navigator.png) 0 0 no-repeat;
Display:block;
font-size:1px;
}
/* mouseover State * *
. slidetabs A:hover {
Background-position:0 -8px;
}
/* Active State (Current page state) * *
. slidetabs A.current {
Background-position:0 -16px;
}
/* Prev and Next buttons * *
. Forward,. Backward {
Float:left;
margin-top:140px;
Background: #fff URL (./hori_large.png) no-repeat;
Display:block;
width:30px;
height:30px;
Cursor:pointer;
font-size:1px;
Text-indent:-9999em;
}
/* Next */
. forward {background-position:0 -30px; clear:right;}
. forward:hover {background-position:-30px-30px}
. forward:active {background-position:-60px-30px}
* Prev * *
. backward:hover {background-position:-30px 0;}
. backward:active {background-position:-60px 0;}
/* Disabled navigational button. Is isn't needed when tabs are
Configured with Rotate:true * *
. Disabled {
Visibility:hidden!important;
}

PS: Use some pictures

Instance JS

Copy Code code as follows:

$ (function () {
$ (". Slidetabs"). Tabs (". Images > div", {
Enable "cross-fading" effect
Effect: ' fade ',
Fadeoutspeed: "Slow",
Next: '. Forward ',
Prev: '. Backward ',
Start from the beginning on the Last tab
Rotate:true
Use the slideshow plugin. It accepts its own configuration
}). slideshow ();
});

This JS in the same HTML
• Configuration
A full list of configuration options for the slide plugin.

Property	Default Value	Description
Next	'. Forward '	The "next tab" action of the element that the selector makes should be bound. If you instantiate multiple slides on the same page you need to attach all the slide elements (tags/panes/Next & prev action) in a common wrapper element. This logic follows the same principle as an instance of creating multiple tabs. prev
prev	`'. Backward ' The`
disabledclass	' disabled '	CSS class name ' disabled ' prev next previous page ' disabled '.
autoplay	false "	The real then the tab will Automatically advance to the next tab to implement automatic "play" slides. This is convenient to make rotate properties tab.
autopause	true	real autoplay feature will be paused.
interval	`3000`	time ( Automatically goes to the tab between the two units in milliseconds. Only if this option is valid AutoPlay autoplay
Clickable	True	When set to真正的然后选项卡将自动推进到下一个选项卡通过单击可见的窗格。

JavaScript API

Method	return value	Description/Example
Getconf	Object	since 1.2.0 . Returns the configuration object for this plug-in
Gettabs	Tabs	since 1.2.0 . Returns a reference to this label API .
Play	`API`	Start playing the slide show.
Pause	`API`	Pause the slide. Playback will recover the mouse from the tabs, panes and navigation buttons.
Stop	`API`	Stop the slide. This can only be recovered by calling 方法。 this play

Event

Make sure you have read about the event jquery tool . All event listeners receive this event object as the first argument.

Events	Trigger Time
Onbeforeplay	Play before you start. Returnfalse 在回调防止回放开始。
Onplay	When playback begins.
Onbeforepause	Pause in playback. Returnfalse 在回调防止回放开始。
OnPause	When playback is paused.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More