GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → pytesNET → Tail.select

pytesNET / Tail.select

Licence: mit
Create beautiful, functional and extensive (Multi) Select Fields with pure, vanilla JavaScript.

Programming Languages

javascript
184084 projects - #8 most used programming language

Labels

selectselection

Projects that are alternatives of or similar to Tail.select

flutter-package-selection menu
A flutter widget, highly customizable, to select an item from a list of items.
Stars: ✭ 32 (-86.38%)
Mutual labels:  select, selection
Ninaselectionview
Way to select your buttons.
Stars: ✭ 87 (-62.98%)
Mutual labels:  select, selection
Selectable
Touch enabled selectable plugin inspired by the jQuery UI widget.
Stars: ✭ 131 (-44.26%)
Mutual labels:  select, selection
Selection
✨ Selection - A simple and lightweight library to add a visual way of selecting elements, just like on your Desktop. Zero dependencies. Full mobile and scroll support.
Stars: ✭ 1,371 (+483.4%)
Mutual labels:  select, selection
Selecto
Selecto.js is a component that allows you to select elements in the drag area using the mouse or touch.
Stars: ✭ 822 (+249.79%)
Mutual labels:  select, selection
React Multi Select
A Multi Select component built with and for React
Stars: ✭ 111 (-52.77%)
Mutual labels:  select, selection
Deeputteranceaggregation
Modeling Multi-turn Conversation with Deep Utterance Aggregation (COLING 2018)
Stars: ✭ 171 (-27.23%)
Mutual labels:  selection
Lightweightrunloop A Reactor Style Nsrunloop
NSRunLoop Reactor Style Implementation: Using BSD kqueue implements iOS/Mac NSRunLoop and RunLoop-Relative Foundation such as perform selector(or delay some times) on other thread , Timer, URLConnection ,LWStream(LWInputStream、LWOutputStream) , LWPort(LWSocketPort) etc.
Stars: ✭ 196 (-16.6%)
Mutual labels:  select
El Tree Select
基于element-ui2.x扩展下拉树
Stars: ✭ 159 (-32.34%)
Mutual labels:  select
Browserselect
Browser Select is a utility to dynamically select the browser you want instead of just having one default for all links.
Stars: ✭ 154 (-34.47%)
Mutual labels:  select
React Dropdown Select
Customisable dropdown select for react
Stars: ✭ 227 (-3.4%)
Mutual labels:  select
Heyui
🎉UI Toolkit for Web, Vue2.0 http://www.heyui.top
Stars: ✭ 2,373 (+909.79%)
Mutual labels:  select
Sharect
🔗 A lightweight JavaScript library to let users share their text selections to social networks.
Stars: ✭ 192 (-18.3%)
Mutual labels:  selection
React Native Selectable Text
Capture text selection and customize the action menu
Stars: ✭ 174 (-25.96%)
Mutual labels:  selection
Scrollchoice
✔️ Scrollable view which can be used to give different choices to user with nice ui.
Stars: ✭ 201 (-14.47%)
Mutual labels:  selection
Dropkick
A JavaScript plugin for creating beautiful, accessible, and painless custom dropdowns.
Stars: ✭ 1,946 (+728.09%)
Mutual labels:  select
Ant Plus
🔺 Ant Design 表单简化版
Stars: ✭ 212 (-9.79%)
Mutual labels:  select
Vue Ui For Pc
基于Vue2.x的一套PC端UI组件，包括了Carousel 跑马灯、Cascader 级联、Checkbox 多选框、Collapse 折叠面板、DatePicker 日期选择、Dialog 对话框、Form 表单、Input 输入框、InputNumber 数字输入框、Layer 弹窗层、Loading 加载、Menu 菜单、Page 分页、Progress 进度条、Radio 单选框、SelectDropDown 仿select、Switch 开关、Table 表格、Tabs 标签页、Textarea 文本框、Tooltip 文字提示、BackTop 返回顶部、steps 步骤条、Transfer 穿梭框、Tree 树形、Upload 文件上传、Lazy 图片懒加载、Loading 加载、Pagination 分页等等
Stars: ✭ 156 (-33.62%)
Mutual labels:  select
Multiselectsegmentedcontrol
UISegmentedControl remake that supports selecting multiple segments, vertical stacking, combining text and images.
Stars: ✭ 181 (-22.98%)
Mutual labels:  selection
Jcf
Advanced form elements customization using CSS/JS
Stars: ✭ 203 (-13.62%)
Mutual labels:  select
View All Similar Projects ➔

tail.select - Beautify Select Fields

Minfied Size Version Downloads Support plainJS

The tail.select package is currently re-written in TypeScript as 'rat.select'. More information coming soon.

Replace and Improve your HTML <select> fields with style and without jQuery!

