Display QR Codes With jQuery Plugin

Mungkin sudah tidak asing dimata kita, ketika kita melihat sebuah tooltip pada link berupa title dan gaya CSS-nya. Secara default pada browsingan jika sobat memasang sebuah syntax link disertai atribute title, maka akan ada tulisan titlenya tersebut diatas cursor kita :) Yaaa masa kagak tau sih apa itu tooltip? Coba saja disetiap link yg ada di blog Prodigy of Head ini sobat² sorot! Pasti sudah pada mengerti yak apa itu tooltip :) Bagaimana sekarang jika sebuah syntax ketika disorot yang munculnya adalah QR Code :-? Sedikit penjelasan mengenai barcode... Mungkin bagi yg kurang familiar dengan QR Code ini, bertanya-tanya buat apa memasang tooltip pada syntax. Memang gunanya bukan untuk digunakan di komputer sob, melainkan untuk membuka link pada ponsel, kamera, video atau alat yg memang mendukung untuk fasilitas ini :D Tentunya full stylish, gaya dan unik kan :)) b-) Santer diluaran sana android, nah dengan dukungan Chrome Browse fasilitas ini sangat membantu dan mendukung :) Expand here for look screenshot

jQuery Script Plugin

<script>
//<![CDATA[
/*
* An URI datatype. Based upon examples in RFC3986.
*
* TODO %-escaping
* TODO split apart authority
* TODO split apart query_string (on demand, anyway)
*
* @(#) $Id$
*/

