2017 © Pedro Peláez
 

library xq-select

Cross browser <select> implementation using CSS, JQuery, and Twitter Bootstrap.

image

exactquery/xq-select

Cross browser <select> implementation using CSS, JQuery, and Twitter Bootstrap.

  • Tuesday, May 1, 2018
  • by exactquery
  • Repository
  • 1 Watchers
  • 0 Stars
  • 204 Installations
  • CSS
  • 0 Dependents
  • 0 Suggesters
  • 0 Forks
  • 2 Open issues
  • 21 Versions
  • 7 % Grown

The README.md

xqSelect

The xqSelect package is intended to make HTML5 form selects look and act the same cross browser and platform. A jQuery plugin, CSS and Bootstrap's dropdown.js are used to style and bring additional functionality to normal select boxes., (*1)

There are a great many excellent jQuery plugins that do similar things, and credit goes to these authors for the original idea., (*2)

xqSelect is differs similar plugins in a few small ways:, (*3)

  • Intentionally feature sparse to reduce size and complications.
  • Under 8KB minified - 4KB if you're only using the CSS (see below).
  • The original select box is still used, and is not hidden or moved of screen.

Documentation

The documentation for xqSelect is a work in progress and will be updated as possible. For now, please see the basic demo and usage explanation below., (*4)

Usage and Demo

A basic demo may be seen on BootPly. A more complete demo should be available soon., (*5)

Usage is simple:, (*6)

<div class="xq-select">
  <select id="xqSelectDemo">
    <optgroup label="Group One">
      <option value="1" data-subtext="First Thing">Item One</option>
      <option value="2">Item Two</option>
      <option value="3">Item Three</option>
      <option value="4">Item Four</option>
    </optgroup>
    <option value="5">Item Five</option>
    <option value="6">Item Six</option>
    <option value="7">Item Seven</option>
    <option value="8">Item Eight</option>
  </select>
</div>

This does, of course, presume that you have included the distribution JS and CSS somewhere in your HTML page. It's recommended that stylesheet go in the <head> and the JS goes just before your closing </body> tag., (*7)

To automatically switch to a native select with most mobile devices, include the attribute data-mobile="true" in the <div class="xq-select"> tag., (*8)

Browser Compatibility

One of my biggest goals for xqSelect is cross browser compatibility. Reports on issues with a specific browser and platform are encouraged. See below for guidelines., (*9)

As of this moment, it is expected that the following browsers are fully supported:, (*10)

Browser Version Platform Status
Chrome ?* Win/Mac/Linux Supported
Firefox ?* Win/Mac/Linux Supported
Opera 15+ Win/Mac/Linux Supported
Safari 6.2+ Mac Supported
Safari iOS 8/9+ iOS CSS Only
Chrome iOS 8/9+ iOS CSS Only
Chrome Android 5.0+ Android CSS Only
Firefox Android 5.0+ Android CSS Only
Internet Explorer 8 Win Supported
Internet Explorer 9/10 Win Supported
Internet Explorer 11 Win Supported
Edge All Win Supported

The following browser are still expected to work:, (*11)

Browser Version Platform Status
Opera 11/12 Win/Mac/Linux Needs Testing
Opera 10 Win/Mac/Linux Unsupported
Safari 5.1.4+ Mac Needs Testing
Safari iOS 6.1 - 7 iOS Needs Testing**
Android Browser Android 5.0+ Android Needs Testing**
Opera Mini All All Needs Testing**
Internet Explorer All Windows Phone Needs Testing**

No intention is present to support IE7, Opera 10, Safari 4, or 'ancient' versions of self-updating browsers such as Firefox and Chrome., (*12)

Mobile browsers are marked as CSS Only because their native selects should be used whenever possible to ensure the best user experience. Ideally, CSS rules will still ensure that the <select> looks uniform across browsers, but when clicked the native select will take over. See usage above for how to make this happen., (*13)

For additional browser compatibility, see jQuery Browser Support and Bootstrap Supported Browsers, (*14)

* Need to find the lowest version xqSelect works with., (*15)

** Needs testing. Only CSS components are expected to work., (*16)

Bugs and feature requests

Anyone is welcome to contribute. Please read the important information below regarding opening issues!, (*17)

Copyright (C) 2014-2016 ExactQuery, (*18)

Licensed under the MIT license., (*19)

The Versions

01/05 2018

dev-master

9999999-dev https://github.com/exactquery/xq-select

Cross browser <select> implementation using CSS, JQuery, and Twitter Bootstrap.

  Sources   Download

MIT

The Requires

 

by AMJones

bootstrap select sass replacement

01/05 2018

3.3

3.3.0.0 https://github.com/exactquery/xq-select

Cross browser <select> implementation using CSS, JQuery, and Twitter Bootstrap.

  Sources   Download

MIT

The Requires

 

by AMJones

bootstrap select sass replacement

30/04 2018

3.2

3.2.0.0 https://github.com/exactquery/xq-select

