All geek questions in one place

How to use toggle button instead of checkbox using jQuery UI in jqGrid

The code below from another stackoverflow answer is used in jqGrid to implement a checkbox using the jQuery UI in the jqGrid top toolbar. This is used to toggle variables autoedit true - false.

The panel caption is too wide for the toolbar. How to change a checkbox on a toolbar button with two states that reflect autoedit true / false values ​​(checked and unchecked states). Instead of marks, a similar button should appear in the pressed or checked state and in the normal / unverified state if you click again. A clean checkmark without an inscription cannot be used, because instead of the rectangle of the rectangle there should be some kind of visual glue if the tolbar contains more than one such flag in order to visually distinguish them.

 var autoedit=false; $("#grid_toppager_left table.navtable tbody tr").append( '<td><div><label><input class="ui-pg-div" tabindex="-1" type="checkbox" ' + (autoedit ? 'checked ' : '') + 'id="AutoEdit" />Checbox caption which should appear as top toolbar button tooltip' + '</label></div></td>'); $("#AutoEdit").change(function () { if ($(this).is(':checked')) { autoedit = true; $("#AutoEdit").attr("checked", "checked"); } else { autoedit = false; $("#AutoEdit").removeAttr("checked"); } });
+4
source share
1 answer

I find your question very interesting. So I did a few demos that show how to implement the "toggle" buttons in the jqGrid navigation bar. In all demos, I used the top toolbar.

I decided to use the jQuery UI Button widget. It allows you to use different buttons from there, the "switch" button that we need. Buttons can be just text, just an icon or a combination of text and two icons (one icon before the text and the other after the text). As a result, you can create toolbars, for example:

enter image description here and enter image description here in the checked state

enter image description here and enter image description here in a “verified” state

enter image description here and enter image description here in the checked state

or just icons, just like enter image description here and enter image description here for the checked state.

Because I used the top toolbar. For implementation, I applied the path to some jqGrid CSS, which I described here :

 .ui-jqgrid .ui-jqgrid-toppager .ui-pg-div { padding: 1px 0; float: left; position: relative; } .ui-jqgrid .ui-jqgrid-toppager .ui-pg-button { height: 18px !important; cursor: pointer; } .ui-jqgrid .ui-jqgrid-toppager .ui-pg-div span.ui-icon { float: left; margin: 0 2px; }

The code that adds the custom button you posted will be changed to

 var autoedit=false; ... $("#grid_toppager_left table.navtable tbody tr").append( '<td class="ui-pg-button ui-corner-all">' + '<div class="ui-pg-div my-nav-checkbox">' + '<input tabindex="-1" type="checkbox" id="AutoEdit" />' + '<label title="Checkx caption which should appear as button tooltip"' + ' for="AutoEdit">Autoedit</label></div></td>' ); $("#AutoEdit").button().click(function () { if ($(this).is(':checked')) { autoedit = true; alert("Autoedit mode is ON"); } else { autoedit = false; alert("Autoedit mode is OFF"); } });

in the case of a clean text button with the text "Auto-update". Appropriate advanced CSS settings may be

 /* some settings to place Button in jqGrid */ .ui-jqgrid .ui-pg-table .my-nav-checkbox { margin: 0px; padding: 0px; float: left; height: 18px } /* fixing CSS of jQuery UI Buttons */ .ui-jqgrid .ui-pg-table .my-nav-checkbox > .ui-button > span.ui-button-text { margin: 0px; padding: 1px 2px 1px 2px; }

If you use an icon with text, the code will be

 $("#AutoEdit").button({ icons: {primary: "ui-icon-mail-closed"} }).click(function () { var iconClass; if ($(this).is(':checked')) { autoedit = true; iconClass = "ui-icon-mail-open"; } else { autoedit = false; iconClass = "ui-icon-mail-closed"; } $(this).button("option", {icons: {primary: iconClass}}); });

To make a button with an icon only without text, you just need to add the text: false option to the list of .button({...}) parameters

 $("#AutoEdit").button({ text: false, icons: {primary: "ui-icon-mail-closed"} }).click(function () { ...

In both cases, you can use the following CSS

 /* some settings to place Button in jqGrid */ .ui-jqgrid .ui-pg-table .my-nav-checkbox { margin: 0px; padding: 0px; float: left; height: 18px } .ui-jqgrid .ui-pg-table .my-nav-checkbox > input { padding: 1px; } .ui-jqgrid .ui-pg-table .my-nav-checkbox > label { margin: 0px; } /* fixing CSS of jQuery UI Buttons */ .ui-jqgrid .ui-pg-table .my-nav-checkbox > .ui-button > span.ui-button-text { margin: 0px; padding: 1px 2px 1px 16px; } .ui-button-icon-only { width: 16px; } .ui-jqgrid .ui-pg-table .my-nav-checkbox > .ui-button > span.ui-button-icon-primary { margin: -8px 0px 0px -8px; }

For different demos you can find here:

To have the border above the button only on hover, you can change the CSS for .my-nav-checkbox > label to

 .ui-jqgrid .ui-pg-table .my-nav-checkbox > label { margin: 0px; border-width: 0px; } .ui-jqgrid .ui-pg-table .my-nav-checkbox:hover > label { margin: 0px; border-width: 1px; }

As a result, you will have (see the following demo ):

  • standard state button enter image description here
  • Hover buttons enter image description here
  • standard state "checked" button enter image description here
  • Bringing the state of the checked button enter image description here
+4
source

Source: https://habr.com/ru/post/1383175/

More articles:


All Articles