Loading...

FeastSelect jQuery plugin

Introduction Get started with FeastSelect, Let`s give <select> tags a nice Looking. Compatibility FeastSelect work with bootstrap 3.x and 4.x,…
FeastSelect jQuery plugin
Project Details

Get started with FeastSelect, Let`s give <select> tags a nice Looking FeastSelect is created to show bootstrap dropdown button instead of default form select tags..

Introduction

Get started with FeastSelect, Let`s give <select> tags a nice Looking.

Compatibility

FeastSelect work with bootstrap 3.x and 4.x, So it's compatible with any browser work with bootstrap.

FeastSelect has been tested in following browsers/devices:

  • Chrome
  • Firefox
  • IE10/11
  • Edge
  • iOS Safari
  • Android 7.0 Tablet

Setup

You can install FeastSelect by linking .css and .js files to your html file. Make sure you also load the jQuery library. Below is a basic HTML template to use as an example:


<html>
<head>
  <meta charset="utf-8">
  <title>My page</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="feastSelect.css">
</head>
<body>

  <!-- Your HTML content goes here -->

  <!-- JS -->
  [removed] src="//code.jquery.com/jquery-3.2.1.min.js">[removed]
  [removed] src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js">[removed]
  [removed] src="feastSelect.js">[removed]
</body>
</html>

Download feastSelect

Download the latest version of FeastSelect on GitHub. Or You can download it from the plugin website directly- Direct Download.

Package Managers

Important

  • Make sure you add the jQuery and Bootstrap libraries before the feastSelect JS file
  • If you already have jQuery and Bootstrap on your page, you shouldn't include it second time
  • We recommended to using name attribute to skip any bugs

How to Use

Initialize with data attributes

The most basic way to use FeastSelect is by adding the data-feast-select attribute to your element. This will automatically replace the current select with dropdown menu. Use data-btn-text attribute to Change the button text. Example:

<select class="form-control" name="example" data-feast-select data-btn-text="Select an option">
  Select option
   value="1">Option 1
   value="2">Option 2
   value="3">Option 3
</select>

Notice

  • Any option tag without or with empty value attribute will be removed automatically

Initialize with JavaScript

Select your elements with a jQuery selector (you can use any valid selector) and call the FeastSelect method:

$('select').FeastSelect({
 // Options will go here
  btnText: 'Select an option',
  btnClass: 'my-custom-class' // you don't need to add btn class here
});

Notice

If you call the plugin from JavaScript and data attribute, the data attribute will skiped

Example

Calling The plugin from data attribute with default options

The plugin accepted icons with options to set icon class add it like this data-icon="fa fa-home" to the option tag, you can change icon place (right, left) see options

<select class="form-control" data-feast-select>
  Select option
   value="1" data-icon="fa fa-home">Option 1
   value="2" data-icon="fa fa-user">Option 2
   value="3" data-icon="fa fa-cog">Option 3
</select>

Calling The plugin from data attribute with custom options

<select class="form-control" data-feast-select data-btn-text="Select category" data-btn-class="btn-lg btn-danger">
  Select option
   value="1">Option 1
   value="2">Option 2
   value="3">Option 3
</select>

Calling The plugin from JavaScript with fade effect

[removed] type="text/javascript">
  $('.example1').FeastSelect({
    showEffect: 'fadeIn',
    hideEffect: 'fadeOut'
  })
[removed]

Calling The plugin from JavaScript with custom class and show original select tag

Try to change both dropdown menu and select tag

[removed] type="text/javascript">
  $('.example2').FeastSelect({
    btnText: 'List the options',
    hideOriginal: false
  })
[removed]

Notice

To change the dropdown menu css for specific select you can use the example code below:

// For change a specific select style 
.yourCustomClass {
  
    /* Button styles here */

}
.yourCustomClass + .dropdown-menu {   

    /* Dropdown styles here */

}

// For change all dropdown button style
button[class*="feastSelect_"] {   

    /* Dropdown styles here */

}
// For change all dropdown style
ul[class*="feastSelect_"] {   

    /* Dropdown styles here */

}

Multiple select tags

[removed] type="text/javascript">
  $('.example3 select').FeastSelect({
    btnText: 'List the options',
  })
[removed]

Options

Quick reference for the default options as defined in the source:

// Default options
var defaults = {
    btnClass      : 'btn-info',
    btnText       : 'Select your option',
    showEffect    : 'slideDown', // fade, hide, slideDown
    hideEffect    : 'slideUp', // fade, hide, slideDown
    iconPlace     : 'left', // left or right
    hideOriginal  : true
};

Accepted data attributes for options:

  1. data-btn-class
  2. data-btn-text
  3. data-show-effect
  4. data-hide-effect
  5. data-icon-place
  6. data-icon (for option tags only)

Notice

option hideOriginal accepted in JavaScript only not from data attribute

Set instance options by passing a valid object to FeastSelect() method:

$("select").FeastSelect({
 hideOriginal : false
});

Credits

FeastChecker is using this awesome libraries

Copyrights

Copyright © 2017 FEAST-CMS v2.1. All rights reserved.

This website using Themeone theme.
Recent Comments
Blog Categories
Popular Posts