Thursday, May 16, 2024
HomejQueryInteractive Checkbox Menus With jQuery CheckboxManager

Interactive Checkbox Menus With jQuery CheckboxManager


CheckboxManager is a light-weight, helpful jQuery plugin that permits you to create customized checkbox menus with specified menu objects and callback capabilities. This may also help you create an interactive and user-friendly UI for managing duties, choices, or every other checkbox-related interactions.

For example, you may create a checkbox to delete a sure row in an HTML desk. When the row is chosen by this checkbox, a affirmation menu can be displayed with affirm and cancel buttons asking the person in the event that they wish to delete the row.

Learn how to use it:

1. Embrace the CheckboxManager plugin recordsdata and the jQuery library on the webpage.


<hyperlink rel="stylesheet" href="/path/to/checkbox.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/checkbox.js"></script>

2. Create a container in your HTML to carry the checkbox and its related menu:


<div class="checkbox-container">
</div>

3. Arrange your motion buttons and callback capabilities. Then, connect the menu to the checkbox utilizing the .CBCreate() operate as follows:


var cbMenu = {
    option1: { 
      // customized icon courses
      icon: "fa fa-check", 
      title: "Affirm", 
      destructive: false 
    },
    option2: { 
      icon: "fa fa-times", 
      title: "Cancel", 
      destructive: true 
    },
    // extra choices right here
};

operate handleCheckboxAction(outcome) {
  console.log("Motion:", outcome.motion);
  console.log("Factor:", outcome.component);
}

$(".checkbox-container").CBCreate(cbMenu, handleCheckboxAction);

This superior jQuery plugin is developed by AlfianChandra. For extra Superior Usages, please verify the demo web page or go to the official web site.

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments