Advertisement
  1. Web Design
  2. Bootstrap 3
Webdesign

Bootstrap 3 Succinctly: Changed JavaScript Features

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called Bootstrap 3 Succinctly.
Bootstrap 3 Succinctly: Additional Changed Components Features
Bootstrap 3 Succinctly: Customizing Bootstrap 3

When it comes to JavaScript in BS3, not much has changed; the vast majority of the changes we've seen so far have revolved around the CSS and components sections. There’s a reason for this.

Most of BS2's (and for that matter, BS3's) JavaScript functionality comes in the form of data attributes. In most of the cases, we've already seen how to use these in the various sections on components, which really leaves very little that's specific to JavaScript only.

In this tutorial, therefore, I’ll just briefly run through most of what's available, and where there is no other description elsewhere in the series, show a brief example on how to use the API available.

The JS facilities available in BS2 and BS3 are very extensible, and even a full series of tutorials probably couldn't cover everything that's possible. I therefore strongly encourage you to go to the Bootstrap website and read through the section on JavaScript.

Modals

The first thing that anyone mentions when the subject of JavaScript comes up in Bootstrap is the modal dialog boxes—and it's little surprise.

BS3's modal boxes are one of the easiest implementations (and one of the richest) seen in any of the modern browser HTML5 frameworks.

Using them is easy, but unfortunately, does require quite a lot of markup.

The following code gives you a very basic example:

Modal example produced by sample
Modal example produced by sample

In order to show a modal, you first need to have a trigger target. In the sample above, this is the button marked Show Modal Dialog. For a trigger action to work it must have a toggle and target data attribute assigned to it, and the toggle must have the value "modal" to show that it targets a modal dialog. The target must have the ID selector of the outermost <div> assigned to it.

In this sample, the outermost <div> has an ID="myModal" on it, which means the data attribute for target should have #myModal as its value.

Your trigger doesn't have to be a button; it can be anything that can accept (or is set up to accept) a mouse click, as long as the toggle and target data attributes are provided.

Once we get into the modal itself, you'll see the structure consists of a number of quite deeply nested <div>s. Because of this nesting, it's recommended that you create and place your dialog/modal definitions as close to the body root as possible; if you do not, then there is a chance that other components and HTML structures could cause layout problems that you did not anticipate.

You'll also notice that again, there is a common theme of marking things up to make them friendly to screen readers, and again, I can't stress this enough: you should make every effort to make sure your markup is as friendly to accessibility tools as possible.

A modal starts with an outer <div> and the class modal applied to it. Optionally, you can also add fade, which will give the modal a nice smooth transition when showing and hiding. This outer <div> should be the one on which you set your Z-Order and anything else in the way of global modal customizations you wish to make.

The next <div> in should have a class of modal-dialog added to it. That <div> should then be followed immediately by a third <div> with the class of modal-content assigned to it. It's inside this third <div> where you actually place your modal content definition.

Once you have the modal content shell defined, you can then place in three further <div> elements with the following classes: modal-header, modal-body, and modal-footer. These three inner sections should NOT be nested, but rather added to the markup as siblings of each other, and are used to define the content for the three main sections of the dialog.

You can see from the code in the sample above that we include a closing cross, as we did for alert boxes. The only difference between this closing cross and the one we saw previously is that the dismiss data attribute has a value of modal and not alert. Any clickable element placed within the inner modal markup that has this data attribute, with this value, will close the dialog when clicked.

Apart from the close icon, the rest of the modal’s inner content is just normal BS3 markup and CSS. Anything you can use elsewhere you can use inside a modal, and if it's too tall for the screen, you'll get an inner container that automatically switches to a scrollable element.

There are also two optional width sizes; these are added to the inner modal-dialog <div> and are modal-lg and modal-sm. The large size class expands the width of the modal to half the screen width (ideal for tables and lists), whereas the small size shrinks the default width to approximately half of its original size (ideal for things like yes/no prompts).

You can also initialize the modal using the JavaScript API in a standard jQuery fashion; if you want to alter the default option’s behavior, then using the JQ constructor is the only way to do it.

The options that can be changed are as follows:

  • backdrop: Boolean true or false to include or not include the shaded background on the page when the modal is shown; if the value static is specified, then the background is shown but does NOT close the modal when clicked on, as it does if true is used.
  • keyboard: Boolean true or false; allows or does not allow the escape key to close the modal.
  • show: Boolean true or false, automatically shows or does not show the dialog as soon as it’s initialized.
  • remote: String containing a url to get the inner content for the dialog body; if this is supplied, then the dialog will ask the url to supply a chunk of HTML to be used in the body of the modal.

There are also a number of events that are raised for certain actions, but they are beyond the scope of this tutorial.

Tabs

If you recall, back in the section on basic navigation, I mentioned that the tab component can be wired up with extra markup to actually handle the swapping of content panes for you.

To mark-up a set of tabs that change automatically using JavaScript, you first need to create a <ul> in the same manner as shown in the navigation components section. This <ul> must have <a> elements embedded inside each of its <li> elements, with the href of each anchor pointing to the id of each associated <div> set up to hold a tab panel. You also need to make sure that each anchor has a toggle data attribute assigned to it and that its value is set to tab.

Once you've created the navigation set, you then need to create an outer <div> and assign the class tab-content to it. Inside of this <div>, you then need to create several separate sibling <div>s, each with a class of tab-pane and an id attribute matching the associated tab in the navigation set. Optionally, you can also add fade in to fade tabs when they change, and active to mark which of the tabs is currently been shown.

