- 浏览: 331524 次
- 性别:
- 来自: 杭州
文章分类
- 全部博客 (354)
- 学习 (219)
- 工作 (69)
- 前端技术 (188)
- 个人评论 (1)
- 工作总结 (1)
- 工作的方法 (1)
- 代码库 (1)
- jQuery (63)
- javascript (4)
- css (4)
- 网络通信协议 (3)
- web (7)
- 服务端性能 (1)
- 优化 (1)
- html5 (4)
- serialize (1)
- 上线页面 (1)
- ie6 (6)
- js (1)
- iframe (1)
- flash (1)
- a (1)
- img (1)
- 页面tms的要求 (1)
- kissy (3)
- 需求也页面 (0)
- 需求页面 (2)
- 视频插件 (1)
- 切图片 (1)
- map (1)
- display (1)
- 浮动定位 (1)
- 大小图片的切换功能 (2)
- demo (1)
- margin (1)
- a标签 (1)
- border (1)
- 侧导航 (1)
- 切换PNG格式的css (1)
- padding (1)
- 显示添加和删除 (1)
- 滚动条 (1)
- 和图片处理 (1)
- 移动端 (1)
- 定位 (1)
- 移动端的包的引入作用与直接拨打电话的A标签 (1)
- git (1)
- node.js (1)
- Zepto (1)
最新评论
-
幻紫1992:
还有分页的功能、、(⊙o⊙)嗯
[JS代码库] -
幻紫1992:
就是没有返回顶部的按钮,这个页面、、
[JS代码库] -
幻紫1992:
很受用,O(∩_∩)O谢谢啦~
[JS代码库] -
nlnl520coco:
想下个东西 规则太苛刻了 网站得改进
[JS代码库] -
hxp520520:
new Limiter() 这个对象是kissy API里面的 ...
Limiter的简单demo--20131029
1、效果及功能说明
表单提交制作各大商城衣服尺寸选择勾选效果,点击购物车提交勾选尺寸value值。一款简单实用的衣服尺寸选择勾选效果
2、实现原理
通过查询当前的图片的id然后通过对应id找到在通过遍历后面说有尺码,找到相对应的尺码通过点击时间来触发,和当点击了以后添加一个类让点击以后出现在尺码的图标和其他的图标有明显的不一样让用户更好的知道自己选择了什么,在点击购物车的时候将有添加类的图片信息放进购物车内
主要的方法
3、效果图
4、运行环境
IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现
5、所有图片的压缩包新建一个文件后将包解压放进文件夹图片的压缩包在页面的最下方可以看到并下载下载后无需修改文件夹名因为本身就已经写好了和html5内的路径相吻合
6、将创建html文件保存的时候将编码类型换成(UTF-8有签名)这样可以让部分中文正常的显示出来,将保存类型(T)换成(所有文件(*.*)),将html5和解压后的图片文件夹放在同一个文件夹内效果
7、代码[html5]
表单提交制作各大商城衣服尺寸选择勾选效果,点击购物车提交勾选尺寸value值。一款简单实用的衣服尺寸选择勾选效果
2、实现原理
通过查询当前的图片的id然后通过对应id找到在通过遍历后面说有尺码,找到相对应的尺码通过点击时间来触发,和当点击了以后添加一个类让点击以后出现在尺码的图标和其他的图标有明显的不一样让用户更好的知道自己选择了什么,在点击购物车的时候将有添加类的图片信息放进购物车内
主要的方法
var thisToggle = $(this).is('.size_radioToggle') ? $(this) : $(this).prev(); //通过点击事件获得尺码的信息 thisToggle.addClass('current'); //添加这个类让图片不一样 return false; 在所有图片添加类里只能一次执行一次 $(".choosetext span").html(text) //对比收索以后的所有元素获得尺码 $("#" + id).find(".choosetext span.value").html() //放入购物车
3、效果图
4、运行环境
IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现
5、所有图片的压缩包新建一个文件后将包解压放进文件夹图片的压缩包在页面的最下方可以看到并下载下载后无需修改文件夹名因为本身就已经写好了和html5内的路径相吻合
6、将创建html文件保存的时候将编码类型换成(UTF-8有签名)这样可以让部分中文正常的显示出来,将保存类型(T)换成(所有文件(*.*)),将html5和解压后的图片文件夹放在同一个文件夹内效果
7、代码[html5]
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <style type="text/css"> *{margin:0;padding:0;list-style-type:none;} a{blr:expression(this.onFocus=this.blur())}/*去掉a标签的虚线框,避免出现奇怪的选中区域*/ body{background:#fff;font-size:12px;font-family:Helvetica,Arial,sans-serif,"宋体";color:#333;} .clear{display:block; clear:both;} .clearfix:after{content:"."; display:block; height:0; clear:both;visibility:hidden;} *html .clearfix{height:1%;} *+html .clearfix{height:1%;} a{color:#333;text-decoration:none;} a:hover{color:#990000;text-decoration:underline;} /* choose */ .choose{width:260px;margin:100px auto 0 auto;border:solid 1px #ddd;padding:15px 30px 30px 30px;} .choosetext{height:24px;padding:20px 0;font-size:14px;} .choosebox{padding:0 0 35px 0;} .choosebox li{float:left;margin-right:10px;display:inline;} .choosebox li a{float:left;background:#fff;font-size:14px;border:1px solid #ccc;height:14px;line-height:14px;padding:4px 12px; display:block;} .choosebox li a.current{background:url(images/right-icon.gif) no-repeat 100% 100%;border:1px solid #A10000;} .choosebox li input{display:none;} .choose .btn-img{width:160px;height:50px;overflow:hidden;background:url(images/cart.gif) no-repeat;cursor:pointer;border:0;} .choose .btn-img span{display:block;font-size:18px;font-weight:800;color:#fff;font-family:"微软雅黑","宋体";padding:0 0 0 50px;line-height:50px;} </style> <div class="choose" id="dress-size"> <form action="" method="get"> <div class="choosetext">尺寸:<span>未选择</span></div> <div class="choosebox"> <ul class="clearfix"> <li> <input type="radio" name="name" value="S" id="" /> <a href="javascript:void(0);" class="size_radioToggle"><span class="value">S</span></a> </li> <li> <input type="radio" name="name" value="M" id="" /> <a href="javascript:void(0);" class="size_radioToggle"><span class="value">M</span></a> </li> <li> <input type="radio" name="name" value="L" id="" /> <a href="javascript:void(0);" class="size_radioToggle"><span class="value">L</span></a> </li> <li> <input type="radio" name="name" value="XL" id="" /> <a href="javascript:void(0);" class="size_radioToggle"><span class="value">XL</span></a> </li> <li> <input type="radio" name="name" value="XXL" id="" /> <a href="javascript:void(0);" class="size_radioToggle"><span class="value">XXL</span></a> </li> </ul> </div> <div><button type="submit" class="btn-img"><span>放入购物车</span></button></div> </form> </div><!--choose end--> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript"> $(function(){ //定义方法 $('.choosebox li a').click(function(){ //定义点击事件 var thisToggle = $(this).is('.size_radioToggle') ? $(this) : $(this).prev(); //定义参数里面放当前的.size_radioToggle类并且获得检索每个段落方法 var checkBox = thisToggle.prev(); //定义参数里面放获得当前显示与隐藏状态方法在获得么一个段落 checkBox.trigger('click'); //定义checkBox参数获得点击事件 $('.size_radioToggle').removeClass('current'); //.size_radioToggle类删除current类 thisToggle.addClass('current'); //当前显示与隐藏添加的current类 return false; //返回否 }); }); $(".choosebox li a").click(function(){ //定义点击事件 var text = $(this).html(); //获得当前元素的内容 $(".choosetext span").html(text); //.choosetext span元素的text $("#result").html("" + getSelectedValue("result")); //获得resultID说有元素内容的值是resultID }); function getSelectedValue(id){ //定义方法 return //返回 $("#" + id).find(".choosetext span.value").html(); //获得ID通过遍历收索说有choosetext span.value里面的所有元素 } </script> </body> </html>
- images.rar (1.3 KB)
- 下载次数: 9
- 表单提交衣服尺寸选择勾选获取value值images.rar (1.3 KB)
- 下载次数: 10
发表评论
-
Zepto
2015-08-15 13:49 1204Zepto Zepto,是一个比较 ... -
node.js的学习-20140611
2014-06-11 23:17 733//创建一个h1方法里面舒服一个nihao functi ... -
node.js的学习-20140609
2014-06-09 23:01 535Node.js 是一个基于Chrome JavaScript ... -
git的学习-20140604
2014-06-04 23:30 477Git使用 首先 开启"G ... -
PC和移动端的页面的一些差距-20140525
2014-05-25 23:46 854首先 1、标签、描述等描述清晰准确 2、网站结构3层树状结构 ... -
Bootstrap排版基础样式和响应式图片-20140521
2014-05-22 00:41 2710Bootstrap基础排版样式 .col-xs-* // ... -
Bootstrap特性、设计和组件-20140519
2014-05-19 22:22 684特点 Bootstrap是基于jQuery框架开发的,它在j ... -
Bootstrap流式布局-20140515
2014-05-16 00:26 14712流布局是一种适应屏幕的做法。即不固定块的宽度,而是采用百分比作 ... -
Bootstrap的宽度和分辨率的差别-20140514
2014-05-14 23:05 6211首先在bootstrap里面所有 ... -
Bootstrap的认识-20140513
2014-05-14 00:09 1344通过公司的两个比较大 ... -
jquery初步认识-20140123
2014-01-24 01:30 652一、原型模式结构 // 定义一个jQuery构造函数 ... -
html5的特殊标签作用-20140114
2014-01-15 01:04 883<base>、定义页面中所有链接的基准URL & ... -
ie下的指定样式-20140106
2014-01-08 00:00 7291. <!--[if !IE]><!--&g ... -
margin-left在IE6下左浮动加倍-20140102
2014-01-02 23:04 715一、IE6下如果line-height超出本身区块的heigh ... -
浮动存在的问题-20131229
2013-12-29 23:00 514看一个正常的浮动案例 <!DOCTYPE h ... -
在ie6下同张图片不能外面包有a标签后在画热区-20131223
2013-12-23 23:47 827最近在做页面有的发现一个问题 <div class ... -
ie6下导航存在的问题和-2013-12-20
2013-12-21 00:51 602最近在做事的时候发现一个有趣的问题,在上网也找过但是都没有很好 ... -
按比例展示的小js-20131217
2013-12-18 00:41 406做需求的做到一个关于这个功能的项目所以记下来 Math.ra ... -
定位需要注意-20131214
2013-12-15 01:07 664在CSS中关于定位的内容 ... -
flash在Safari下的BUG-20131212
2013-12-12 01:09 731<object width="940&qu ...
相关推荐
jquery表单提交衣服尺寸选择勾选获取value值 jquery表单提交衣服尺寸选择勾选获取value值 jquery表单提交衣服尺寸选择勾选获取value值 jquery表单提交衣服尺寸选择勾选获取value值
比较全面的讲解了jquery获取表单值,全面的讲解了jquery获取表单值
JQuery表单提交和后台交互源码 源码描述: jQuery表单提交和后台交互,非常简单。 也许你习惯了使用基于jQuery的表单插件,裸写也不错 仅使用jQuery提交表单和后台交互,不使用基于jQuery的表单插件 方式1、取到...
JQuery 提交表单,步骤详细并且附有详细图解.学习JQUery不能错过
下面小编就为大家带来一篇jquery获取form表单input元素值的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
jquery衣服尺寸勾选表单
jQuery表单提交验证verify一套完整的用户注册前端校验,包含用户名,密码强度,显示隐藏密码,手机号输入控制手机验证码,真实姓名,身份证号等验证。
jquery表单步骤流程导航一步一步填写表单提交信息代码
[JQuery框架应用]:form.js官方插件介绍 Form插件,支持Ajax,支持Ajax文件上传,功能强大,基本满足日常应用。
使用jQuery.form插件,实现完美的表单异步提交
jquery slider滑块拖动设置value值获取显示代码 jquery slider滑块拖动设置value值获取显示代码
jquery衣服尺寸勾选表单.zip
jQuery表单验证jQuery表单验证jQuery表单验证jQuery表单验证jQuery表单验证jQuery表单验证jQuery表单验证
该资源包含了一个使用jquery提交表单的代码,简单易懂,喜欢的下载。
jquery表单验证实例网站会员注册表单验证提交form表单代码
jquery表单验证插件
jquery-form - jQuery表单生成插件 。
用Jquery的Ajax提交整个表单,我用的1.3.2的版本。
Jquery 表单验证+本地图片上传-切割-预览 完全项目 希望不要用于商业用途