使用requirejs插件来加载jquery.idcode插件的方法和在线实例演示原创

文章标签: 使用实例 RequireJS实例
  • :
  • 04-07 17:45
  • :
  • 33次
  • :
  • 0条
  • 1赞

简介本文非常详细的给你介绍用requirejs插件来加载第三方的jquery.idcode验证码插件的具体方法步骤和在线实例演示。l

站长现在非常的习惯使用requirejs来加载网页里所需要用的第三方插件或js文件,因为requirejs使用起来真的是太方便了。

本文站长来给大家说下如何使用requirejs插件来加载jquery.idcode这个验证码插件,下面是站长准备的在线实例演示:

使用requirejs来加载jquery.idcode验证码插件的在线实例演示


下面站长一步一步的教你如何来做:

第一步:网页里引入requirejs源文件:

<script language="JavaScript" src="//cdn.bootcss.com/require.js/2.3.5/require.min.js"></script>


第二步:配置require.config:

require.config({	
    paths: {		
        "jquery": "//apps.bdimg.com/libs/jquery/1.9.1/jquery.min",		
        "css": "//cdn.bootcss.com/require-css/0.1.10/css.min",		
        "jquery.idcode": "/html/aijquery/jquery.idcode"	
    },	
    shim: {		
        "jquery.idcode": {			
            deps: ["css!/html/aijquery/jquery.idcode","jquery"]		
        }	
    }
});

PS:我们把jquery.idcode插件对应的css样式文件配置在了shim里,这样我们在引用的时候就会同步加载上面我们配置的css样式文件了,如果你对require里加载css样式文件有问题,可以看这篇文章:require-css的使用方法及实例

第三步:编写我们所需的js代码:

require(["jquery","jquery.idcode"], function($) {
    $.idcode.setCode({
        e: "yzm",
	codeType: {
	    name: "follow",
	    len: 4
	},
	codeTip: "换验证码",
	inputID: "aijquery_yzm"
    });	
    $("#aijquery").click(function() {
        var IsBy = $.idcode.validateCode();		
        alert(IsBy);	
    });
});

好了,到这里就完成了,当然不要忘了布置相应的HTML代码:

<label class="lblVerification">验证码</label>
<input type="text" id="aijquery_yzm" />
<span id="yzm"></span><br>
<button type="button" id="aijquery">验证</button><br>


您正在找的文章可能是:
热点文章
热点图文
最近更新