Home > Others

JQuery Tools tab (slide)

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

Html Copy codeThe Code is as follows: <! DOCTYPE html>
<Html>
<Head>
<Title> jQuery Tools standalone demo </title>
<! -- Include the Tools -->
<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"/>
</Head>
<Body> <! -- "Previous slide" button -->
<A class = "backward"> prev </a>
<! -- Container for the slides -->
<Div class = "images">
<! -- First slide -->
<Div>
<H3> First pane <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>
<! -- Second slide -->
<Div>
<H3> Second pane <P style = "font-weight: bold">
Consectetur adipiscing elit. Praesent bibendum eros ac
Nulla. Integer vel lacus ac neque viverra.
</P>
<P>
Vivamus 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 non,
Rhoncuac mi. Quisque placerat auctor justo, a egestas urna
Tincidunt eleifend.
</P>
</Div>
<! -- Third slide -->
<Div>
<H3> Third pane <P style = "font-weight: bold">
Non lectus lacinia egestas. Nulla hendrerit, felis quis
Elementum viverra, purus felis egestas magna.
</P>
<P>
Aenean elit lorem, presponvitae dictum in, fermentum consequat
Dolor. Proin consectetur sollicitudin tellus, non elementum
Turpis pharetra non. Sed quis tellus quam.
</P>
</Div>
</Div>
<! -- "Next slide" button -->
<A class = "forward"> next </a>
<! -- The tabs -->
<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 after the last tab
Rotate: true
// Use the slideshow plugin. It accepts its own configuration
}). Slideshow ();
});
</Script>
</Body>
</Html>

CssCopy codeThe Code is 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 {
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 not needed when tabs are
Configured with rotate: true */
. Disabled {
Visibility: hidden! Important;
}

PS: images used

Instance jsCopy codeThe Code is as follows: $ (function (){
$ (". Slidetabs"). tabs (". images> div ",{
// Enable "cross-fading" effect
Effect: 'fade ',
FadeOutSpeed: "slow ",
Next: '. forward ',
Prev: '. backward ',
// Start from the beginning after the last tab
Rotate: true
// Use the slideshow plugin. It accepts its own configuration
}). Slideshow ();
});

This is the same as js in html.
• Configuration
Complete list of Slide plug-ins for configuration options.

Attribute Default Value Description
Next '. Forward' The "next tab" action of the element carried by the selector should be bound. If you instantiate multiple slides on the same page, you need to attach all the slide elements (tag/pane/bottom & Previous Page action) in a common package element. This logic follows the same principle as creating instances with multiple tabs. Prev
Prev
 '.backward' The "previous tab" action of the sibling element of the selector should be bound. If you instantiate multiple slides with the same phone number, you need to attach all slide elements (tag/pane/bottom & Previous Page action) in a common package element. This logic follows the same principle as creating instances with multiple tabs.
DisabledClass 'Disabled' CSS class name 'Disabled'Previous PageAndNextElement. For examplePrevious PageThe element is a scroll when there is no 'Disabled 'mentioned earlier.
Autoplay False If this attribute is setRealThe tab automatically advances to the next tab to enable automatic "play" slides. This is easy to useRotateProperties tab.
Autopause True If this attribute is setRealWhen the button for future/previous tab operation is mouseovered and then autoplay The function will be suspended.
Interval 3000 Time (in milliseconds) automatically goes to the tab. Only when this option is validAutomatic playbackIs Enabled or autoplay Method is called.
Clickable True When setRealThe tab is then automatically pushed to the next tab by clicking the visible pane.
JavaScript API
Method Return Value Description/Example
Getconf Object Since 1.2.0. Returned configuration object for this plug-in
GetTabs Tabs Since 1.2.0. Returns an API that references this tag.
Play API Start to play the slides.
Pause API Pause the slides. Playback restores the mouse from the label, pane, and navigation buttons.
Stop API Stop the slide. This can only be restored by calling the play Method.
Event

Make sure you have read about the event jQuery tool. All Event Listeners receive this event object as the first parameter.

Event Trigger time
OnBeforePlay Play the video before it starts. ReturnFalseThe callback prevents playback from starting.
OnPlay When playback starts.
OnBeforePause Pause playing. ReturnFalse The callback prevents playback from starting.
OnPause When playing 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.

Related Keywords:
tivo slide slide advancer slide books slide sorter view slide master com powerpoint slide changer slide library sharepoint 2013

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

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