/ index.html
index.html
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 <meta name="generator" content="pandoc" /> 7 <meta name="date" content="" /> 8 </head> 9 <body> 10 <div id="jquery.qrcode.js" 11 ><h1 12 >jquery.qrcode.js</h1 13 ><p 14 ><a href='http://jeromeetienne.github.com/jquery-qrcode'>jquery.qrcode.js</a> is <em 15 >jquery plugin for a pure browser qrcode generation</em 16 >. It allow you to easily add qrcode to your webpages. It is standalone, less than 4k after minify+gzip, no image download. It doesnt rely on external services which go on and off, or add latency while loading. It is based on a <a href='http://www.d-project.com/qrcode/index.html'>library</a> which build qrcode in various language. <a href='http://jeromeetienne.github.com/jquery-qrcode'>jquery.qrcode.js</a> wraps it to make it easy to include in your own code.</p 17 ><p 18 >Show, dont tell, here is a <a href='examples/basic.html'>example</a></p 19 ><div id="how-to-use-it" 20 ><h2 21 >How to Use It</h2 22 ><p 23 >Let me walk you thru it. First include it in your webpage with the usual script tag</p 24 ><pre 25 ><code 26 ><script type="text/javascript" src="jquery.qrcode.min.js"></script> 27 </code 28 ></pre 29 ><p 30 >Then create a DOM element which gonna contains the generated qrcode image. Lets say a div</p 31 ><pre 32 ><code 33 ><div id="qrcode"></div> 34 </code 35 ></pre 36 ><p 37 >Then you add the <em 38 >qrcode</em 39 > in this container by</p 40 ><pre 41 ><code 42 >jquery('#qrcode').qrcode("this plugin is great"); 43 </code 44 ></pre 45 ><p 46 >This is it. see it <a href='examples/basic.html'>live</a>.</p 47 ></div 48 ><div id="conclusion" 49 ><h2 50 >Conclusion</h2 51 ><p 52 ><a href='http://jeromeetienne.github.com/jquery-qrcode'>jquery.qrcode.js</a> is available on github <a href='https://github.com/jeromeetienne/jquery-qrcode'>here</a> under <a href='https://github.com/jeromeetienne/jquery-qrcode/blob/master/MIT-LICENSE.txt'>MIT license</a>. If you hit bugs, fill issues on github. Feel free to fork, modify and have fun with it :)</p 53 ></div 54 ></div 55 > 56 <style> 57 body { 58 margin: auto; 59 padding-right: 1em; 60 padding-left: 1em; 61 max-width: 44em; 62 border-left: 1px solid #eee; 63 border-right: 1px solid #eee; 64 font-family : Verdana, sans-serif; 65 font-size : 100%; 66 line-height : 140%; 67 color : #eee; 68 background-color : #22252a; 69 } 70 pre { 71 border : 1px dotted gray; 72 background-color : #444a50; 73 color : #1111111; 74 padding : 0.5em; 75 } 76 code { 77 font-family : monospace; 78 } 79 a { 80 text-decoration : none; 81 color : lightSteelBlue; 82 } 83 a:hover { 84 text-decoration : underline; 85 } 86 h1, h2, h3, h4, h5 { font-family: verdana; 87 font-weight: bold; 88 border-bottom: 1px dotted #eee; 89 color: lightSteelBlue; } 90 h1 { 91 color : #cd5; 92 font-size : 130%; 93 } 94 h1:nth-child(1) { 95 font-size : 300%; 96 text-align : center; 97 height : 1em; 98 } 99 h2 { 100 font-size : 110%; 101 } 102 103 h3 { 104 font-size : 95%; 105 } 106 107 h4 { 108 font-size : 90%; 109 font-style : italic; 110 } 111 112 h5 { 113 font-size : 90%; 114 font-style : italic; 115 } 116 117 h1.title { 118 font-size : 200%; 119 font-weight : bold; 120 padding-top : 0.2em; 121 padding-bottom : 0.2em; 122 text-align : left; 123 border : none; 124 } 125 126 dt code { 127 font-weight : bold; 128 } 129 dd p { 130 margin-top : 0; 131 } 132 img { 133 /* border-color : white; 134 border-style : solid; 135 */} 136 137 #footer { 138 padding-top : 1em; 139 font-size : 70%; 140 color : gray; 141 text-align : center; 142 } 143 144 </style> 145 <!-- follow me on twitter --> 146 <a href="http://www.twitter.com/jerome_etienne"> 147 <img style="position: absolute; bottom: 10px; right: 10px; border: 0;" src="http://twitter-badges.s3.amazonaws.com/follow_me-c.png" alt="Follow jerome_etienne on Twitter"/> 148 </a> 149 <!-- github ribbon --> 150 <a href="https://github.com/jeromeetienne/jquery-qrcode"><img style="position: absolute; top: 0; left: 0; border: 0;" src="https://assets0.github.com/img/ce742187c818c67d98af16f96ed21c00160c234a?repo=&url=http%3A%2F%2Fs3.amazonaws.com%2Fgithub%2Fribbons%2Fforkme_left_gray_6d6d6d.png&path=" alt="Fork me on GitHub"></a> 151 <!-- twitter share + facebook like --> 152 <div style="position: absolute; top: 10px; right: 10px; border: 0;"> 153 154 <a href="http://twitter.com/share" class="twitter-share-button" data-count="none" data-via="jerome_etienne">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> 155 </div> 156 </body> 157 </html> 158