bootstrap-fullscreen-select
view on Github

.zip file .tar.gz ball
Introduction Usage Examples Themes Options

version 1.5.1

bootstrap-fullscreen-select

What the heck is this?
A powerful SELECT for your Web app, mobile UI, cordova/phoneGap project.
This plugin makes it super easy for a user to use the 'select' on small touch screen devices.

Why use this?

  • Full functionality of a native html select.
  • 3 OS suited themes (white, holo, mac).
  • 8 graceful in and out animations.
  • Custom titles and button text.
  • Customizable button colors.
  • CSS3 animations.
  • onOpen & onClose callbacks
  • Tested reliable code.

Feature Showcase

Theme (white)

Theme (holo)

Theme (mac)

Animations (opacity)

No animations

Animation (zoom)

Animations (bottom)

Animations (opacity)

Usage

Dependencies:

Create your <select> with the .mobileSelect class.

<select class="form-control mobileSelect" >
    <option value="pizza">Pizza</option>
    <option value="burger">Burger</option>
    <option value="tacos">Tacos</option>
    <option value="garlic-bread">Garlic Bread</option>
</select>

Enable mobileSelect via Javascript

$('.mobileSelect').mobileSelect();

or Options can be passed via JavaScript

$('.mobileSelect').mobileSelect({
    animation: 'scale',
    animationSpeed: 400
});

Examples

SELECT

before

after

code

<select class="form-control mobileSelect">
    ...
</select>

MULTIPLE SELECT

before

after

code

<select class="form-control mobileSelect" multiple>
    ...
</select>

OPTION GROUPS

before:

After:

code

<select class="form-control mobileSelect" multiple>
    <optgroup label="group1">
        <option value="pizza" >Pizza</option>
        <option value="burger">Burger</option>
        <option value="tacos">Tacos</option>
    </optgroup>
    <optgroup label="group2">
        <option value="garlic-bread">Garlic Bread</option>
    </optgroup>
</select>

DISABLED ITEMS

Disabled select

Disabled groups

Disabled options

code

<select class="form-control mobileSelect"  disabled>
    <option value="pizza" >Pizza</option>
    <option value="burger">Burger</option>
    <option value="tacos">Tacos</option>
    <option value="garlic-bread">Garlic Bread</option>
</select>

<select class="form-control mobileSelect" >
    <optgroup label="group1" disabled>
        ...
    </optgroup>
    <optgroup label="group2">
        ...
    </optgroup>
</select>

<select class="form-control mobileSelect" >
    <option value="pizza" disabled>Pizza</option>
    <option value="burger" disabled>Burger</option>
    <option value="tacos">Tacos</option>
    <option value="garlic-bread">Garlic Bread</option>
</select>

BUTTON STYLES

code

<select class="form-control mobileSelect" data-style="default">
    ...
</select>
<select class="form-control mobileSelect" data-style="primary" >
    ...
</select>
<select class="form-control mobileSelect" data-style="success" >
    ...
</select>
<select class="form-control mobileSelect" data-style="info" >
    ...
</select>
<select class="form-control mobileSelect" data-style="warning" >
    ...
</select>
<select class="form-control mobileSelect" data-style="danger" >
    ...
</select>
<select class="form-control mobileSelect" data-style="link" >
    ...
</select>

THEMES

If you're using PhoneGap or Cordova to develop native apps.




code

<select class="form-control mobileSelect" data-theme="white" >
    ...
</select>
<select class="form-control mobileSelect" data-theme="holo" >
    ...
</select>
<select class="form-control mobileSelect" data-theme="mac" >
    ...
</select>

CUSTOM TITLES

You can specify a title for a select element, while initializing or individually set it in data-attributes.

code

<select class="form-control mobileSelect" data-title="SUP? BUDDY">
    ...
</select>

or Set the title for all selected SELECT while initializing

$('.mobileSelect').mobileSelect({
    title: 'For all selected selects'
});

PADDING

Position the elements as you need. supply a JSON object to the data-padding attribute like so.

With zero padding

With left and right padding of 30px

With Top and Bottom padding of 30px

code

<select class="form-control mobileSelect" data-title="I capture your screen" data-padding='{"top": "0px", "bottom": "0px", "right": "0px", "left":"0px"}'>
    ...
</select>
<select class="form-control mobileSelect" data-title="Left and Right spacing" data-padding='{"top": "0px", "bottom": "0px", "right": "30px", "left":"30px"}'>
    ...
</select>

or Set them in the initialization.

$('.mobileSelect').mobileSelect({
    padding: {
        top: '0px',
        left: '0px',
        right: '0px',
        bottom: '0px'
    }
});

ANIMATIONS!

mobileSelect provides basic animations like, 'scale', 'zoom', 'top', 'bottom', 'left', 'right', 'opacity' & 'none'

code

<select class="form-control mobileSelect" data-title="I capture your screen" data-animation='scale'>
    ...
</select>
<select class="form-control mobileSelect" data-title="I capture your screen" data-animation='zoom'>
    ...
</select>
<select class="form-control mobileSelect" data-title="I capture your screen" data-animation='opacity'>
    ...
</select>
<select class="form-control mobileSelect" data-title="I capture your screen" data-animation='none'>
    ...
</select>
<select class="form-control mobileSelect" data-title="I capture your screen" data-animation='top'>
    ...
</select>
<select class="form-control mobileSelect" data-title="I capture your screen" data-animation='left'>
    ...
</select>
<select class="form-control mobileSelect" data-title="I capture your screen" data-animation='right'>
    ...
