jcf
v1.2.3
Published
This script allows smooth cross-browser customization of form elements with CSS
Downloads
2,272
Readme
JCF - JavaScript Custom Forms
This library allows crossbrowser customization of form elements using CSS.
Check live demo.
Browser support
The script was tested in the following browsers:
- Internet Explorer 8+
- Firefox
- Chrome
- Safari
- Opera
- Windows 8+ Touch desktops
- Windows Phone 8+
- Android 4+
- iOS7+
Installation
Install using npm:
npm install jcf
Install using Bower:
bower install jcf
Usage
The script requires jQuery 1.7+ to work properly. To add script in your page simply attach core file - jcf.js
and some of modules you want to use for customization:
<script src="js/jquery.js"></script>
<script src="js/jcf.js"></script>
<script src="js/jcf.select.js"></script>
<script src="js/jcf.radio.js"></script>
<script src="js/jcf.checkbox.js"></script>
When the page is loaded all you have to do is simply call function:
$(function() {
jcf.replaceAll();
});
How to use JCF with AngularJS 1.x
To use this script with Angular you still need to attach all scripts above (including jQuery) and also attach directive:
<script src="js/jcf.angular.js"></script>
When the directive is connected as dependency in your app you can add jcf
attribute to the form field and such element will be customized:
<!-- customize select: -->
<select jcf>
...
</select>
<!-- customize range input with specific options: -->
<input type="range" jcf='{"orientation": "vertical"}'>
General API Information
Global jcf
object has several methods to control custom form elements on the page:
jcf.replaceAll( [context] )
- Replace elements on the whole page. Optional argument is context to use (can be CSS selector, or DOM/jQuery object). Add class jcf-ignore
on the element to prevent its customization.
jcf.replace( elements [, moduleName] [, customOptions] )
- Replace certain element or multiple elements. Returns custom form element instance. The first argument is CSS selector, or DOM/jQuery object to be customized. Second argument is optional and used to specify module which should be used for customization. By default it is false
which will result module to be auto detected. Third argument is module options which can be specified with object.
jcf.destroyAll( [context] )
- Destroy all custom form elements instances and restore original form elements. Optional argument is context to use (can be CSS selector, or DOM/jQuery object).
jcf.destroy( elements )
- Destroy certain element or multiple form elements. Should be applied to native form controls.
jcf.refreshAll( [context] )
- Redraw all custom form instances. Should be used when values of form elements are modified by other scripts. Optional argument is context to use (can be CSS selector, or DOM/jQuery object).
jcf.refresh( elements )
- Refresh certain element or multiple form elements.
Getting the instance of customized form element
In any time it's possible to get instance of customized form element. Use method jcf.getInstance
to do this:
var countrySelect = document.getElementById('country-select');
var customFormInstance = jcf.getInstance(countrySelect);
customFormInstance.refresh();
Setting Options
There are two ways of specifying options for modules - override module defaults and specify options per element.
// set options for Checkbox module
jcf.setOptions('Checkbox', {
checkedClass: 'test',
wrapNative: false
});
// replace all form elements with modified default options
jcf.replaceAll();
The second way is to specify options for certain element in HTML:
<input type="checkbox" data-jcf='{"checkedClass": "test", "wrapNative": false}'>
(Please be careful and use valid JSON)
Module Options
Each module has options. Some of options are common between modules and some are unique. The most commonly used options in modules are listed below.
Select
Checkbox
Radio
Number input
Range input
File
Scrollable
Textarea
Apply custom scrollbar on <textarea>
(Works only when Scrollable
module is available).
License
This script is licensed under the MIT License.
Copyright 2014-2015 PSD2HTML.com