anything clickable - Free Download Make Any Elements Clickable With A Data Attribute - jQuery anything-clickable

Free Download Make Any Elements Clickable With A Data Attribute – jQuery anything-clickable

Posted on

This time I will share jQuery Plugin and tutorial about Make Any Elements Clickable With A Data Attribute – jQuery anything-clickable, hope it will help you in programming stack.

anything clickable - Free Download Make Any Elements Clickable With A Data Attribute - jQuery anything-clickable
File Size: 39.1 KB
Views Total: 340
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

anything-clickable is a small and cross-browser jQuery plugin which makes any elements (e.g. images, videos, table cells, etc) clickable with just an HTML data attribute.

Ideal for expanding the clickable area of your element to improve the user experience.

How to use it:

1. Download and put the minified version of the jQuery anything-clickable plugin after jQuery.

2         integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
3         crossorigin="anonymous">
4 </script>
5 <script src="./dist/jquery-anything-clickable.min.js"></script>

2. Initialize the plugin.

1 new Clickable('data-href');

3. Add the data-href attribute to your elements and specify the URL as follows:

01 <button data-href="https://www.google.com">Click me</button>
02  
03 <img data-href="https://www.google.com" src="1.jpg">
04  
05 <video width="400" controls data-href="https://www.google.com">
06   <source src="mov_bbb.mp4" type="video/mp4">
07   <source src="mov_bbb.ogg" type="video/ogg">
08   Your browser does not support HTML5 video.
09 </video>
10  
11 <table class="table" data-href="https://www.google.com">
12   <thead>
13     <tr>
14       <th scope="col">#</th>
15       <th scope="col">First</th>
16       <th scope="col">Last</th>
17       <th scope="col">Handle</th>
18     </tr>
19   </thead>
20   <tbody>
21     <tr>
22       <th scope="row">1</th>
23       <td data-href="https://www.google.com">Mark</td>
24       <td>Otto</td>
25       <td>@mdo</td>
26     </tr>
27     <tr>
28       <th scope="row">2</th>
29       <td>Jacob</td>
30       <td>Thornton</td>
31       <td>@fat</td>
32     </tr>
33     <tr>
34       <th scope="row">3</th>
35       <td>Larry</td>
36       <td>the Bird</td>
37       <td data-href="https://www.google.com">@<a href="https://www.jqueryscript.net/tags.php?/twitter/">twitter</a></td>
38     </tr>
39   </tbody>
40 </table>
41  
42 ...

Changelog:

v2.0.0 (2020-05-17)

  • Bugfixed

This awesome jQuery plugin is developed by Anduin2017. For more Advanced Usages, please check the demo page or visit the official website.