chrome-tabs

Browserify compatible HTML/CSS and JS chrome tabs implementation

npm install chrome-tabs
4 downloads in the last month

chrome-tabs

Browserify compatible chrome-tabs by Adam Schwartz.

Demo

Requirements

  1. jQuery
  2. brfs transform to inline HTML and CSS resources when browserified:
$ browserify -t brfs chrome-tabs.js > bundle.js

Usage

var chromeTabs = require("chrome-tabs")

// Add chrome tabs CSS to page head
chromeTabs.insertCss()

// Init chrome tabs in the container .chrome-tabs-shell
var $chromeTabsExampleShell = $(".chrome-tabs-shell")

chromeTabs.init({
  $shell: $chromeTabsExampleShell,
  minWidth: 45,
  maxWidth: 180
})

// Add a new tab
chromeTabs.addNewTab($chromeTabsExampleShell, {
  favicon: "http://g.etfv.co/https://www.hubspot.com",
  title: "HubSpot",
  data: {
    timeAdded: +new Date()
  }
})

// Log tab change data to console
$chromeTabsExampleShell.bind("chromeTabRender", function (){
  var $currentTab = $chromeTabsExampleShell.find(".chrome-tab-current")
  if ($currentTab.length && window["console"] && console.log) {
    console.log("Current tab index", $currentTab.index(), "title", $.trim($currentTab.text()), "data", $currentTab.data("tabData").data)
  }
})
npm loves you