在线生成二维码实例源码(QRcode)

Ajax框架/RIA

下载此实例

开发语言：js
实例大小：8.07KB
下载次数：31
浏览次数：686
发布时间：2014-03-27
实例类别：Ajax框架/RIA
发布人：crazycode
文件格式：.html
所需积分：2

实例介绍

【实例简介】

【实例截图】

【核心代码】

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>QR图生成器 v0.2</title>
<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAS44nSGVnT0GyW9P6JwovqhQOx0AHdvd5mAWDQjnw7FrH7iTr7hQYyIEUqhGSclPQuTt2jJYwKFKzaw"></script>
<script>
    google.load("jquery", "1.4.2");
    google.load("jqueryui", "1.8.5");
    </script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/themes/base/jquery-ui.css" type="text/css" media="all"/>
<style type="text/css">
#qrcodeMaker {
    width:500px;
    border:#999 solid 1px;
    padding:10px;
    margin:5px;
}
body {
    margin-left: 4px;
    margin-top: 4px;
    margin-right: 4px;
    margin-bottom: 4px;
}
body, td, th {
    font-size: 12px;
}
#confirm {
    text-align:right;
}
label {
    font-weight:bold;
    vertical-align:top;
}
#preview{
    min-height:200px;
    min-width:200px;
    margin:20px;
    text-align:center;
}
#qrURL{
    text-align:center;
    }
#qrURL_text{
    width:400px;
}
</style>
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-68427-3']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www')   '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
</head>
<body>
<div id="qrcodeMaker">
<h1>二维码(QRCode)生成器 v0.2</h1>
<div id="preview"><img src=""/></div>
<div id="qrURL">
<label for="qrURL_text">图片地址：<textarea name="qrURL_text" rows="3" readonly="readonly" id="qrURL_text"></textarea></label>
</div>
<div id="options" style="margin:5px;">
<p>尺寸：
宽
<label for="opt_width"><input name="opt_width" type="text" id="opt_width" value="200" size="4" maxlength="4"/>px</label> x 高
<label for="opt_height"><input name="opt_height" type="text" id="opt_height" value="200" size="4" maxlength="4"/>px</label>
</p>
</div>
<div id="tabs">
<ul>
<li><a href="#tabs-1">默认内容</a></li>
<li><a href="#tabs-2">电话号码</a></li>
<li><a href="#tabs-3">短信&amp;彩信</a></li>
<li><a href="#tabs-4">邮件地址</a></li>
<li><a href="#tabs-5">通讯录</a></li>
</ul>
<div id="tabs-1">
<p>
<label for="tab1_text">文字内容：
<textarea name="tab1_text" id="tab1_text" style="width:80%;height:100px">测试内容</textarea>
</label>
</p>
</div>
<div id="tabs-2">
<p>
<label for="tab2_telno">电话号码：
<input name="tab2_telno" type="text" id="tab2_telno" size="20" maxlength="50"/>
</label>
</p>
</div>
<div id="tabs-3">
<p>
<label for="tab3_telno">号码：
<input name="tab3_telno" type="text" id="tab3_telno" size="30"/>
</label>
<br/>
<label for="tab3_message">信息：
<textarea name="tab3_message" cols="30" rows="4" id="tab3_message"></textarea>
</label>
<br/>
<label for="tab3_type">类型：
<input name="tab3_type" type="radio" id="tab3_type" value="SMSTO" checked="checked"/>
短信
<input name="tab3_type" type="radio" id="tab3_type" value="MMSTO"/>
彩信</label>
</p>
</div>
<div id="tabs-4">
<p>
<label for="tab4_email">邮件地址：</label>
<input name="tab4_email" type="text" id="tab4_email" size="30" maxlength="200"/>
</p>
</div>
<div id="tabs-5">
<p>
<label for="tab5_FormattedName">姓　名：</label>
<input type="text" name="tab5_FormattedName" id="tab5_FormattedName"/>
<br/>
<label for="tab5_Telephone">电　话：</label>
<input type="text" name="tab5_Telephone" id="tab5_Telephone"/>
<br/>
<label for="tab5_Email">邮件地址：</label>
<input type="text" name="tab5_Email" id="tab5_Email"/>
<br/>
<!-- <label for="tab5_X-MSN">MSN：</label>
        <input type="text" name="tab5_X-MSN" id="tab5_X-MSN" />
        <br />-->
