BootstrapandJQuery
JogeshK.Muppala
BootstrapandJavaScript• Bootstrap’sJavaScriptsupportisthroughJSPlugins– Pluginswri=enbasedonJquery– Pluginscanbeindividuallyincluded
2
BootstrapandJavaScript
3
JavaScript
JQuery
BootstrapJSComponents
BootstrapJSComponents• JScomponentscanallbeusedwithoutwriDngasinglelineofJavaScript:– data-*a=ributes(e.g.,data-toggle,data-spy)– StraighLorwardapproachtouseplugins– Wewillexplorethisapproachinthismodule
• FullJSAPIavailableifneeded– NeedtoknowJQuerysyntaxandJavaScript
4
JQuery• LightweightJavascriptlibrary• Feature-rich:
– HTML/DOMmanipulaDon– CSSmanipulaDon– HTMLEventmethods– EffectsandanimaDons– AJAX
• BootstrapJScomponentsbuilduponJQuery
5
JQuerySyntax• $(selector).acDon()– $:define/accessJQuery– (selector):toqueryandfindHTMLelements– acDon():acDontobeperformedontheelement(s)– e.g.,$(“p”).hide(),$(“#mycarousel”).carousel(‘pause’)
6
BootstrapJQueryExample<script>$(document).ready(funcDon(){ $('[data-toggle="toolDp"]').toolDp();});
</script>
7
JQuerySelectors• AnyHTMLelemente.g.,“p”,“bu=on”etc.• Usingan#id,e.g.,“#myCarousel”• Class,e.g.,“.btn”,“.btn.btn-default”• A=ribute,e.g.,“[href]”,“[data-toggle=“toolDp”]”• Currentelement:$(this).• Andalotmore...
8
JQueryEvents• User’sinteracDonsonawebpagecausingDOMevents:
– Mouse:click,dblclick,mouseenter,mouseleave– Keyboard:keypress,keydown,keyup– Form:submit,change,focus,blur– Document,Window:load,resize,scroll,unload
• JQueryEventMethods:e.g.,ready(),click(),dblclick(),mousedown(),on()
9
Example:BootstrapCarousel• DataA=ributes– data-slide=“prev|next”– data-slide-to=“0|1|2|…”– data-ride=“carousel”– data-interval=5000
10
Example:Carousel• JavaScriptbasedcontrol:– $(‘.carousel’).carousel();– e.g.
$(‘.carousel’).carousel({interval:2000});
11
Example:Carousel• Othercontrols:– .carousel(‘cycle’):cycleitemsleytoright– .carousel(‘pause’):stopsthecarousel– .carousel(number):cyclesthecarouseltoaparDcularframenumberspecified
– .carousel(‘prev’):previousitem– .carousel(‘next’):nextitem
12
Example:Carousel• Events:
– slide.bs.carousel:fireswhentheslideinstancemethodisinvoked
– slid.bs.carousel:firedwhenthecarouselhascompleteditsslidestransiDon
– Usewiththe.on()method:$(“#myCarousel”).on(‘slide.bs.carousel’,funcDon(){//dosomething})
13
Exercise:BootstrapandJQuery• Addtwobu=onstotheCarouseltopause/resumetheslidetransiDon
• AcDvatethebu=onsusingJavaScript
14