Difference between revisions of "MediaWiki: Common.js"

From Chuang Lab
Jump to: navigation, search
Line 2: Line 2:
 
importScript('MediaWiki:Bootstrap.js');
 
importScript('MediaWiki:Bootstrap.js');
 
importScript('MediaWiki:jQuery.js');
 
importScript('MediaWiki:jQuery.js');
 +
$(function () {
 +
var myString = `
 +
<div id="myCarousel" class="carousel slide" data-ride="carousel">
 +
  <!-- Indicators -->
 +
  <ol class="carousel-indicators">
 +
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
 +
    <li data-target="#myCarousel" data-slide-to="1"></li>
 +
    <li data-target="#myCarousel" data-slide-to="2"></li>
 +
  </ol>
 +
 +
  <!-- Wrapper for slides -->
 +
  <div class="carousel-inner">
 +
    <div class="item active">
 +
      <img src="la.jpg" alt="Los Angeles">
 +
    </div>
 +
 +
    <div class="item">
 +
      <img src="chicago.jpg" alt="Chicago">
 +
    </div>
 +
 +
    <div class="item">
 +
      <img src="ny.jpg" alt="New York">
 +
    </div>
 +
  </div>
 +
 +
  <!-- Left and right controls -->
 +
  <a class="left carousel-control" href="#myCarousel" data-slide="prev">
 +
    <span class="glyphicon glyphicon-chevron-left"></span>
 +
    <span class="sr-only">Previous</span>
 +
  </a>
 +
  <a class="right carousel-control" href="#myCarousel" data-slide="next">
 +
    <span class="glyphicon glyphicon-chevron-right"></span>
 +
    <span class="sr-only">Next</span>
 +
  </a>
 +
</div>
 +
`;
 +
 +
  $('#chuang-lab').html(myString);
 +
}());
 +
 
/* DO NOT ADD CODE BELOW THIS LINE */
 
/* DO NOT ADD CODE BELOW THIS LINE */

Revision as of 10:51, 17 May 2018

/* Any JavaScript here will be loaded for all users on every page load. */
importScript('MediaWiki:Bootstrap.js');
importScript('MediaWiki:jQuery.js');
$(function () {
var myString = `
<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="la.jpg" alt="Los Angeles">
    </div>

    <div class="item">
      <img src="chicago.jpg" alt="Chicago">
    </div>

    <div class="item">
      <img src="ny.jpg" alt="New York">
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
`;

  $('#chuang-lab').html(myString);
}());

/* DO NOT ADD CODE BELOW THIS LINE */