</select>
<select class="form-control mobileSelect" data-title="I capture your screen" data-animation='bottom'>
    ...
</select>

or Set them while initialization.

$('.mobileSelect').mobileSelect({
    animation: 'zoom'
});

ANIMATION SPEED

Adjust the speed of the open close animation. setting it to 10000 miliseconds i.e. 10 seconds

code

<select class="form-control mobileSelect" data-animationSpeed='5000'>
    ...
</select>

or Set them while initialization.

$('.mobileSelect').mobileSelect({
    animationSpeed: 10000
});

BUTTON TEXT

Change default button text on the select.

code

<select class="form-control mobileSelect" data-btntext-save="Save this man!" data-btntext-cancel="Nevermind!" data-btntext-clear="Clear it out." multiple>
    ...
</select>

TRIGGER ON

At times, you do not want the plugin generated select. instead you have a custom div on which the Select should trigger.
This is common while developing on phonegap/cordova.

This may be some custom designed button. click me.

code

<select class="form-control mobileSelect" data-triggerOn="#customdiv">
    <option value="pizza">Pizza</option>
    <option value="burger">Burger</option>
    <option value="tacos">Tacos</option>
    <option value="garlic-bread">Garlic Bread</option>
</select>

<div id="customdiv" style="width:200px; height: 100px; background: green; color: white;">
    This may be some custom designed button. click me.
</div>

CALLBACKS

mobileSelect provides callback functions onOpen & onClose

code

  • onOpen fires when the open animation starts, onClose fires after the close animation is done.
  • this refers to the SELECT element on which the user interacts.
  • this == $(this), this is a jQuery object. ie. this.val() will also work.
$('.mobileSelectCallback').mobileSelect({
    onClose: function(){
        alert('onClose: '+$(this).val());
    },
    onOpen: function(){
        alert('onOpen: '+this.val());
    }
});

GLOBAL DEFAULTS

You can overwrite Global Defaults for mobileSelect.
here are list of options available. 

$.mobileSelect.defaults = {
    title: 'Select an option',
    buttonSave: 'Save',
    buttonClear: 'Clear',
    buttonCancel: 'Cancel',
    padding: {
        'top': '20px',
        'left': '20px',
        'right': '20px',
        'bottom': '20px'
    },
    animation: 'scale',
    animationSpeed: 400,
    theme: 'white',
    onOpen: function () {
    },
    onClose: function () {
    },
    style: 'btn-default'
};

OPTIONS

options can be passed via data-attributes or while initialization.

Name type default description
title string Select an option displays on the top of mobileSelect modal.
buttonSave String Save Save button displayed on the modal.
buttonClear String Clear Clear button displayed on the modal.

is visible only for multiple select elements.
buttonCancel String Cancel Cancel button displayed on the modal.
padding object 
{
top: '20px',
left: '20px',
right: '20px',
bottom: '20px'
}
Space to maintain between the screen and the mobileSelect modal.
The unit may be in px, em etc.
animation string scale Change open and close animations, possible options are
none , scale , zoom , opacity , top , left , right , bottom,
animationSpeed number 400 Open and close animations duration in miliseconds.
theme string white mobileSelect provides 3 different styles,
white, holo, mac
style string btn-default If triggerOn element is not defined in data-attributes, the plugin generates its Select to replace the native select.
possible styles, btn-default, btn-primary, btn-warning, btn-info, btn-danger, btn-success, btn-link, or even ur custom styled class name.
onOpen function function(){} Callback function called when an model is opened, this refers to jQuery object within the function.
onClose function function(){} Callback function called when the model closed animation is completed, this refers to jQuery object within the function.

METHODS

show()

Display the Selection dialog programmically with the show method.

<select class="mobileSelect" id="exampleShow">
    <option>option 1</option>
    <option>option 2</option>
    <option>option 3</option>
</select>
<button class="btn btn-primary" onclick="$('#exampleShow').mobileSelect('show')">open it</button>

$('.mobileSelect').mobileSelect('show');
// NOTE: limit selected elements to "1". You may use .eq(n) to do this.

hide()

Hide the Selection dialog programmically with the hide method.

$('.mobileSelect').mobileSelect('hide');
// NOTE: limit selected elements to "1". You may use .eq(n) to do this.

sync() or refresh()

After programmically altering your select element, call the sync method to refresh data.

Appending options with same value multiple times will cause problems

$('.addTacos').click(function(){
    $('#exampleRefresh').append('<option value="tacos">tacos</option>');
    $('#exampleRefresh').mobileSelect('refresh');
});
$('.addGarlicBread').click(function(){
    $('#exampleRefresh').append('<option value="garlic-bread">Garlic bread</option>');
    $('#exampleRefresh').mobileSelect('refresh');
});
$('.removeTacos').click(function(){
    $('#exampleRefresh option[value="tacos"]').remove();
    $('#exampleRefresh').mobileSelect('refresh');
});
$('.removeGarlicBread').click(function(){
    $('#exampleRefresh option[value="garlic-bread"]').remove();
    $('#exampleRefresh').mobileSelect('refresh');
});

destroy()

to remove(destroy) the mobileSelect plugin initializations for selected elements.

keep an eye on the console for errors when u initialize the initialized elements

<button class="btn btn-primary destroythemall">Destroy all mobileSelect elements</button>
<button class="btn btn-primary initializeAgain">Re initialize all mobileSelect elements</button>

$('.destroythemall').click(function(){
    $('.mobileSelect').mobileSelect('destroy');
});
$('.initializeAgain').click(function(){
    $('.mobileSelect').mobileSelect();
});

happy coding