<label for="tab5_Organization">公司名称：</label>
<input type="text" name="tab5_Organization" id="tab5_Organization"/>
<br/>
<label for="tab5_Title">职　位：</label>
<input type="text" name="tab5_Title" id="tab5_Title"/>
<br/>
<label for="tab5_Address">联系地址：</label>
<input type="text" name="tab5_Address" id="tab5_Address"/>
<br/>
<label for="tab5_URL">网站地址：</label>
<input type="text" name="tab5_URL" id="tab5_URL"/>
<br/>
</p>
</div>
</div>
<div id="confirm">
<input type="button" name="button" id="confirm_button" value="生成QR图"/>
</div>
</div>
二维码(QRCode)生成器 v0.2<br/>
powered by <a href="http://code.google.com/apis/chart/image_charts.html" target="_blank">Google Chart API</a> &amp; <a href="http://flashphp.org" target="_blank">flashphp.org</a>
<script>
var current_tab_id = 'tabs-1';
$(function() {
        
        $("#tabs").tabs();
        $("#tabs").bind( "tabsselect", function(event, ui) {
            current_tab_id = ui.panel.id;
            //alert($("#tabs").tabs('option', 'selected'));
        });
        $("#tabs").tabs( "select" , 0 );
        $("#confirm_button").button();
        $("#confirm_button").click(function(){
            $("#preview > img").attr("src","");
            var current_tab = $("#tabs").tabs('option', 'selected');
            var qrOpt = {};
            switch(current_tab){
                case 0 :
                    qrOpt.chl = $.trim($("#tabs-1 #tab1_text").attr("value"));
                break;
                
                case 1 :
                    qrOpt.chl = "tel:" $.trim($("#tabs-2 #tab2_telno").attr("value"));
                break;
                
                case 2 :
                    qrOpt.chl = $("#tabs-3 #tab3_type:checked").attr("value") ":" $.trim($("#tabs-3 #tab3_telno").attr("value")) ":" $.trim($("#tabs-3 #tab3_message").attr("value"));
                break;
                
                case 3 :
                    qrOpt.chl = "mailto:" $.trim($("#tabs-4 #tab4_email").attr("value"));
                break;
                
                case 4 :
                    qrOpt.chl = "BEGIN:VCARD\nVERSION:3.0\n";
                    var v = $.trim($("#tabs-5 #tab5_FormattedName").attr("value"));
                    qrOpt.chl  = v ? ("FN:" v "\n") : "";
                    
                    v = $.trim($("#tabs-5 #tab5_Telephone").attr("value"));
                    qrOpt.chl  = v ? ("TEL:" v "\n") : "";
                    
                    v = $.trim($("#tabs-5 #tab5_Email").attr("value"));
                    qrOpt.chl  = v ? ("EMAIL:" v "\n") : "";
                    
                    v = $.trim($("#tabs-5 #tab5_X-MSN").attr("value"));
                    qrOpt.chl  = v ? ("X-MSN:" v "\n") : "";
                    
                    v = $.trim($("#tabs-5 #tab5_Organization").attr("value"));
                    qrOpt.chl  = v ? ("ORG:" v "\n") : "";
                    
                    v = $.trim($("#tabs-5 #tab5_Title").attr("value"));
                    qrOpt.chl  = v ? ("TITLE:" v "\n") : "";
                    
                    v = $.trim($("#tabs-5 #tab5_Address").attr("value"));
                    qrOpt.chl  = v ? ("ADR:" v "\n") : "";
                    
                    v = $.trim($("#tabs-5 #tab5_URL").attr("value"));
                    qrOpt.chl  = v ? ("URL:" v "\n") : "";
                    qrOpt.chl  = "END:VCARD";
                break;
            }
            qrOpt.chs = $("#options #opt_width").attr("value") "x" $("#options #opt_height").attr("value");
            qrOpt.cht = "qr";
            qrOpt.chld = "|1";
            qrOpt.choe = "UTF-8";
            $("#preview > img").attr("src","http://chart.googleapis.com/chart?" $.param(qrOpt));
            $("#qrURL_text").attr("value","http://chart.googleapis.com/chart?" $.param(qrOpt));
            _gaq.push(['_trackEvent', 'QRCodeGen', 'Generate', current_tab_id]);
        });
        $("#confirm_button").click();
    });
    
</script>
</body>
</html>

标签： 二维码

实例下载地址

在线生成二维码实例源码(QRcode)

点此下载实例

不能下载？内容有错？点击这里报错 + 投诉 + 提问

好例子网口号：伸出你的我的手 — 分享！

网友评论

我要评论

小贴士

感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。

类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。

关于好例子网

本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见版权及免责申明

在线生成二维码实例源码(QRcode)

同类人气实例

实例介绍

实例下载地址

在线生成二维码实例源码(QRcode)

相关软件

相关文章

网友评论

小贴士

关于好例子网

下载周排行

下载总排行

在线生成二维码 实例源码(QRcode)

同类人气实例

实例介绍

实例下载地址

在线生成二维码 实例源码(QRcode)

相关软件

相关文章

网友评论

小贴士

关于好例子网

下载周排行

下载总排行

在线生成二维码实例源码(QRcode)

在线生成二维码实例源码(QRcode)