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 → repetere → Component.selectfx

repetere / Component.selectfx

Licence: mit
Some inspiration for styling a custom version of the select element. There are many possibilities and today we are exploring some ideas of how to let the user select a choice in style. Inspired by http://tympanus.net/codrops/2014/07/10/inspiration-for-custom-select-elements/

Programming Languages

javascript
184084 projects - #8 most used programming language

component.selectfx

Some inspiration for styling a custom version of the select element. There are many possibilities and today we are exploring some ideas of how to let the user select a choice in style.

Inspired by INSPIRATION FOR CUSTOM SELECT ELEMENTS

Example

Check out example/index.html, the example javascript for the example page is resources/js/example_src.js

Installation

$ npm install periodicjs.component.selectfx

The selectfx component is a browserified javascript module.

Usage

JavaScript

var SelectFX = require('periodicjs.component.selectfx'),
myFXSelect;
//initialize nav component after the dom has loaded
window.addEventListener('load',function(){
	var selectElement = document.querySelector('select');
  myFXSelect = new SelectFX(selectElement);
	//expose your component to the window global namespace
	window.myFXSelect = myFXSelect;
});

HTML

<html>
	<head>
  	<title>Your Page</title>
  	<link rel="stylesheet" type="text/css" href="[path/to]/component.selectfx.css">
  	<script src='[path/to/browserify/bundle].js'></script>
	</head>
	<body>
		<div class="container">
    	<section>
        <select class="cs-select cs-skin-elastic">
          <option value="" disabled selected>Select a Country</option>
          <option value="france" data-class="flag-france">France</option>
          <option value="brazil" data-class="flag-brazil">Brazil</option>
          <option value="argentina" data-class="flag-argentina">Argentina</option>
          <option value="south-africa" data-class="flag-safrica">South Africa</option>
        </select>
      </section>
	</body>
</html>

##API

####Full API DOCUMENTATION

new SelectFX(selectElement, {
  onChange: function(val) {
    console.log('val', val); //callback for value change
  }
});

##Development Make sure you have grunt installed

$ npm install -g grunt-cli

Then run grunt watch

$ grunt watch

##Notes

  • The less file is located in resources/stylesheets
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].