Action Sheet & Tab Bar Plugin For jQuery - actionSheet.js

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.