Action Sheet & Tab Bar Plugin For jQuery - actionSheet.js
File Size: | 189 KB |
---|---|
Views Total: | 1494 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
actionSheet.js is a jQuery plugin which helps you dynamically renders an iOS-style Action Sheet and/or Tab Bar on your cross-platform web applications.
How to use it:
1. To use the plugin, include the actionSheet.js library and other required resources on the web app.
<script src="/path/to/jquery.min.js"></script> <link href="/path/to/jquery.actionSheet.css" rel="stylesheet"> <script src="/path/to/jquery.actionSheet.js"></script>
2. Create a container to place the action sheet or tab bar.
<div id="example"></div>
3. Prepare your data (icon, label, ID) for the action sheet or tab bar.
const myData = [ {icon: 'ZHM.png', label: 'Home', id: 'zhm'}, {icon: 'jsd.png', label: 'Opt 1', id: 'jsd'}, {icon: 'SHC.png', label: 'Opt 2', id: 'shc'}, {icon: 'XDC.png', label: 'Opt 3', id: 'xdc'}, {icon: 'LBLC.png', label: 'Opt 4', id: 'lblc'}, ];
4. Initialize the plugin to generate a basic action sheet from the data you provide.
var instance = $('#example').ActionSheet({ data: myData, labelField: 'label', idField: 'id' });
5. Initialize the plugin to generate a basic tab bar from the data you provide.
var instance = $('#example').ActionSheet({ data: myData, imgBaseUrl: 'lib/icon/', mode: 'grid', imgField: 'icon', labelField: 'label', idField: 'id', trggerFirst: true });
6. Toggle the action sheet & tab bar when needed.
// show instance.show(); // hide instance.hide();
7. Fire a function when you select an item.
var instance = $('#example').ActionSheet({ data: myData, imgBaseUrl: 'lib/icon/', mode: 'grid', imgField: 'icon', labelField: 'label', idField: 'id', trggerFirst: true, callback: function (graphid, graphlabel) { // do something } });
8. Full plugin options with default values.
var instance = $('#example').ActionSheet({ debug: false, mode: 'list', url: '', data: null, imgBaseUrl: '', imgField: '', labelField: '', idField: '', clickType: 'click', backgroundColor: '#333', color: '#fff', trggerFirst: false });
9. Re-render the Action Sheet and/or Tab Bar.
instance.reRender();
This awesome jQuery plugin is developed by wyh19. For more Advanced Usages, please check the demo page or visit the official website.