jQuery qrcode生成二維碼的方法
現(xiàn)在二維碼越來(lái)越流行,很多網(wǎng)頁(yè)都會(huì)有個(gè)二維碼,掃描后可通過(guò)手機(jī)瀏覽。
以前做類似的項(xiàng)目一般是在網(wǎng)頁(yè)上生成圖片,然后把圖片插入到網(wǎng)頁(yè)。
這樣做不能每個(gè)頁(yè)面都生成二維碼。
jquery-qrcode是一個(gè)能夠在瀏覽器端生成二維碼的jquery插件。它是獨(dú)立的,最小壓縮之后不足4k,也沒(méi)有圖片下載請(qǐng)求。引入該類庫(kù)之后,只需要一行代碼,就可以很容易在web頁(yè)面加上二維碼。
qrcode其實(shí)是通過(guò)使用jQuery實(shí)現(xiàn)圖形渲染,畫圖,支持canvas(HTML5)和table兩種方式,可以到
https://github.com/jeromeetienne/jquery-qrcode
獲取最新的代碼。
如何使用
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è)面中需要顯示二維碼的地方加入以下代碼:
<div id="code"></div>
3、調(diào)用qrcode插件
qrcode支持canvas和table兩種方式進(jìn)行圖片渲染,默認(rèn)使用canvas方式,效率最高,當(dāng)然要瀏覽器支持html5
直接調(diào)用:
$('#code').qrcode("http://m.fzitv.net.com"); //任意字符串
高級(jí)屬性:
$("#code").qrcode({
render: "table", //table方式
width: 200, //寬度
height:200, //高度
text: "www.helloweba.com" //任意內(nèi)容
});
- 利用jquery包將字符串生成二維碼圖片
- 利用jquery.qrcode在頁(yè)面上生成二維碼且支持中文
- 使用jquery組件qrcode生成二維碼及應(yīng)用指南
- 使用jquery.qrcode生成彩色二維碼實(shí)例
- jquery.qrcode在線生成二維碼使用示例
- jquery插件qrcode在線生成二維碼
- Jquery 類網(wǎng)頁(yè)微信二維碼圖塊滾動(dòng)效果具體實(shí)現(xiàn)
- jQuery實(shí)現(xiàn)微信長(zhǎng)按識(shí)別二維碼功能
- 使用jquery.qrcode.min.js實(shí)現(xiàn)中文轉(zhuǎn)化二維碼
- jQuery實(shí)現(xiàn)二維碼掃描功能
相關(guān)文章
TextArea不支持maxlength的解決辦法(jquery)
自己寫了一個(gè)jquery的擴(kuò)展,這樣就可以很容易實(shí)現(xiàn)對(duì)textarea控制最大長(zhǎng)度了。2011-09-09
淺談jQuery綁定事件會(huì)疊加的解決方法和心得總結(jié)
下面小編就為大家?guī)?lái)一篇淺談jQuery綁定事件會(huì)疊加的解決方法和心得總結(jié)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10
jQuery實(shí)現(xiàn)下滑菜單導(dǎo)航效果代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)下滑菜單導(dǎo)航效果代碼,通過(guò)jquery操作鼠標(biāo)事件及頁(yè)面樣式動(dòng)態(tài)操作實(shí)現(xiàn)下滑菜單導(dǎo)航功能,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-08-08
jquery checkbox無(wú)法用attr()二次勾選問(wèn)題的解決方法
下面小編就為大家?guī)?lái)一篇jquery checkbox無(wú)法用attr()二次勾選問(wèn)題的解決方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-07
淺談jquery.fn.extend與jquery.extend區(qū)別
本文給大家簡(jiǎn)單描述了下jquery.fn.extend與jquery.extend的概念以及區(qū)別,十分的實(shí)用,有需要的小伙伴可以參考下。2015-07-07
jQuery實(shí)現(xiàn)導(dǎo)航回彈效果
本文主要介紹了jQuery實(shí)現(xiàn)導(dǎo)航回彈效果的實(shí)例,具有很好的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-02-02
jquery對(duì)復(fù)選框(checkbox)的操作匯總
本文給大家匯總介紹了一些jQuery操作復(fù)選框(checkbox)的方法和技巧,非常的簡(jiǎn)單實(shí)用,有需要的小伙伴可以參考下。2016-01-01
jQuery實(shí)現(xiàn)的自動(dòng)加載頁(yè)面功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的自動(dòng)加載頁(yè)面功能,結(jié)合簡(jiǎn)單實(shí)例形式分析了jQuery針對(duì)頁(yè)面元素的動(dòng)態(tài)加載與屬性操作相關(guān)技巧,需要的朋友可以參考下2016-09-09
EasyUI中實(shí)現(xiàn)form表單提交的示例分享
這里給大家分享的是一段使用EasyUI中實(shí)現(xiàn)form表單提交的方法的核心代碼,小伙伴們根據(jù)自己的需求補(bǔ)全form部分吧,希望大家能夠喜歡。2015-03-03

