Home > Developer > JavaScript
modal dialog box, tag Toggle, Tooltio, popup, Cue message, button group, folding, slide
1. Modal dialog box
Trigger button + dialog box
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<script src= "Http://libs.baidu.com/jquery/1.9.0/jquery.js" ></script>
<script src= "Http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.js" ></script>
<link href= "Http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.css" rel= "stylesheet" >
<body>
<button class= "btn btn-primary btn-lg" data-toggle= "modal" data-target= "#myModal" > Click Trigger modal dialog Box </button>
Data-toggle= "Modal" trigger
Data-target= "#myModal" is used to correspond to the corresponding dialog box ID
<divclass= "Modal Fade"Id= "Mymodal" tabindex= "-1" role= "dialog" aria-hidden= "true" >//Trigger Class
<divclass= "Modal-dialog"> Center dialog box
<div class= "modal-content" > Settings content
<div class= "Modal-header" >
<button type= "button"class= "Close" data-dismiss= "modal" >×</button>
</div>
<div class= "Modalbody" > modal dialog box contents
</div>
<div class= "Modal-footer" >
<button type= "button" class= "btn Btn-default" data-dismiss= "modal" >Close</button>
<button type= "button" class= "btn btn-primary" >save change</button>
</div>
</div>
</div>
</div>
</body>
2. Label switching
<ul class= "nav nav-tabs">
<li class= "Active"><ahref= "#home"data-toggle= "tab"> Home </a></li>
<li><a href= "#profile" data-toggle= "tab" > Latest </a></li>
<li><a href= "#hot" data-toggle= "tab" > Popular </a></li>
<li><a href= "#settings" data-toggle= "tab" > Ranking </a></li>
</ul>
<div class= "tab-content">
<div class= "Tab-pane Active"id= "Home">
<p> home-------</p>
</div>
<div class= "Tab-pane" id= "Profile" >
<p> Latest +++++++</p>
</div>
<div class= "Tab-pane" id= "hot" >
<p> Popular-------</p>
</div>
<div class= "Tab-pane" id= "Settings" >
<p> Rank +++++++</p>
</div>
</div>
3.Tooltio
The mouse is placed on the target to show extra tips
<a href= "#" data-toggle= "tooltip" data-placement= "left" title= "extra tip content" class= "btn btn-primary"> ToolTip </a>
$ (Element). tooltip (); Trailing add takes effect
4. Popup Box
<a href= "javascript:void (0);" class= "btn btn-danger btn-lg" data-toggle= "PopOver" data-content= "pop-up box main content" data-original-title= "popover title" data-placement= "right" ></a>
$ (Element). PopOver (Options)
5. Prompt Information
<div class= "alert Alert-danger fadein" > Warning, server collapsed!!
<a class= "Close" data-dismiss= "alert" href= "#" >X</a> Close Event
</div>
Continue to perform tasks after closing
$ (' #myAlert '). Bind (' Closed.bs.alert ', function () {-----------})
Closed.bs.alert: Triggers this event when a warning is closed
6. Button
The loading state of the button to prevent multiple commits, in conjunction with the AJAX request
<button class= "btn btn-primary" id= "loading-btn" data-loading-text= "Login ...">
Login
</button>
$ (' #loading-btn '). Click (function () {
var btn=$ (this);
Btn.button (' loading ');
})
State Settings for button groups
<div class="Btn-group">
<button type= "button" class= "Btn Btn-default" > Top </button>
<button type= "button" class= "btn Btn-default" > Neutral </button>
<button type= "button" class= "Btn Btn-default" > Stepping </button>
</div>
<div class="Btn-group" data-toggle= "buttons">
<button type= "button" class= "Btn Btn-default" >
<input type= "checkbox" > top </button>
<button type= "button" class= "Btn Btn-default" >
<input type= "Radio" > Neutrality </button>
<button type= "button" class= "Btn Btn-default" >
<input type= "checkbox" > Step </button>
</div>
CheckBox : Check radio: Radio
7. Folding
Single fold
<button class= "btn btn-default" data-toggle= "collapse" data-target= "#demo" >
Collapse title
</button>
<div id= "demo" class= "collapse in" >
Collapse Content
</div>
multiple folds Note the name corresponds
<div class= "Panel-group" id= "accordion">
<div class= "Panel Panel-default" >
<div class= "Panel panel-heading" >
<a href= "#collapseOne" data-toggle= "collapse" data-parent= "#accordion">//Must be with trigger Data-toggle
Title One
</a>
</div>
<div id= "collapseone" class= "Panel-collapse collapse in">
<div class= "Panel-body" >
Collapse Content One
</div>
</div>
</div>
<div class= "Panel Panel-default" >
<div class= "Panel panel-heading" >
<a href= "#collapseTwo" data-toggle= "collapse" data-parent= "#accordion" >
Title II
</a>
</div>
<div id= "Collapsetwo" class= "Panel-collapse collapse in" >
<div class= "Panel-body" >
Folding Content Two
</div>
</div>
</div>
</div>
8. Slideshow
Picture content toggle and auto Play
Slideshow consists of: Controller, content, marker
<div class= "Carousel Slide" data-ride= "Carousel" >
<!--markers--
<ul class= "Carousel-indicators">
<li data-target= "#carousel-example-generic" data-slide-to= "0" class= "active" ></li>
<li data-target= "#carousel-example-generic" data-slide-to= "1" ></li>
<li data-target= "#carousel-example-generic" data-slide-to= "2" ></li>
</ul>
<!--Content--
<div class= "Carousel-inner">
<div class= "Item Active">
</div>
<div class= "Item" >
</div>
<div class= "Item" >
</div>
</div>
<!--Controller--
<a class= "leftcarousel-control" href= "#carousel-example-generic" data-slide= "prev" >
<span class= "Glyphicon glyphicon-chevron-left" ></span>
</a>
<a class= "rightcarousel-control" href= "#carousel-example-generic" data-slide= "next" >
<span class= "Glyphicon glyphicon-chevron-right" ></span>
</a>
</div>
Javascript effects in Bootstrap
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