The tail.select script is back, re-written in vanilla JavaScript and ready to beautify and extend your HTML <select> fields... again! Add a search bar, multi-selection utilities (such as select all or none buttons), deselectability on single select fields, a perfect design and many more user-friendly functions to your web-application.

Wanna see tail.select in action?

Wanna translate tail.select in your language?

Support

You really like my tail.select script and want to support me and all of my projects?
Then I would be extremely grateful for a coffee! (Thanks to all Supporters)

Buy Me A Coffee

Features

  • Beautiful. 5 different Designs in many color schemes...
  • Extensive.
    • Search bar to find options quickly...
    • All / None optgroup selection buttons...
    • Add, Edit, Delete and Modifiy options at any time...
    • De-selection on single select fields...
    • ... and way more ...
  • Configurable. 36 settings and 3 bindable events...
  • Translatable. Already available in 10 languages...
  • Zero Dependencies. And written in vanilla JavaScript...
  • Free/To/Use. Because it's MIT licensed <3

Install & Embed

The master branch will always contain the latest Release, which you can download directly here as .tar or as .zip archive, or just visit the Releases Page on GitHub directly. You can also be cool and using npm, Yarn or bower:

npm install tail.select --save

yarn add tail.select --save

bower install tail.select --save

Using a CDN

You can also use the awesome CDN services from jsDelivr or UNPKG.

https://cdn.jsdelivr.net/npm/[email protected]/

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

Thanks To

Translations

Documentation

The Documentation has been moved to GitHubs Wiki Pages, but I will keep a table of contents list here and some basic instructions.

Files

The tail.select package contains different JavaScript files:

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

Basic Instructions

You can pass up to 2 arguments to the tail.select constructor, the first parameter is required and need to be an Element, a NodeList, a HTMLCollection, an Array with Element objects or just a single selector as string, which calls the querySelectorAll() method on its own. The second parameter is optional and, if set, MUST be an object with your tail.select options.

<!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>

Default options

Please check out GitHubs Wiki Pages to read more about each single option!

tail.select("select", {
        animate: true,              // [0.3.0]      Boolean
        classNames: null,           // [0.2.0]      Boolean, String, Array, null
        csvOutput: false,           // [0.3.4]      Boolean
        csvSeparator: ",",          // [0.3.4]      String
        descriptions: false,        // [0.3.0]      Boolean
        deselect: false,            // [0.3.0]      Boolean
        disabled: false,            // [0.5.0]      Boolean
        height: 350,                // [0.2.0]      Integer, null
        hideDisabled: false,        // [0.3.0]      Boolean
        hideSelected: false,        // [0.3.0]      Boolean
        items: {},                  // [0.3.0]      Object
        locale: "en",               // [0.5.0]      String
        linguisticRules: {          // [0.5.9]      Object
            "е": "ё",
            "a": "ä",
            "o": "ö",
            "u": "ü",
            "ss": "ß"
        },
        multiple: false,            // [0.2.0]      Boolean
        multiLimit: Infinity,       // [0.3.0]      Integer, Infinity
        multiPinSelected: false,    // [0.5.0]      Boolean
        multiContainer: false,      // [0.3.0]      Boolean, String
        multiShowCount: true,       // [0.3.0]      Boolean
        multiShowLimit: false,      // [0.5.0]      Boolean
        multiSelectAll: false,      // [0.4.0]      Boolean
        multiSelectGroup: true,     // [0.4.0]      Boolean
        openAbove: null,            // [0.3.0]      Boolean, null
        placeholder: null,          // [0.2.0]      String, null
        search: false,              // [0.3.0]      Boolean
        searchConfig: [             // [0.5.13]     Array
            "text", "value"
        ],
        searchFocus: true,          // [0.3.0]      Boolean
        searchMarked: true,         // [0.3.0]      Boolean
        searchMinLength: 1,         // [0.5.13]     Integer
        searchDisabled: true,       // [0.5.5]      Boolean
        sortItems: false,           // [0.3.0]      String, Function, false
        sortGroups: false,          // [0.3.0]      String, Function, false
        sourceBind: false,          // [0.5.0]      Boolean
        sourceHide: true,           // [0.5.0]      Boolean
        startOpen: false,           // [0.3.0]      Boolean
        stayOpen: false,            // [0.3.0]      Boolean
        width: null,                // [0.2.0]      Integer, String, null
        cbComplete: undefined,      // [0.5.0]      Function
        cbEmpty: undefined,         // [0.5.0]      Function
        cbLoopItem: undefined,      // [0.4.0]      Function
        cbLoopGroup: undefined      // [0.4.0]      Function
});

Copyright & License

Published under the MIT-License; Copyright © 2014 - 2019 SamBrishes, pytesNET

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].