Chrome Tabs Web Browser Implementation

Chrome Icon This project was originally developed for Electron, but it can also be made to work with <iframe> tags in web browsers like Chrome, Safari, Firefox.

Instructions

Add Styles

<link rel="stylesheet" href="https://cdn.rawgit.com/src-works/chrome-tabs/1.0.0/src/css/base.min.css" />
<link rel="stylesheet" href="https://cdn.rawgit.com/src-works/chrome-tabs/1.0.0/src/css/dark.min.css" />
<style>
  html,
  body {
    margin:                     0;
    padding:                    0;
    overflow:                   hidden;
    background-color:           #e6e6e6;
  }
</style>

Add Scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/src-works/chrome-tabs/1.0.0/dists/js/bundle.min.js"></script>

Note: Any version of jQuery >= v2.2.4 will do fine.

Add HTML Markup

<div class="chrome-tabs"></div>

If you want the dark theme, add the -dark-theme class.

<div class="chrome-tabs -dark-theme"></div>

Add jQuery Snippet

<script>
  jQuery(document).ready(function($) {
    $('.chrome-tabs').chromeTabs();
  });
</script>

Review Documentation

See: jQuery Wrapper Documentation


Project Overview

Chrome Tabs

A tabbed interface (like Google Chrome). Designed for Electron, but also browser-compatible with a jQuery wrapper. This serves as a great example […]
Share This
Posted in: