先来看看效果图:购物车一、代码如果看了这个效果有兴趣想知道怎么做出来的话,那就继续往下看吧。话不多少,直接上代码。html代码:<!DOCTYPE html><html lang="en" ng-app="cart"><head> <meta charset="UTF-8"> <title>购物车</title> <link rel="stylesheet" href="../scripts/angular-1.4.0-rc.2/docs/components/bootstrap-3.1.1/css/bootstrap.min.css"> <link rel="stylesheet" href="main.css"></head><body ng-controller="cartCtr"><table class="table table-hover" ng-show="items.length"> <caption>AngularJS实现购物车</caption> <tr> <th>序号</th> <th>商品信息</th> <th>单价(元)</th> <th>数量</th> <th>金额(元)</th> <th>操作</th> </tr> <tr ng-repeat=" item in items"> <td>{{$index + 1}}</td> <td><a href="{{item.linkUrl}}" target="_blank" title="此链接将跳转到淘宝相关页面...">{{item.title}}</a></td> <td class="bold">{{item.price|number:2}}</td> <td> <button type="button" class="btn btn-default btn-xs" ng-click="reduce(item.id)" ng-disabled="item.quantity<=1">-</button> <input type="text" size="5" ng-model="item.quantity" ng-keydown="quantityKeydown()" ng-keyup="quantityKeyup()"> <button type="button" class="btn btn-default btn-xs" ng-click="add(item.id)">+</button> </td> <td class="bold mark">{{item.price*item.quantity|number:2}}</td> <td> <button type="button" class="btn btn-default btn-xs" ng-click="delete(item.id)">删除</button> </td> </tr></table><div class="empty" ng-show="!items.length">购物车空空,快去寻找宝贝</div><div class="total"> 已选商品:<span>{{getQuantites()}} </span> 合计: <span class=" mark" ng-show="getTotalAmount()<15000">{{getTotalAmount()|number:2}}</span> <span class=" mark" ng-show="getTotalAmount()>=15000"> {{getTotalAmount()*discount|number:2}}<span class="btn btn-xs">(9折)</span> <span class="discount">({{getTotalAmount()|number:2}})</span> </span> <button type="button" class="btn btn-primary btn-sm" ng-click="alertSubmit()">结 算</button></div><script src="../scripts/angular-1.4.0-rc.2/angular.js"></script><script src="app.js"></script></body></html>js代码:/ Created by wqq on 2016/5/25. /var cartModule = angular.module('cart', []);cartModule.controller('cartCtr', ['$scope', function ($scope) { $scope.discount = 0.9; $scope.items = [{id: 10001,title: "Web全栈工程师的自我修养 余果", price: 40.80,quantity: 2,linkUrl: "https://detail.tmall.com/item.htm?spm=a1z0d.6639537.1997196601.4.cwywJs&id=532166746631"}, {id: 10002,title: "MacBook Pro Retina 15英寸", price: 16088.00,quantity: 1,linkUrl: "https://detail.tmall.com/item.htm?spm=a1z0d.6639537.1997196601.26.cwywJs&id=45771116847"}, {id: 10003,title: "Surface Book I5 128G 独显",price: 11088.00, quantity: 1,linkUrl: "https://detail.tmall.com/item.htm?spm=a1z0d.6639537.1997196601.15.cwywJs&id=525614504276"}, {id: 10004, title: "Lenovo Yoga3Pro I5 4G",price: 7299.00, quantity: 1,linkUrl: "https://detail.tmall.com/item.htm?spm=a1z0d.6639537.1997196601.37.cwywJs&id=41541519814"} ]; $scope.add = function (id) { angular.forEach($scope.items, function (item, index, array) { if (item.id === id) {item.quantity++;} }) }; $scope.reduce = function (id) { angular.forEach($scope.items, function (item, index, array) { if (item.id === id) {item.quantity--; } }) }; //输入框添加keydown事件,避免输入非正整数 $scope.quantityKeydown = function (event) { event = event || window.event; var target=event.target||event.srcElement; var keycode = event.keyCode; if ((37 <= keycode && keycode <= 40)||(48 <= keycode && keycode <= 57) || (96 <= keycode && keycode <= 105) || keycode == 8) { //方向键↑→ ↓←、数字键、backspace } else { console.log(keycode); event.preventDefault(); return false; } };//keyup事件,当输入数字为0时,重新刷新文本框内容$scope.quantityKeyup = function (event) { event = event || window.event; var target=event.target||event.srcElement; var keycode = event.keyCode; if (48 === keycode || 96 === keycode ) { target.value=parseInt(target.value); }}; //删除商品 $scope.delete = function (id) { $scope.items.forEach(function (item, index) { if (item.id == id) { if (confirm("确定要从购物车中删除此商品?")) { $scope.items.splice(index, 1); return; } } }) }; //计算已选商品数量 $scope.getQuantites = function () { var quantities = 0; angular.forEach($scope.items, function (item, index, array) { if (item.quantity) { quantities += parseInt(item.quantity); } }); return quantities; }; //计算合计总金额 $scope.getTotalAmount = function () { var totalAmount = 0; angular.forEach($scope.items, function (item, index, array) { totalAmount += item.quantity * item.price; }); return totalAmount; }; $scope.alertSubmit = function () {alert("Angular实现购物车"); }}]);二、分析请忽略bootstrap的样式,我们只关注Angular,代码很简单,我们来简单的分析一下:1. 准备首先我们我们定义了一个cart模块、cartCtr控制器,并将它们引入到了html代码中,同时我们还在js中定义了一个数组items用于模拟购物车内的东西。2. ng-repeat迭代器为了将items里的数据动态的遍历加载出来,我们使用Angular里的内置指令ng-repeat,它可以非常方便的遍历数组,生成DOM元素,在这里循环生成了4个<tr>标签:  <tr ng-repeat=" item in items">item就是items数组里面的某一个对象,是不是感觉这就是js中的for/in循环~~如果你是一名.net开发人员,用过asp.net mvc的Razor就对这种其他语言无缝操作DOM元素很熟悉了,至于java、PHP是否有没有类似的语法我就不清楚了,我是一名苦逼的.net开发。ng-repeat迭代器我们可以看到第一个td中用到了$index,这是ng-repeat内的,并不是我们定义的,它的值是当前item在items中的索引,从0开始,所以我们用$index+1作为序号,其他的还有(类似item.linkUrl)数据绑定。我们在单价和金额两列用到了{{ xxx|number:2}},这是Angular中的一种过滤器,作用是将前面的值xxx保留两位小数,金额嘛,我们当然要精确一些。刚才说了这是一种过滤器,那就还有其他的,比如currency,可以在xxx前面添加一个$符号表示美元,可以自行百度其他过滤器用法。3. 添加事件当前界面上分别有数量+、-按钮、删除按钮,这几个事件都比较简单,利用ng-click给元素添加点击事件。通过传递某个商品的id,找到这个商品,对这个商品进行加、减、删除操作,只不过在“-”按钮上有添加了一个ng-disabled标签,根据名字我们就可以很容易想到html的disabled属性,它的作用就是当ng-disabled的值为true时DOM元素禁用,同理,下面用到的ng-show也是一样的,true时显示,false时隐藏。如果是数字的话会自动转化为boolean值,0是false,非0是true,注意负数也是true!。这里我让当数量为1时就不能减少了,因为再少就可以直接删除了呀~然后在input元素添加ng-keydown事件,使其只能输入方向键↑→ ↓←、数字键、backspace。然后我试了下确实到达了目的,但是却可以输入类似“00021”这种数字,显然这并不能令人满意。我看了看淘宝的购物车,发现当在前面输入0时,这个文本框的内容会自动刷新,去掉前面的0,于是我又添加了ng-keyup事件:$scope.quantityKeyup = function (event) { event = event || window.event; //兼容IE8以下,target也是 var target=event.target||event.srcElement; var keycode = event.keyCode; if (48 === keycode || 96 === keycode ) { target.value=parseInt(target.value); }};这时当我输入0时,文本框值就会自动刷新,为什么不添加到keydown里面而要另外再加一个事件呢?那是因为触发keydown事件时target.value的值还是原来的值,还没有包含本次输入的按键,而在keydown之后值就是新值了,这时候我们接着让触发keyup事件就可以达到目的了,可以对照看下淘宝购物车的效果,我觉得我的体验比它的更好,因为它只要不是在最后输入数字文本框总是会失去焦点。。。4. 统计统计数量就是直接绑定方法,遍历数组返回值。合计金额这块,我做了个满15000打9折的设计。利用ng-show隐藏显示带打折信息的合计金额。三、总结js中用到了几处forEach遍历数组,ECMAScript5中原生的方法是array.forEach(function(item,index,array){});angular中也封装了,angular.forEach(array,function(item,index,array){});代码中我两种方法都用到了,也不知道那种性能好。。至此,购物车就已经完成了,利用Angular的双向绑定,可以快速的实现数量、金额的联动改变。希望这篇文章的内容对大家学习和使用Angular能有所帮助,如果有疑问可以留言交流。

本文实例讲述了jQuery简单入门示例之用户校验。分享给大家供大家参考,具体如下:jQuery在小编的世界中,也就是JavaScript和查询(Query),即是辅助JavaScript开发的库,百度百科对JQuery的介绍比较详细,小伙伴可以东东自己可耐的小爪子,上网进行搜索,说不定,有意外惊喜哦,今天这篇文章,小编简单的介绍一下JQuery的一些基本知识,然后小编在集合实例,讲解一下在具体的应用过程中,我们的JQuery又是如何在她的舞台熠熠生辉......通过JQuery的学习,我们可以学到哪些知识nie,比如我们会学会JQuery的API函数的使用,以及简单的实例的实现方法还有一些html、css、js的小知识,作为明星级的框架JQuery,都有谁在使用nie,比如我们熟悉的Goole、IBM、ORACLE、DELL、土豆等等,都在使用JQuery做前端的开发,我们的JQuery是不是很火爆。介绍完了JQuery的一些基本知识以后,接下来,小编简单来编写一个实例---用户名校验,首先,我们来分析一下这个小例子的代码思路,首先服务器端思路分析,对指定用户名返回用户名已经存在,对其他用户名,返回用户名可以使用;输入:用户名;输出:提示信息,接着我们来编写代码,编写代码之前,小编简单对这个小例子的目录进行一个简单的描述:我们需要一个html的文件,我们取名叫做UserVerify,除此之外,我们需要写css和js的文件,现在比较流行。遵循web标准来看,我们需要把css文件和js文件单独放置,便于管理,我们需要分别建立css文件和js文件,除此之外,应用当中可能要用到图片,所以我们单独建立一个images文件,接着,我们开始编写代码:有一个页面文件,先来编辑html,保证内面内容通过html标签表示出来,代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html> <head> <title>JQuery实战1-用户名校验</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link type="text/css" rel="stylesheet" href="css/userVerify.css" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/userVerify.js"></script> </head> <body> 请输入用户名:<input type="text" id="userName" class="userText"/> <input type="button" value="校验" id="verifyButton" /> <div id="result"></div> </body></html>接着,在css文件目录下建立一个css文件,编写css的代码:.userText { /*控制文本框的边框是红色的实线*/ border: 1px solid red; background-image: url(../images/userVerify.gif); background-repeat: repeat-x; background-position: bottom;}相应的,在js中我们也要建立两个文件,一个jquery一个userVerify,鉴于jquery的代码较多,所以小编已经上传相关资源,有需要的小伙伴可以到该链接下载,接着,我们来编写userVerify的代码,来给整理页面添加行为能力:/* * 需要通过Javascript代码来做两件事情 * 1.button被按下的时候,需要将文本框中的数据获取到,然后发送给服务器端,最后接受服务器返回的数据,填充到我们预留的div中,这样用户就可以看到结果 * 2.文本框上,用户按键之后,需要判断文本框中的内容是否为空,如果不为空,红色的边框和背景图就应该取消,否则保留 * *//* * 需要在页面装载完成是注册上这些工作 * */$(document).ready(function() { //这里面的内容就是页面装载完成后需要执行的代码 var userNameNode = $("#userName"); //需要找到button按扭,注册事件 $("#verifyButton").click(function() { //1.获取文本框的内容 var userName = userNameNode.val(); //2.将这个内容发送给服务器端 if (userName == "") { alert("用户名不能为空"); } else { $.get("http://127.0.0.1:8080/JQuery/UserVerify?userName=" + encodeURI(encodeURI(userName)),null,function(response){ //3.接收服务器端返回的数据,填充到div中 $("#result").html(response); }); } }); //需要找到文本框,注册事件 userNameNode.keyup(function(){ //获取当前文本框中的内容 var value = userNameNode.val(); if (value == "") { //让边框变成红色,并且带背景图 userNameNode.addClass("userText"); } else { //去掉边框和背景图 userNameNode.removeClass("userText"); } });});我们来看一下运行效果:小例子,小编就演示到这里,通过这个小例子,我们知道html负责页面内容,css负责页面样式,js负责页面行为,html中应该有doctype来告知浏览器的渲染显示方式,border属相可以控制页面元素的边框,background-***可以控制背景图,以及背景图的位置,重复显示的方式等等,这些小知识点,我们都可以在这个小例子得到充分的认识,补充一个小的知识点,发送给服务器端的数据在js中做连词encodeURL,然后再服务器端的代码中按UTF-8的方式做一次URLDecode,可以解决中文中的乱码问题。更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery form操作技巧汇总》、《jQuery常用插件及用法总结》、《jQuery操作json数据技巧汇总》、《jQuery扩展技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》希望本文所述对大家jQuery程序设计有所帮助。

前言最近用 Node 写一个小玩意,需要用到 MySQL 数据库,现在用得最广泛的是 mysql 这个库。然后呢,现在 ORM 这么火,干脆也上 ORM 吧,正好我也不会可以学习一下,于是找到了 Sequelize.js 这个 ORM 库。发现问题看看 Sequelize 的文档,so easy,两分钟搞定~import Sequelize from 'sequelize';let sequelize = new Sequelize('database', 'username', 'password', { host: 'localhost', port: 3306, dialect: 'mysql', pool: { max: 5, min: 0, idle: 10000 }});// ...后面还有一堆懒得贴了运行一下SequelizeConnectionRefusedError: connect ECONNREFUSED 127.0.0.1:3306什么鬼,为什么会出现这个错误呢?我明明设置的是 localhost,为什么会变成 127.0.0.1?解决问题照例先谷歌,确实发现了很多人也遇到了这个问题,解决方法大概有这么几种:     1、你丫以为不用装 MySQL 就能跑了么?快去装数据库!     2、你数据库运行了么你?赶紧 /etc/init.d/mysqld start 运行起来     3、端口写错了     4、你是不是开启了 skip-networking 这个选项?Remove it !看到这里,我反应过来了,因为我的数据库不涉及到远程访问,只要使用 Unix socket 通信就够了,于是就启用了 skip-networking 让 MySQL 不监听指定端口。先科普一下 skip-networking 是什么Do not listen for TCP/IP connections at all. All interaction with mysqld must be made using named pipes or shared memory (on Windows) or Unix socket files (on Unix). This option is highly recommended for systems where only local clients are permitted.翻译一下就是:不要监听 TCP/IP 连接。所有与 mysqld 的交互必须使用命名管道或共享内存(在 Windows 上)或 Unix socket 文件(在 Unix 上)。强烈建议对只允许本地客户端的系统使用此选项。来源但是为了安全性,我并不想把这个选择给移除,难道只好忍痛不用 ORM 了吗?因为看了文档,mysql 这个连接库是可以使用 socketPath 这个属性指定 Unix 套接字文件,但是 Sequelize.js 没发现有关属性。最后只好发 issue,不久就有 dalao 回答说可以用 dialectOptions 设置 mysql 的属性。下面是测试成功的代码:import Sequelize from 'sequelize';let sequelize = new Sequelize('database', 'username', 'password', { host: 'localhost', port: 3306, dialect: 'mysql', dialectOptions: { socketPath: '/tmp/mysql.sock' // 指定套接字文件路径 } pool: { max: 5, min: 0, idle: 10000 }});就是这么简单…总结以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。

前言在最近的项目中有个需求是要生成带参的二维码,考虑过用JAVA后台生成返回前端展示,后面了解到用jquery的qrcode.js插件可以很好现实,下面话不多说,直接上实现的过程。引入js:require.config({ baseUrl : "/", paths: { jquery:'plugin/jquery/jquery-3.1.0.min', qrcode:'plugin/qrcode/qrcode' } }); require( [ 'jquery', 'qrcode' ], function($){ xxxx.. } )待渲染的dom:<div id="qrcodeCanvas"></div>初始化二维码:$('#qrcodeCanvas').qrcode({ text: "http://h5.sztoda.cn/base/login", background: "#CCC",//背景 foreground: "#FFF",//前景 width: 100,//宽 height: 100,//高 }); 值得注意的是,“text”如果是链接且需要自动跳转,只需带上http://开头即可效果图:好了,以上就是利用Javascript生成带参数二维码的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

1.组件js(function($){ //自定义去除字符串两边空白 String.prototype.trim=function(){ return this.replace(/(^\s*)|(\s*$)/g, ""); } //自定义导入组件 $.fn.customImport = function(methodOroptions,value){ if(typeof methodOroptions == "string"){//存在方法时,调用方法 return $.fn.customImport.methods[methodOroptions](this, value); } var optionsObj = methodOroptions||{}; //不存在方法时,那么传递的是属性定义。 return this.each(function() { $.data(this, "customImport", { options : $.extend({}, $.fn.customImport.defaults, optionsObj) }); initCustomImport(this); }); } //定义组件默认属性 $.fn.customImport.defaults={ width:400, height:90, enctype:'multipart/form-data', action:'', //导入方法调用 method:'post', //请求方式 fileType:'.XLS,.xlsx', //文件类型,默认为xls格式 xmlName:'', //导入模版XML参数名 xmlValue:'', //导入模版XML参数值 filePath:'', //文件路径参数名 uploadTemplateUrl:'', //下载模版的路径 onSubmit:function(param){ } } //定义组件方法 $.fn.customImport.methods = { submit :function(obj,options){ if($(obj).customImport("validate")){ var formOptions = {}; if(options.action){ formOptions.url = options.action; } if(options.onSubmit){ formOptions.onSubmit = options.onSubmit; } if(options.success){ formOptions.success = options.success; } $CommonUI.getForm("#importForm").form("submit",formOptions); } }, clear:function(obj){ //获取当前文件框 var fileInput = $(obj).find(".real-file"); //在当前文件框后克隆一个相同的元素,并设置值为"",IE默认克隆的值为空,谷歌火狐会将值一起克隆 fileInput.after(fileInput.clone().val("")); //删除当前文件框 fileInput.remove(); //为新的文件框绑定onchange事件 $(obj).find(".real-file").on("change",function(){ changeFile(obj); }); //清空文件显示路径 $(obj).find(".file-pathname").val(""); //取消校验提示 $(obj).find(".validatebox-invalid").removeClass("validatebox-invalid"); }, validate:function(obj){ var validateState = $(obj).find(".file-pathname").validatebox("isValid"); return validateState; } } function initCustomImport(obj){ var options = $.data(obj,"customImport").options; $(obj).width(options.width); $(obj).height(options.height); $(obj).attr("enctype",options.enctype); $(obj).attr("action",options.action); $(obj).attr("method",options.method); if(!flag){ //初始化组件 $(obj).append('<div class="choose-file"><div class="choose-title">浏览目录</div></div>');//添加文件选择按钮 $(obj).find(".choose-file").append('<input class="real-file" type="file"/>'); //真实文件控件 $(obj).find(".choose-file").append('<div class="file-path"><input class="file-pathname validatebox" type="text" readonly="readonly" data-options="required:true,missingMessage:"请选择导入文件",validType:"importFormatValidate""/></div>');//文件路径显示框 $(obj).append('<div class="import-template"><a class="upload-template" href="javascrip:void(0);">导入模版下载</a></div>');//模版下载按钮 $(obj).append('<div class="import-xml"><input class="xml-config" type="hidden"></div>'); $(obj).find('.import-xml').append('<input class="websocket-config" type="hidden" name="dto.code">'); //绑定文件名改变事件 $(obj).find(".real-file").on("change",function(){ changeFile(obj); }); } //绑定组件属性和事件 $(obj).find(".real-file").attr("name",options.filePath);//为文本框绑定name属性 $(obj).find(".real-file").attr("accept",options.fileType);//文件接收类型 $(obj).find(".real-file").width(options.width*0.3-6); $(obj).find(".import-xml .xml-config").attr("name",options.xmlName);//导入的xml参数名 $(obj).find(".import-xml .xml-config").val(options.xmlValue);//导入的xml参数值 //绑定下载模版的url $(obj).find(".upload-template").attr("href",options.uploadTemplateUrl); } //初始化导入框 var flag = false; if($(".custom-import").length>0){ $(".custom-import").customImport(); flag = true; } //选择文件改变时触发 function changeFile(obj){ var filePath = $(obj).find(".real-file").val(); if(filePath&&filePath.trim()!=""){ var fileNamePosition = filePath.lastIndexOf('\\'); var fileName=filePath.substring(fileNamePosition+1); $(obj).find(".file-pathname").val(fileName); $(obj).find(".file-pathname").removeClass("validatebox-invalid"); } } })(jQuery); $(function(){ $.extend($.fn.validatebox.defaults.rules, { importFormatValidate : {// 验证导入格式是否是excel validator : function(value,param) { var fileTypeIndex = value.lastIndexOf("."); var fileType = value.substring(fileTypeIndex); if(fileType!=".xls"&&fileType!=".xlsx"){ return false; } return true; }, message : '请选择.xls或者.xlsx文件!' } }); })2.组件css.choose-file{ padding:10px; } .choose-title{ width: 30%; height: 30px; line-height: 30px; font-size: 20px; text-align: center; background: #337AB7; color: #fff; border-radius: 6px 0 0 6px; cursor: pointer; float:left; } .choose-title:hover{ background: #36577D; } .real-file{ height: 30px; width: 27%; position: absolute; left: 25px; opacity: 0; filter: alpha(opacity=0); } .file-path { width: 70%; height: 30px; float:left; } .file-pathname{ width: 100%; height: 26px; border-radius: 0 6px 6px 0; border: 1px solid #337AB7; } .import-template{ float: right; margin: 10px; background: #cbcbcc; border-radius: 6px; } .import-template:hover{ background:#BEB89D; } .upload-template{ text-decoration: none; color: #fff; padding: 7px; display: inline-block } .import-xml{ display:none; clear:both; } .other-title{ width: 30%; height: 30px; line-height: 30px; font-size: 20px; text-align: center; background: #337AB7; color: #fff; border-radius: 6px 0 0 6px; float:left; } .other-param{ padding:10px; } .other-content{ width: 70%; height: 30px; float:left; } .other-text{ border-radius: 0 6px 6px 0; border: 1px solid #337AB7; }3.组件引用html部分<div id="importExcelWin" class="dialog"> <form id="importForm" class="custom-import dhccform"></form> </div> <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/js/customComponent/customImport.css"> <script type="text/javascript" src="<%=request.getContextPath()%>/js/customComponent/customImport.js"></script>js部分$CommonUI.getDialog("#importExcelWin").dialog({ title : '导入字典', width :430, height :185, closed : true, modal : true, buttons:[{ text:'保存', handler:function(){ importData(); } },{ text:'取消', handler:function(){ $CommonUI.getDialog("#importExcelWin").dialog("close"); } } ] }) //初始化导入框 $("#importForm").customImport({ action:$WEB_ROOT_PATH+"/excel/excelCtrl.htm?BLHMI=importExcel", xmlName:'dto.exportFileName', //导入模版XML参数名 xmlValue:'systemDictionaryImport', //导入模版XML参数值 filePath:'dto.uploadFile', //文件路径参数名 uploadTemplateUrl:$WEB_ROOT_PATH+'/exportexcel/exportExcelCtrl!uploadExcelTemplate.htm?filename=systemDictionary' });4.组件效果注意事项:1.该组件使用了easyui-validatebox,使用者也需引用该组件不然校验会出错。2.该组件是结合后端定制的一个组件,以减少前端html重复配置而导致的出错。值得学习的仅仅是组件定义的方法而不是组件本身。3.为了满足IE组件有2处特殊处理,第一:是用文件框覆盖在选择目录之上以保证IE安全校验只识别鼠标直接点击的文本框。第二:IE不能直接清除文件框的内容,这里采用克隆删除的方式清空文件框以存在的内容。以上所述是小编给大家介绍的jQuery自定义组件(导入组件),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

分类:腾博会官方网

时间:2016-08-22 11:23:11