The following code shows an example of this:

Tab set produced by code sample
Tab set produced by code sample

The tab control doesn't have a constructor that takes options the way modal does, but it does have an API call so that you can tell which tab to show programmatically. To do this, you just need use jQuery to select the appropriate selector, and then call tab('show') on it. When this is done, your tabs will automatically make the referenced tab the selected one. As with modals (and others), there are events available to tell you when things change; the details and parameters of each call can be found in the BS3 docs.

Tooltips and Popovers

Everyone loves tooltips—simple little pop-up tags that can be used for help and many other simple, descriptive tasks.

Using a tooltip in BS3 is incredibly easy. Simply assign a data attribute of toggle with the value tooltip to any standard HTML element that you wish the tooltip to display for. To define the text for the tooltip, add a title attribute containing the desired text, and optionally, add a data attribute called placement containing the value left, top, bottom, or right as required, depending on which direction you would like the tooltip to show.

The following code will create a simple button with a tooltip attached to its top:

There is one small caveat that applies to tooltips, but does not apply to any other element: you need to initialize tooltips yourself. You can pass various options into them at the same time (just as with modals), but you MUST initialize them, or your tooltips will not appear.

To initialize the button shown in the previous example, place the following line of JavaScript somewhere in your page so that it's run once the DOM is ready and the button is created:

It's entirely up to you how you select each of your buttons. You could, for example, select them all via their element type, but you must call tooltip() on every element that has a tooltip attached.

If everything works as expected, you should see something like this:

Button with accompanying tooltip
Button with accompanying tooltip

Close behind the humble tooltip comes the popover, and like the tooltip, it must be initialized manually with a call to popover(). The main difference between a popover and a tooltip is that popovers can hold more contents than a tooltip.

A tooltip typically only has a simple, single line of text, whereas a popover is larger and can contain multiple HTML elements, ranging from paragraphs to buttons and images.

The second difference is that the element has to be clicked before a popover will display, whereas a tooltip is automatic upon hover.

You create a popover in much the same way as a tooltip, except that the popup content is defined inside a data attribute called content, and the title attribute is used to give the popover a mini title area (similar to the way the header area is used on a panel component). The following code shows how to define a simple popover:

As with the tooltip, somewhere in your document start-up, you also need to ensure you initialize the component using something like:

Also as with the tooltip, you can pass an object containing options in here. There are many available, so again, I'd encourage you to read the BS3 docs to learn them all.

If everything worked, you should be able to render your page and see this:

BS3 button with a popover attached
BS3 button with a popover attached

Collapsible Panels

One of the things removed in BS3, sadly, was the readymade accordion component. In its place, however, is something better: the collapsible panel.

Using these panels, it's still just as easy to create a standard accordion, but they are now also separately useable, standalone components, allowing you to do things like create folding information areas, toolbars, and much more.

One thing to note, however: if you're doing a custom build, you must also make sure that you include the transition helper JavaScript plugin. The BS3 docs have more information that you’ll need if you are doing a custom build.

To create an accordion from collapsible panels, you simply have to create an outer <div> with a class of panel-group and give it an id. Then, inside of that, you need a series of <div> tags marked up as shown previously in the section on panel components, with each panel div being a single self-contained panel.

Once you have your panels laid out, you just need to add a panel-title inside a panel-header. This header should contain an <a> tag with two data attributes assigned: one called data-toggle, and one called data-parent.

The toggle attribute should have a value of collapse, and the parent attribute should hold the id of the outer <div> holding the panel group, and an href with the id of the target panel body that should be the object of the collapsing behavior. Each of the target panels should have the classes panel-collapse and collapse assigned to them.

The following code shows how to achieve this:

Accordion replacement produced by sample
Accordion replacement produced by sample

As mentioned, panels don't need to be grouped; they can be used in a singular fashion with just a single element as the trigger for the folding to happen. For example, if you want to collapse a panel using a simple button, just ensure that your button has a data attribute of toggle with the value collapse, and a data attribute called target with the selector for the target panel as its value.

Carousel

To round this tutorial off, the last JavaScript plugin I'm going to introduce is the newly designed carousel. BS2 had a carousel, but like the accordion, it’s now been removed and greatly simplified to make it easier to use.

Typically, the carousel plugin is used at the top of a page to provide a rotating banner of images, and in BS2, this was the only thing that the carousel could be used for. In BS3, however, any content that can be placed inside the carousel’s panels will be rotated, including images, text, svg, and much more.

The following code shows a basic example of how to construct a carousel:

Carousel produced by code sample
Carousel produced by code sample

There are a few more low-key JavaScript objects, but most of them are not directly usable from normal user code, and are generally only used in special circumstances. The BS3 docs cover everything I've missed, and if you're going to dig deeply into the JavaScript facilities available, a long read and an understanding of how everything is hooked together is definitely a requirement.

One final note: BS3 JavaScript plugins are nothing more than regular jQuery plugins (BS uses jQuery under the hood). This means that it should be very easy to take your favorite jQuery plugin from places like unheap.com and adapt them to work with BS3 quite easily. Don’t forget there is still a huge number of add-ons available out there already, especially to be used with the framework, most of which are only a Google search away.

This tutorial represents a chapter from Bootstrap 3 Succinctly, a free eBook from the team at Syncfusion.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.