基于jquery二維碼生成插件qrcode
本文將介紹一款基于jquery的二維碼生成插件qrcode,在頁(yè)面中調(diào)用該插件就能生成對(duì)應(yīng)的二維碼。
1、首先在頁(yè)面中加入jquery庫(kù)文件和qrcode插件。
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.qrcode.min.js"></script>
2、在頁(yè)面布局中添加一個(gè)div
<div class="modal-body" id="qrCode" style="left:40px"> </div>
3、調(diào)用qrcode插件。
var str = "http://" + location.host + "/ActivityDetail.html?id=" + row.ActivityGuid + "&isMail=" + row.isMail + ""; $("#qrCode").empty(); $('#qrCode').qrcode(str); //$('#qrCode').qrcode("http://chabaoo.cn");//任意字符串
4、我們?cè)囼?yàn)的時(shí)候發(fā)現(xiàn)不能識(shí)別中文內(nèi)容的二維碼,通過(guò)查找多方資料了解到,jquery-qrcode是采用charCodeAt()方式進(jìn)行編碼轉(zhuǎn)換的。而這個(gè)方法默認(rèn)會(huì)獲取它的Unicode編碼,如果有中文內(nèi)容,在生成二維碼前就要把字符串轉(zhuǎn)換成UTF-8,然后再生成二維碼。您可以通過(guò)以下函數(shù)來(lái)轉(zhuǎn)換中文字符串:
function toUtf8(str) { var out, i, len, c; out = ""; len = str.length; for(i = 0; i < len; i++) { c = str.charCodeAt(i); if ((c >= 0x0001) && (c <= 0x007F)) { out += str.charAt(i); } else if (c > 0x07FF) { out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F)); out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F)); out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F)); } else { out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F)); out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F)); } } return out; }
可以把這個(gè)方法直接寫(xiě)入到引用的插件里面,后面直接調(diào)用即可。如下:
var str = toUtf8("2017雞年大吉!"); $('#qrCode').qrcode(str);
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- javaScript生成支持中文帶logo的二維碼(jquery.qrcode.js)
- 使用jquery.qrcode.js生成二維碼插件
- 使用jQuery.Qrcode插件在客戶端動(dòng)態(tài)生成二維碼并添加自定義Logo
- jQuery qrcode生成二維碼的方法
- 使用jquery.qrcode.min.js實(shí)現(xiàn)中文轉(zhuǎn)化二維碼
- 使用jquery插件qrcode生成二維碼
- jquery插件qrcode在線生成二維碼
- 使用jquery組件qrcode生成二維碼及應(yīng)用指南
- 使用jquery.qrcode生成彩色二維碼實(shí)例
- 利用jquery.qrcode在頁(yè)面上生成二維碼且支持中文
相關(guān)文章
Jquery下的26個(gè)實(shí)用小技巧(jQuery tips, tricks & solutions)
前段時(shí)間發(fā)布了Jquery類庫(kù)1.4版本,使用者也越來(lái)越多,為了方便大家對(duì)Jquery的使用,下面列出了一些Jquery使用技巧。2010-03-03jquery mobile移動(dòng)端幻燈片滑動(dòng)切換效果
這篇文章主要為大家詳細(xì)介紹了jquery mobile移動(dòng)端幻燈片滑動(dòng)切換效果,實(shí)現(xiàn)滑動(dòng)切換和點(diǎn)擊切換,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-01-01Lazy Load 延遲加載圖片的jQuery插件中文使用文檔
Lazy Load 是一個(gè)用 JavaScript 編寫(xiě)的 jQuery 插件. 它可以延遲加載長(zhǎng)頁(yè)面中的圖片. 在瀏覽器可視區(qū)域外的圖片不會(huì)被載入, 直到用戶將頁(yè)面滾動(dòng)到它們所在的位置. 這與圖片預(yù)加載的處理方式正好是相反的2012-10-10原生Aajax 和jQuery Ajax 寫(xiě)法個(gè)人總結(jié)
AJAX:即“Asynchronous Javascript And XML”(異步JavaScript和XML),是指一種創(chuàng)建交互式網(wǎng)頁(yè)應(yīng)用的網(wǎng)頁(yè)開(kāi)發(fā)技術(shù)。本文重點(diǎn)給大家介紹原生Aajax 和jQuery Ajax 個(gè)人總結(jié),一起看看吧2017-03-03jQuery實(shí)現(xiàn)的跨容器無(wú)縫拖動(dòng)效果代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)的跨容器無(wú)縫拖動(dòng)效果代碼,可實(shí)現(xiàn)容器的任意添加與拖動(dòng)功能,涉及jQuery UI插件的使用技巧,需要的朋友可以參考下2016-06-06jQuery-1.9.1源碼分析系列(十)事件系統(tǒng)之事件包裝
這篇文章主要介紹了jQuery-1.9.1源碼分析系列(十)事件系統(tǒng)之事件包裝的相關(guān)資料,需要的朋友可以參考下2015-11-11jQuery實(shí)現(xiàn)的分頁(yè)插件完整示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的分頁(yè)插件,結(jié)合完整實(shí)例形式分析了jQuery分頁(yè)插件的定義與使用相關(guān)操作技巧,需要的朋友可以參考下2020-05-05如何使用jquery實(shí)現(xiàn)文字上下滾動(dòng)效果
這篇文章主要介紹了jquery實(shí)現(xiàn)文字上下滾動(dòng)效果。文字上下滾動(dòng)循環(huán)顯示也是一種非常常見(jiàn)而且非常容易實(shí)現(xiàn)的文字特效。這是一種現(xiàn)在比較流行用的效果,用法很簡(jiǎn)單。2016-10-10