viktor-photo / component.selectfx Goto Github PK

View Code? Open in Web Editor NEW

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/

License: MIT License

JavaScript 51.28% CSS 31.22% HTML 17.50%

component.selectfx's Introduction

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

Recommend Projects

viktor-photo / component.selectfx Goto Github PK