QR Code generator JQuery plugin

Hi everyone!


Google has cool charts API that allows you to easy have chart on your page, so I decided to create a simple JQuery plugin to work with one of them :) I have HTC phone and sometimes I'm toooooooooooooo lazy to type in an address (with a lot of slashes, dashes, dots and other parameters) which I see on my PC monitor, so QR Code is really good thing that allows to simply generate an image and open this page on my mobile.

Now the code:
1. You may need is an HTML element on page which will contain generated image, something like:
<span class="qrContainer"></span>

2. JQuery plugin can look like this:
<script type="text/javascript">
        (function()
        {
            $.fn.QRCode = function(url, options)
            {
                var settings =
                {
                    width: 200,
                    height: 200
                };

                if (options) { $.extend(settings, options); }
               
                this.each(function()
                {
                    $(this).append("<img src='https://chart.googleapis.com/chart?cht=qr&chs=" +
                        settings.width + "x" + settings.height + "&chl=" + escape(url) + "' alt='QR Code' />");
                });
            }
        })(jQuery);
</script>
Note that this plugin has two options (it's enough for my personal use) - width and height. They can be passed as second parameter. 

Google Chart API has some limitations for screen size, but I think most of developers won't create 800x600 QR Code.

3. Some place to call this script (no matter click, document ready or something else, it depends only on your custom logic):
<script type="text/javascript">

         $(document).ready(function()
        {
            $(".qrContainer").QRCode("http://webworld-develop.blogspot.com", {width:400, height:400 });
        });

</script>

Demo

Here you can find an example of this plugin usage.

Download

Download now! (Right click, Save As...)

Like this article?

Tweet