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