Intelliwins Blog

Anything you wanna know about?

Alert Box for Bootstrap 3.0

by Admin 26. November 2013 16:26
Twitter Bootstrap Comes With a Bunch of Controls for Rapid Application Development. They Enhanced and Redesigned it with the release of Version 3.0 by adapting Flat design philosophy . It has a lot of predefined controls and CSS Class which makes App design Hell lot of easier . Now this simple plugin Bootbox JS makes it Even more easier for development with some simple alert box. We use alert box or you can say message box quite often during development. When password is incorrect or when we delete a data we have a requirement for confirmation box. This tiny Jquery Library is the single stop solution for all the requirement.   Dependencies It depends on the Twitter Bootstrap 3.X and Jquery. Not that difficult i guess. Usages Once you included the dependence file the coding is quite simple. <!DOCTYPE html><html><head><meta charset="utf-8"><title>My page</title> <!-- CSS dependencies --><link rel="stylesheet" type="text/css" href="bootstrap.min.css"></head><body> <p>Content here. <a class="alert" href=#>Alert!</a></p> <!-- JS dependencies --><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script><script src="bootstrap.min.js"></script> <!-- bootbox code --><script src="bootbox.min.js"></script><script>$(document).on("click", ".alert", function(e) {bootbox.alert("Hello world!", function() {console.log("Alert Callback");});});</script></body></html> Well That It !! If you a little bit familiar with using any other Jquery library you can start working straight forward. Now some Advanced Stuffs Need a Confirmation Box The Here we are bootbox.confirm("Are you sure?", function(result) {Example.show("Confirm result: "+result);}); As Simple as that !!!   Okay Need a Customized Alert Box with Multiple Button.   bootbox.dialog({message: "I am a custom dialog",title: "Custom title",buttons: {success: {label: "Success!",className: "btn-success",callback: function() {Example.show("great success");}},danger: {label: "Danger!",className: "btn-danger",callback: function() {Example.show("uh oh, look out!");}},main: {label: "Click ME!",className: "btn-primary",callback: function() {Example.show("Primary button");}}}});   Isn't That simple .   Download Full version JS Minified Version JS

Tags: ,

CSS | Freebies | Jquery | Tips and tricks

Textbox Swapper with Jquery and CSS3

by Admin 24. September 2013 13:48
This a sample code snippet we have written during development of one of our application at intelliwins , This is a textbox swapper using jquery and CSS3 Sample Codes          $(document).ready(function () {                $(".switchFields").click(function (e) {                    swap(e, '#Text1', '#Text2');                });            });   Here .switchField is the class of the anchor which need to be clicked for the textbox swapping. Text1 and Text2 are the textbox which are swapped. Also you need to inclde the Stylesheet file and the JS file which is included in the link below with the demo application.  One more thing you need to enter some values into textbox before swapping. You could download the sample code in following link Download    

Tags: , ,

Jquery | CSS | Tips and tricks

Brit Colony, Bhubaneswar,India +91 94384 80191 info@ intelliwins.com

About Us

Intelliwins mission is to alter the dynamics of the software industry by providing trusted, supportive and quality software development servies to clients that view our partnership as a strategic driver for their success.

Newsletter

Enter your email to join our mailing list