Skip to content

lawlesscreation/jquery.clickable

Repository files navigation

jQuery.clickable

Build Status NPM version Dependency Status devDependency Status

Designed to make other elements clickable/tapable/pressable using its sibling or child links!

Usage

To get started you can either:

  • Clone the repo: git clone https://github.com/lawlesscreation/jquery.clickable.git
  • Install with npm: npm install jquery.clickable --save
  • Install with Bower: bower install jquery.clickable --save

Then it's just a case of adding required scripts in your page, best at the bottom:

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="jquery.clickable.min.js"></script>

Options & defaults

Option Default Description
callbackAfter function() {} A callback that is triggered after the element has been made clickable
clickableChild null Used to make a child element clickable of which the script was executed
clickableClass clickable The class that gets added to elements which have been successfully initialized
focusClass clickable-focus The class that gets added to the onFocus state of clickable elements
hoverClass clickable-hover The class that gets added to the onHover state of clickable elements
selectLink null Used to specify which link to use within the clickable box should more than one link be found
urlPrefixes ['http://', 'https://', 'www.'] An array of different prefixes that can appear before each link

Examples

Link target

$(function(){
    $('#clickable-box').find('.box').jqueryClickable();
});

Link image

$(function(){
    $('#clickable-image').find('.box').jqueryClickable({
        clickableChild : 'img'
    });
});

Link image from heading

$(function(){
    $('#clickable-image-from-heading').find('.box').jqueryClickable({
        clickableChild : 'img',
        selectLink : 'h4'
    });
});

Development

You will need node.js before you get started, then:

$ npm install
#=> will install all required node packages

Then simply run either the watcher or build task:

$ grunt
#=> Running "watch" task
#=> Waiting...

or

$ grunt build
#=> Done, without errors.

Copyright © 2013 @lawlesscreation

Licensed under MIT

TODO

  • Additional callbacks;
  • Finish writing Jasmine test specs.

About

Designed to make other elements clickable/tapable/pressable using its sibling or child links!

Resources

License

Stars

Watchers

Forks

Packages

No packages published