Download

Tokenize2 (currently v{%version%}) has a few easy ways to quickly get started, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.

Tokenize2

Compiled and minified CSS, JavaScript. No docs or original source files are included.

Download Tokenize2

Source code

Source code of CSS and JavaScript files. All files are not compressed and can be edited.

Source zip Source tar.gz

Install with npm

You can also install and manage Tokenize2's CSS and JavaScript using npm:

$ npm i tokenize2

What's included

Tokenize2 is downloadable in two forms, within which you'll find the following directories and files, logically grouping common resources and providing both compiled and minified variations.

jQuery required

Please note that Tokenize2 require jQuery to be included in your page.

Compiled Tokenize2

Once downloaded, unzip the compressed folder to see the structure of (the compiled) Tokenize2. You'll see something like this:

tokenize2/
├── tokenize2.min.css
└── tokenize2.min.js

Tokenize2 Source code

The Tokenize2 source code download includes the precompiled CSS and JavaScript and some demo version. More specifically, it includes the following and more:

tokenize2/
    ├── demo/
    │   ├── demo.css
    │   ├── index.php
    │   ├── names.json
    │   └── remote.php
    ├── dist/
    │   ├── tokenize2.min.css
    │   └── tokenize2.min.js
    ├── LICENSE
    ├── README.md
    ├── tokenize2.css
    └── tokenize2.js

How to use

See in this section how to use Tokenize2 on your website.

To start, you have to include required jQuery and jQuery-UI librairies.

<script src="//code.jquery.com/jquery-2.2.4.min.js"></script>

Tokenize2 was created for Bootstrap Framework, so it's highly recommended to include Bootstrap CSS file.

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

Next just include the Tokenize2 CSS and Javascript files.

<script src="tokenize2.min.js"></script>
<link href="tokenize2.min.css" rel="stylesheet" />

Be sure that Tokenize2 CSS file is included after Bootstrap CSS file, because some Bootstrap classes are overrided by Tokenize2.

Finally add a <select> form control to your code and call the plugin.

<select class="tokenize-demo" multiple>
    <option value="Africa">Africa</option>
    <option value="Americas">Americas</option>
    <option value="Asia">Asia</option>
    <option value="Europe">Europe</option>
    <option value="Oceania">Oceania</option>
</select>
<script>$('.tokenize-demo').tokenize2();</script>

Attribute multiple is required

Please don't forget to add attribute multiple to your <select> control or Tokenize2 will not work properly.