Cross browser <select> implementation using CSS, JQuery, and Twitter Bootstrap.

  Sources   Download

MIT

The Requires

 

by AMJones

bootstrap select sass replacement

22/01 2018

3.1.4

3.1.4.0 https://github.com/exactquery/xq-select

Cross browser <select> implementation using CSS, JQuery, and Twitter Bootstrap.

  Sources   Download

MIT

The Requires

 

by AMJones

bootstrap select sass replacement

28/12 2017

3.1.3

3.1.3.0 https://github.com/exactquery/xq-select

Cross browser <select> implementation using CSS, JQuery, and Twitter Bootstrap.

  Sources   Download

MIT

The Requires

 

by AMJones

bootstrap select sass replacement

07/12 2017

dev-v3.x-dev

dev-v3.x-dev https://github.com/exactquery/xq-select

Cross browser <select> implementation using CSS, JQuery, and Twitter Bootstrap.

  Sources   Download

MIT

The Requires

 

by AMJones

bootstrap select sass replacement

07/12 2017

3.1.2

3.1.2.0 https://github.com/exactquery/xq-select

Cross browser <select> implementation using CSS, JQuery, and Twitter Bootstrap.

  Sources   Download

MIT

The Requires

 

by AMJones

bootstrap select sass replacement

05/12 2017

3.1

3.1.0.0 https://github.com/exactquery/xq-select

Cross browser <select> implementation using CSS, JQuery, and Twitter Bootstrap.

  Sources   Download

MIT

The Requires

 

by AMJones

bootstrap select sass replacement

01/12 2017

3.0

3.0.0.0 https://github.com/exactquery/xq-select

Cross browser <select> implementation using CSS, JQuery, and Twitter Bootstrap.

  Sources   Download

MIT

The Requires

 

by AMJones

bootstrap select sass replacement

03/11 2017

2.0.1

2.0.1.0 https://github.com/exactquery/xq-select

Cross browser <select> implementation using CSS, JQuery, and Twitter Bootstrap.

  Sources   Download

MIT

The Requires

 

by AMJones

bootstrap select sass replacement

18/10 2017

2.0

2.0.0.0 https://github.com/exactquery/xq-select

Cross browser <select> implementation using CSS, JQuery, and Twitter Bootstrap.

  Sources   Download

MIT

The Requires

 

by AMJones

bootstrap select sass replacement

22/11 2016

v1.x-dev

1.9999999.9999999.9999999-dev https://github.com/exactquery/xq-select

Cross browser <select> implementation using CSS, JQuery, and Twitter Bootstrap.

  Sources   Download

MIT

The Requires

 

by AMJones

bootstrap select replacement

11/08 2016

1.2.0

1.2.0.0 https://github.com/exactquery/xq-select

Cross browser <select> implementation using CSS, JQuery, and Twitter Bootstrap.

  Sources   Download

MIT

The Requires

 

by AMJones

bootstrap select replacement

20/06 2016

1.1.5

1.1.5.0 https://github.com/exactquery/xq-select

Cross browser <select> implementation using CSS, JQuery, and Twitter Bootstrap.

  Sources   Download

MIT

The Requires

 

by AMJones

bootstrap select replacement

30/03 2016

1.1.4

1.1.4.0 https://github.com/exactquery/xq-select

Cross browser <select> implementation using CSS, JQuery, and Twitter Bootstrap.

  Sources   Download

MIT

The Requires

 

by AMJones

bootstrap select replacement

30/03 2016

1.1.3

1.1.3.0 https://github.com/exactquery/xq-select

Cross browser <select> implementation using CSS, JQuery, and Twitter Bootstrap.

  Sources   Download

MIT

The Requires

 

by AMJones

bootstrap select replacement

29/03 2016

1.1.0

1.1.0.0 https://github.com/exactquery/xq-select

Cross browser <select> implementation using CSS, JQuery, and Twitter Bootstrap.

  Sources   Download

MIT

The Requires

 

by AMJones

bootstrap select replacement

24/03 2016

1.0.9

1.0.9.0 https://github.com/exactquery/xq-select

Cross browser <select> implementation using CSS, JQuery, and Twitter Bootstrap.

  Sources   Download

MIT

The Requires

 

by AMJones

bootstrap select replacement

23/03 2016

1.0.8

1.0.8.0 https://github.com/exactquery/xq-select

Cross browser <select> implementation using CSS, JQuery, and Twitter Bootstrap.

  Sources   Download

MIT

The Requires

 

by AMJones

bootstrap select replacement

08/03 2016

1.0.7

1.0.7.0 https://github.com/exactquery/xq-select

Cross browser <select> implementation using CSS, JQuery, and Twitter Bootstrap.

  Sources   Download

MIT

The Requires

 

by AMJones

bootstrap select replacement

07/03 2016

1.0.5

1.0.5.0 https://github.com/exactquery/xq-select

Cross browser <select> implementation using CSS, JQuery, and Twitter Bootstrap.

  Sources   Download

MIT

The Requires

 

by AMJones

bootstrap select replacement