Giter VIP home page Giter VIP logo

selectboxize's Introduction

Selectboxize

Selectboxize is a simple and lightweight JavaScript library for styling and replacing default selectboxes. The library is heavily based on previous work by Krzysztof Suszyński.

Setup

Just add jQuery and the following dependencies to your site:

<script src="selectboxize.js"></script>
<link rel="stylesheet" type="text/css" href="selectboxize.css">

Usage

Selectboxize needs to be called on a jQuery node to replace selectboxes, like this:

$('#demo-selectbox').selectboxize();

Configuration

Selectboxize call can take an optional parameter -- an object of key / value settings:

  • theme (default: "selectboxize") - name of the colour theme prefixing class names applied to replaced selectboxes.
  • commonClass (default: "selectboxize-replaced") - class name that is applied to root element of all replaced selectboxes.
  • listboxMaxSize (default: 15) - maximum number of displayed items in rolled out selectbox without a scrollbar.
  • replaceInvisible (default: false) - replace selectboxes even if they are not displayed (e.g. with display: none applied).
  • callback (default: null) - function that runs after a new item has been selected.

Example

Take a look at the following example, where there is a simple selectbox in HTML:

<select name="country">
  <option value="1">Slovakia</option>
  <option value="2">Sweden</option>
</select>

By running the example the selectbox will be changed into a bunch of HTML nodes and can be styled as such:

<div class="selectboxize-list selectboxize-replaced" data-selection="0">
  <a href="#" class="selectboxize-list-more"></a>
  <div class="selectboxize-list-list">
    <span class="selectboxize-list-item" data-item="0" data-value="1">Slovakia</span>
    <span class="selectboxize-list-item" data-item="1" data-value="2">Sweden</span>
  </div>
  <span class="selectboxize-list-current">Slovakia</span>
</div>

Contributions

If you have any grand ideas on how to improve Selectboxize and make it more useful or found any bugs, just create an issue or fork the project.

License

Selectboxize is © 2012 BACKBONE, s.r.o., 2008 Krzysztof Suszyński and licensed under the terms of MIT license.

selectboxize's People

Contributors

palosopko avatar

Watchers

 avatar  avatar  avatar  avatar

selectboxize's Issues

Add proper keyboard interaction

For the plugin to be truly useful, it is important to add a proper ability to interact with the plugin via keyboard using:

  • up-arrow – previous item in an expanded list,
  • down-arrow – next item in an expanded list
  • return – selecting an item and closing expanded list
  • escape – closing an expanded list

As a bonus it might be nice if it understood the tabindex on the selectbox.

Allow customization of item height

Right now, the item height is set to constant 24px which makes no sense at all. Either through parsing the CSS of the theme or via config option allow to customize the height.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.