Toggleable Tabs - Bootstrap Jake Spurlock

Tabbable tabs were introduced in Chapter 3. By combining a few data attributes, you can easily create a tabbed interface (Figure 4-4). To do so, create the nav interface, and then wrap the content of the tabs inside a <div> with a class of .tab-content:

<ul class="nav nav-tabs">

<li><a href="#profile" data-toggle="tab">Profile</a></li>

<li><a href="#messages" data-toggle="tab">Messages</a></li>

<li><a href="#settings" data-toggle="tab">Settings</a></li>

</ul>

<div class="tab-content">

</div>

Figure 4-4. Toggleable tabs

Toggleable Tabs | 81

Usage

To enable the tabs, you can use the Bootstrap Data API or use JavaScript directly. With the Data API, you need to add data-toggle to the anchors. The anchor targets will activate the element that has the .tab-pane class and relative ID. Alternatively, data-target="" may be used instead of href="#" to apply the same action. Here is one way to enable tabs:

$('#myTab a').click(function (e) { e.preventDefault();

$(this).tab('show');

})

Here’s an example of different ways to activate tabs:

$('#myTab a[href="#profile"]').tab('show'); // Select tab by name

$('#myTab a:first').tab('show'); // Select first tab

$('#myTab a:last').tab('show'); // Select last tab

$('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)

Events

Tabs panes have two different events that can be hooked into, as shown in Table 4-5.

Table 4-5. Toggleable tab events Event Description

show This event fires on tab show, but before the new tab has been shown. Use event.target and event.related Target to target the active tab and the previous active tab (if available), respectively.

shown This event fires on tab show after a tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available), respectively.

Here’s a code example of a shown method:

$('a[data-toggle="tab"]').on('shown', function (e) { e.target // activated tab

e.relatedTarget // previous tab })

For information about the .on method, refer to the jQuery website.

Tooltips

Tooltips (Figure 4-5) are useful when you need to describe a link or (used in conjunction with the <abbr> tag) provide the definition of an abbreviation. The plugin was originally based on the jQuery.tipsy plugin written by Jason Frame. Tooltips have since been up‐

dated to work without images, animate with a CSS animation, and work with the Boot‐

strap JavaScript API.

Figure 4-5. Tooltip placement

Usage

To add a tooltip, add rel="tooltip" to an anchor tag. The title of the anchor will be the text of a tooltip. The following two examples show how to do this in the Bootstrap Data API and JavaScript, respectively:

<a href="#" rel="tooltip" title="This is the tooltip">Tooltip Example</a>

$('#example').tooltip(options)

Options

Like all of the plugins, there are options that can be added via the Bootstrap Data API or invoked via JavaScript. All options need to have data- prepended to them. So, the title option would become data-title (see Table 4-6).

Table 4-6. Tooltip options

Name Type Default Description

animation Boolean true Applies a CSS fade transition to the tooltip.

html Boolean false Inserts HTML into the tooltip. If false, jQuery’s ^text method will be used to insert content into the dom. Use text if you’re worried about XSS attacks.

placement string/function ‘top’ Specifies how to position the tooltip (i.e., top, bottom, left, or right).

selector string false If a selector is provided, tooltip objects will be delegated to the specified targets.

title string/function '' The title option is the default title value if the title attribute isn’t present.

trigger string ‘hover’ Defines how the tooltip is triggered: click, hover, focus, or manually.

delay number/object 0 Delays showing and hiding the tooltip in ms—does not apply to manual trigger type.

If a number is supplied, delay is applied to both hide/show. Object structure is: delay:

{ show: 500, hide: 100 }

Methods

Here are some useful methods for tooltips.

Options

Attaches a tooltip handler to an element collection:

Tooltips | 83

$().tooltip(options)

Show

Reveals an element’s tooltip:

$('#element').tooltip('show')

Hide

Hides an element’s tooltip:

$('#element').tooltip('hide')

Toggle

Toggles an element’s tooltip:

$('#element').tooltip('toggle')

Destroy

Hides and destroys an element’s tooltip:

$('#element').tooltip('destroy')

Popover

The popover (see Figure 4-6) is a sibling of the tooltip, offering an extended view com‐

plete with a heading. For the popover to activate, a user just needs to hover the cursor over the element. The content of the popover can be populated entirely using the Boot‐

strap Data API. This method requires a tooltip.

Figure 4-6. Popover placement

Use the following code for popover placement:

<a href="#" class="btn" rel="popover" title="Using Popover"

data-content="Just add content to the data-content attribute.">Click Me!</a>

Usage

To enable the popover with JavaScript, use the .popover() function, passing in any options that you might need:

$('#example').popover(options)

Options

All options can be passed via the Bootstrap Data API, or directly with JavaScript (see Table 4-7).

Table 4-7. Popover options

Name Type Default Description

animation Boolean true Applies a CSS fade transition to the tooltip.

html Boolean false Inserts HTML into the popover. If false, jQuery’s text method will be used to insert content into the dom.

Use text if you’re worried about XSS attacks.

placement string function right

(i.e., click, hover, focus, manual) title string function

'' Default title value

number object 0 Delays showing and hiding the popover in ms—does

not apply to manual trigger type. If a number is supplied, delay is applied to both hide/show. Object structure is: delay: {show: 500, hide:

100 }.

Popover | 85

Methods

Here are some useful methods for popovers.

Options

Initializes popovers for an element collection:

$().popover(options)

Show

Reveals an element’s popover:

$('#element').popover('show')

Hide

Hides an element’s popover:

$('#element').popover('hide')

Toggle

Toggles an element’s popover:

$('#element').popover('toggle')

Destroy

Hides and destroys an element’s popover:

$('#element').popover('destroy')

Alerts

With the Data API, it is easy to add dismiss functionality to alert messages (Figure 4-7).

Figure 4-7. Error alert message

Usage

You can close an alert manually with the JavaScript .alert() method or use data at‐

tributes in conjunction with an anchor or button.

Here is how to dismiss via JavaScript:

$(".alert").alert()

Here is how to dismiss via Data API:

在文檔中 Bootstrap Jake Spurlock (頁 97-103)