Skip to content

Instructions

Jump to bottom
Ciprian Popescu edited this page Mar 30, 2021 · 1 revision

Install & Embed

Download

You can always download the latest published release, which you can find on GitHubs Release Page. Or just download the Master Branch as .TAR or as .ZIP archive. Attention: The master branch MAY contains unreleased changes or a unreleased version!

Package Manager

You can also use one of the following Package Managers, if you have them installed of course. Please Note: The tail.select script doesn't support nodeJS nor any other backend JavaScript engine. But it is compatible with AMD, tested with requireJS at least.

NPM

The NPM Wombat loves you <3 (Visit tail.select on npmjs.com)

npm install tail.select --save

YARN

The YARN Cat loves you too <3 (Visit tail.select on yarnpkg.com)

yarn add tail.select --save

Bower

The Bower bird has been eaten by YARN:

bower install tail.select --save

CDN

You can also use the awesome CDN-Services from jsDelivr and UNPKG!

jsDelivr

https://cdn.jsdelivr.net/npm/tail.select@latest/

UNPKG

https://unpkg.com/tail.select/

Embed

We recommend to load the Stylesheets css/tail.select-default.css (or the desired theme / color scheme) within the Document Header (between <head> and </head>) and the JavaScript file directly after the starting <body> Tag. And don't forget to embed the desired Language-File (AFTER the main JavaScript file) too!

Note: If you want to use the jQuery or MooTools edition, don't forget to load the respective library BEFORE you embed the js/tail.select.min.js file!

Files

The tail.select package contains different JavaScript files. It is always recommended to load the the minified versions on production pages to increase the loading time and performance!

  • js/tail.select(.min).js The main JavaScript with en language strings only.
  • js/tail.select-full(.min).js The main JavaScript with ALL language strings.
  • js/tail.select-es6(.min).js An experimental ECMAScript 2015 / ES6 Module version.
  • langs/tail.select-all(.min).js Just ALL language strings itself.
  • langs/tail.select-{locale}.js Just the {locale} language strings.

Basic Example

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />

        <link type="text/css" rel="stylesheet" href="css/tail.select-default.css" />
    </head>
    <body>
        <script type="text/javascript" src="js/tail.select.min.js"></script>
        <!-- <script type="text/javascript" src="langs/tail.select-{lang}.js"></script> -->

        <select>
            <option>My Option</option>
        </select>

        <script type="text/javascript">
            document.addEventListener("DOMContentLoaded", function(){
                tail.select("select", { /* Your Options */ });
            });
        </script>
    </body>
</html>
Clone this wiki locally