// Constructor for the URI object. Parse a string into its components.
function URI(str) {
if (!str) str = "";
// Based on the regex in RFC2396 Appendix B.
var parser = /^(?:([^:\/?\#]+):)?(?:\/\/([^\/?\#]*))?([^?\#]*)(?:\?([^\#]*))?(?:\#(.*))?/;
var result = str.match(parser);
this.scheme = result[1] || null;
this.authority = result[2] || null;
this.path = result[3] || null;
this.query = result[4] || null;
this.fragment = result[5] || null;
}

// Restore the URI to it's stringy glory.
URI.prototype.toString = function () {
var str = "";
if (this.scheme) {
str += this.scheme + ":";
}
if (this.authority) {
str += "//" + this.authority;
}
if (this.path) {
str += this.path;
}
if (this.query) {
str += "?" + this.query;
}
if (this.fragment) {
str += "#" + this.fragment;
}
return str;
};

// Introduce a new scope to define some private helper functions.
(function () {
// RFC3986 5.2.3 (Merge Paths)
function merge(base, rel_path) {
var dirname = /^(.*)\//;
if (base.authority && !base.path) {
return "/" + rel_path;
}
else {
return base.path.match(dirname)[0] + rel_path;
}
}

// Match two path segments, where the second is ".." and the first must
// not be "..".
var DoubleDot = /\/((?!\.\.\/)[^\/]*)\/\.\.\//;

function remove_dot_segments(path) {
if (!path) return "";
// Remove any single dots
var newpath = path.replace(/\/\.\//g, '/');
// Remove any trailing single dots.
newpath = newpath.replace(/\/\.$/, '/');
// Remove any double dots and the path previous. NB: We can't use
// the "g", modifier because we are changing the string that we're
// matching over.
while (newpath.match(DoubleDot)) {
newpath = newpath.replace(DoubleDot, '/');
}
// Remove any trailing double dots.
newpath = newpath.replace(/\/([^\/]*)\/\.\.$/, '/');
// If there are any remaining double dot bits, then they're wrong
// and must be nuked. Again, we can't use the g modifier.
while (newpath.match(/\/\.\.\//)) {
newpath = newpath.replace(/\/\.\.\//, '/');
}
return newpath;
}

// RFC3986 5.2.2. Transform References;
URI.prototype.resolve = function (base) {
var target = new URI();
if (this.scheme) {
target.scheme = this.scheme;
target.authority = this.authority;
target.path = remove_dot_segments(this.path);
target.query = this.query;
}
else {
if (this.authority) {
target.authority = this.authority;
target.path = remove_dot_segments(this.path);
target.query = this.query;
}
else {
// XXX Original spec says "if defined and empty";
if (!this.path) {
target.path = base.path;
if (this.query) {
target.query = this.query;
}
else {
target.query = base.query;
}
}
else {
if (this.path.charAt(0) === '/') {
target.path = remove_dot_segments(this.path);
} else {
target.path = merge(base, this.path);
target.path = remove_dot_segments(target.path);
}
target.query = this.query;
}
target.authority = base.authority;
}
target.scheme = base.scheme;
}

target.fragment = this.fragment;

return target;
};
})();

/*
* Originally taken from http://tutorialzine.com/2010/07/colortips-jquery-tooltip-plugin/
* Implemented for QR codes by Konstantin Kovshenin http://kovshenin.com
*/

(function($){
$.fn.colorTip = function(settings){

var defaultSettings = {
color : 'black',
timeout : 500,
size : 100,
}

var supportedColors = ['red','green','blue','white','yellow','black'];

/* Combining the default settings object with the supplied one */
settings = $.extend(defaultSettings,settings);

/*
* Looping through all the elements and returning them afterwards.
* This will add chainability to the plugin.
*/

return this.each(function(){

var elem = $(this);

// If the title attribute is empty, continue with the next element
// if(!elem.attr('title')) return true;

// Creating new eventScheduler and Tip objects for this element.
// (See the class definition at the bottom).

var scheduleEvent = new eventScheduler();
url = elem.attr("href");
this_uri = new URI(window.location.href);
uri = new URI(url);
url = uri.resolve(this_uri);

content = "<img src='http://chart.apis.google.com/chart?cht=qr&chs=" + settings.size + "x" + settings.size + "&choe=UTF-8&chld=L%7C0&chl=" + url + "' />";
var tip = new Tip(content);

// Adding the tooltip markup to the element and
// applying a special class:

elem.append(tip.generate()).addClass('colorTipContainer');

// Checking to see whether a supported color has been
// set as a classname on the element.

var hasClass = false;
for(var i=0;i<supportedColors.length;i++)
{
if(elem.hasClass(supportedColors[i])){
hasClass = true;
break;
}
}

// If it has been set, it will override the default color

if(!hasClass){
elem.addClass(settings.color);
}

// On mouseenter, show the tip, on mouseleave set the
// tip to be hidden in half a second.

elem.hover(function(){

tip.show(settings.size);

// If the user moves away and hovers over the tip again,
// clear the previously set event:

scheduleEvent.clear();

},function(){

// Schedule event actualy sets a timeout (as you can
// see from the class definition below).

scheduleEvent.set(function(){
tip.hide();
},settings.timeout);

});

// Removing the title attribute, so the regular OS titles are
// not shown along with the tooltips.

elem.removeAttr('title');
});

}


/*
/ Event Scheduler Class Definition
*/

function eventScheduler(){}

eventScheduler.prototype = {
set : function (func,timeout){

// The set method takes a function and a time period (ms) as
// parameters, and sets a timeout

this.timer = setTimeout(func,timeout);
},
clear: function(){

// The clear method clears the timeout

clearTimeout(this.timer);
}
}


/*
/ Tip Class Definition
*/

function Tip(txt){
this.content = txt;
this.shown = false;
}

Tip.prototype = {
generate: function(){

// The generate method returns either a previously generated element
// stored in the tip variable, or generates it and saves it in tip for
// later use, after which returns it.

return this.tip || (this.tip = $('<span class="colorTip">'+this.content+ '<span class="pointyTipShadow"></span><span class="pointyTip"></span></span>'));
},
show: function(size){
if(this.shown) return;

// Center the tip and start a fadeIn animation
this.tip.css('margin-top', -size);
this.tip.css('margin-left',-this.tip.outerWidth()/2).fadeIn('fast');
this.shown = true;
},
hide: function(){
this.tip.fadeOut();
this.shown = false;
}
}

$.fn.qr = function(settings) {
var defaultSettings = {
size : 100
}
settings = $.extend(defaultSettings,settings);

jQuery(this).colorTip(settings);
};

})(jQuery);
//]]>
</script>
<script>
//<![CDATA[
jQuery(document).ready(function() {
jQuery('a').qr({size: 80});
});
//]]>
</script>

Hostingkan script yg panjang (yang bukan warna merah itu) kalau perlu, dan letakan keseluruhan jQuery script tersebut diatas tag </body>

Kode CSS

.colorTip{
/* This class is assigned to the color tip span by jQuery */
display:none;
position:absolute;
left:50%;
top:-30px;
padding:6px;
background-color:white;
font-family:Arial,Helvetica,sans-serif;
font-size:11px;
font-style:normal;
line-height:1;
text-decoration:none;
text-align:center;
text-shadow:0 0 1px white;
white-space:nowrap;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
}
.pointyTip,.pointyTipShadow{
/* Setting a thick transparent border on a 0x0 div to create a triangle */
border:6px solid transparent;
bottom:-12px;
height:0;
left:50%;
margin-left:-6px;
position:absolute;
width:0;
}
.pointyTipShadow{
/* The shadow tip is 1px larger, so it acts as a border to the tip */
border-width:7px;
bottom:-14px;
margin-left:-7px;
}
.colorTipContainer{
position:relative;
text-decoration:none !important;
}
.colorTip img {
padding: 5px;
background: white;
}
.black .pointyTip{ border-top-color:#333;}
.black .pointyTipShadow{ border-top-color:#111;}
.black .colorTip{
background-color:#333;
border:1px solid #111;
color:#fcfcfc;
text-shadow:none;
}

Masukan diatas kode ]]></b:skin> Dengan begitu tanpa menuliskan embel-embel apapun pada syntax link, sobat sudah mempunyai tooltip QR Code. Tetapi jika variasi warna dinilai kurang maknyusss, sobat bisa menambahkan kode CSS berikut dan masukan sama persis dengan cara diatas tadi!.white .pointyTip{ border-top-color:white;}
.white .pointyTipShadow{ border-top-color:#ddd;}
.white .colorTip{
background-color:white;
border:1px solid #DDDDDD;
color:#555555;
}
.yellow .pointyTip{ border-top-color:#f9f2ba;}
.yellow .pointyTipShadow{ border-top-color:#e9d315;}
.yellow .colorTip{
background-color:#f9f2ba;
border:1px solid #e9d315;
color:#5b5316;
}
.blue .pointyTip{ border-top-color:#d9f1fb;}
.blue .pointyTipShadow{ border-top-color:#7fcdee;}
.blue .colorTip{
background-color:#d9f1fb;
border:1px solid #7fcdee;
color:#1b475a;
}
.green .pointyTip{ border-top-color:#f2fdf1;}
.green .pointyTipShadow{ border-top-color:#b6e184;}
.green .colorTip{
background-color:#f2fdf1;
border:1px solid #b6e184;
color:#558221;
}
.red .pointyTip{ border-top-color:#bb3b1d;}
.red .pointyTipShadow{ border-top-color:#8f2a0f;}
.red .colorTip{
background-color:#bb3b1d;
border:1px solid #8f2a0f;
color:#fcfcfc;
text-shadow:none;
}Punya deh 6 gaya variasi :-" Cara penulisan syntax untuk warna berbeda ini sedikit menambahkan atribut saja.

<a href="http://blah-bleh-bloh.com/" title="" class="WHITE/GREEN/BLUE/RED/YELLOW">your title</a>

Pilih satu atribut class yg akan dipakai (jangan semua ditulis macam itu) :))

Harap diperhatikan dan dipertimbangkan jika ingin memakai trik ini. Semua atribut title akan berubah menjadi QR Code.

Resource by: <? kovshenin.com
Happy blogging \m/