Creating an on/off switch using Bootstrap and jQuery

In some projects that I work on, I need a quick way of adding some cool-looking user-friendly on/off switch. Checkboxes are ugly! And I don’t want to add a new component/plugin to the already loaded pages. So, I wrote some quick code snippet for a switch based on Bootstrap 3 and jQuery . Here is the HTML code:

1
2
3
4

<div class="btn-group" id="toggle_event_editing">
	<button type="button" class="btn btn-info locked_active">OFF</button>
	<button type="button" class="btn btn-default unlocked_inactive">ON</button>
</div>

And here is the jQuery code (should be placed inside any jQuery DOM loaded block ):

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

$('#toggle_event_editing button').click(function() {
	if($(this).hasClass('locked_active') || $(this).hasClass('unlocked_inactive')) {
		/* code to do when unlocking */
	}else{
		/* code to do when locking */
	}
	
	/* reverse locking status */
	$('#toggle_event_editing button').eq(0).toggleClass('locked_inactive locked_active btn-default btn-info');
	$('#toggle_event_editing button').eq(1).toggleClass('unlocked_inactive unlocked_active btn-info btn-default');
});

Here is what the output looks like when the page loads (the default state is locked):

And when the switch is clicked, here is how it looks like (unlocked):

Here is a demo of the switch in action. Have fun!

Archived Comments

Stefan Koch

2019-08-15 at 8:05 am

Hello, how can i use this in Appgini, where should i integrate this code?

Genedy

2019-08-15 at 9:39 am

Hmm … As a general rule, any JavaScript code you want to add to your AppGini app can be added in any of these locations:

• hooks/header-extras.php or hooks/footer-extras.php … would apply to all pages.
• hooks/tablename-dv.js … would apply to the detail view of the specified table.
• hooks/tablename-tv.js … would apply to the table view of the specified table.
• The tablename_dv(), tablename_header() or tablename_footer() hook functions in hooks/tablename.php … would apply to the specified table — use this if you want to add a server-side check, otherwise it’s easier to use any of the above alternatives.

For AppGini, please replace $ in the code of the post above with $j.

Stefan Koch

2019-08-15 at 12:43 pm

…that´s OK, but where must i insert the HTML-Code above?

Genedy

2019-08-15 at 2:16 pm

It depends on where you want to place the switch. I’d recommend using JS code as well to accurately place the HTML code. In this case, you could place the JS code in any of the above-mentioned locations. For example, this would place the switch to the right of the buttons above the table view:

1 2 3 4 5 6

$j(function() { $j('<div class="btn-group" id="toggle_event_editing">' + '<button type="button" class="btn btn-info locked_active">OFF</button>' + '<button type="button" class="btn btn-default unlocked_inactive">ON</button>' + '</div>').after('.all_records:first-child'); });