基于jquery二維碼生成插件qrcode
本文將介紹一款基于jquery的二維碼生成插件qrcode,在頁面中調(diào)用該插件就能生成對(duì)應(yīng)的二維碼。
1、首先在頁面中加入jquery庫文件和qrcode插件。
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.qrcode.min.js"></script>
2、在頁面布局中添加一個(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://www.dbjr.com.cn");//任意字符串
4、我們?cè)囼?yàn)的時(shí)候發(fā)現(xiàn)不能識(shí)別中文內(nèi)容的二維碼,通過查找多方資料了解到,jquery-qrcode是采用charCodeAt()方式進(jìn)行編碼轉(zhuǎn)換的。而這個(gè)方法默認(rèn)會(huì)獲取它的Unicode編碼,如果有中文內(nèi)容,在生成二維碼前就要把字符串轉(zhuǎn)換成UTF-8,然后再生成二維碼。您可以通過以下函數(shù)來轉(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è)方法直接寫入到引用的插件里面,后面直接調(diào)用即可。如下:
var str = toUtf8("2017雞年大吉!");
$('#qrCode').qrcode(str);
以上就是本文的全部內(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在頁面上生成二維碼且支持中文
相關(guān)文章
Jquery下的26個(gè)實(shí)用小技巧(jQuery tips, tricks & solutions)
前段時(shí)間發(fā)布了Jquery類庫1.4版本,使用者也越來越多,為了方便大家對(duì)Jquery的使用,下面列出了一些Jquery使用技巧。2010-03-03
jquery mobile移動(dòng)端幻燈片滑動(dòng)切換效果
這篇文章主要為大家詳細(xì)介紹了jquery mobile移動(dòng)端幻燈片滑動(dòng)切換效果,實(shí)現(xiàn)滑動(dòng)切換和點(diǎn)擊切換,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-01-01
Lazy Load 延遲加載圖片的jQuery插件中文使用文檔
Lazy Load 是一個(gè)用 JavaScript 編寫的 jQuery 插件. 它可以延遲加載長頁面中的圖片. 在瀏覽器可視區(qū)域外的圖片不會(huì)被載入, 直到用戶將頁面滾動(dòng)到它們所在的位置. 這與圖片預(yù)加載的處理方式正好是相反的2012-10-10
原生Aajax 和jQuery Ajax 寫法個(gè)人總結(jié)
AJAX:即“Asynchronous Javascript And XML”(異步JavaScript和XML),是指一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)。本文重點(diǎn)給大家介紹原生Aajax 和jQuery Ajax 個(gè)人總結(jié),一起看看吧2017-03-03
jQuery實(shí)現(xiàn)的跨容器無縫拖動(dòng)效果代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)的跨容器無縫拖動(dòng)效果代碼,可實(shí)現(xiàn)容器的任意添加與拖動(dòng)功能,涉及jQuery UI插件的使用技巧,需要的朋友可以參考下2016-06-06
jQuery-1.9.1源碼分析系列(十)事件系統(tǒng)之事件包裝
這篇文章主要介紹了jQuery-1.9.1源碼分析系列(十)事件系統(tǒng)之事件包裝的相關(guān)資料,需要的朋友可以參考下2015-11-11
如何使用jquery實(shí)現(xiàn)文字上下滾動(dòng)效果
這篇文章主要介紹了jquery實(shí)現(xiàn)文字上下滾動(dòng)效果。文字上下滾動(dòng)循環(huán)顯示也是一種非常常見而且非常容易實(shí)現(xiàn)的文字特效。這是一種現(xiàn)在比較流行用的效果,用法很簡單。2016-10-10

