基于jQuery商品分类选择提交表单代码
分享一款基于jQuery商品分类选择提交表单代码。这是一款基于jQuery实现的商品信息选择列表表单提交代码。
实现的代码:
<div class="yListr">
<form>
<ul>
<li><span>颜色</span> <em class="yListrclickem">深灰色<i></i></em> <em>金色<i></i></em> <em>
银色<i></i></em> </li>
<li><span>内存</span> <em class="yListrclickem">16G ROM<i></i></em> </li>
<li><span>尺寸</span> <em class="yListrclickem">5.5寸<i></i></em> </li>
<li><span>尺寸</span> <em class="yListrclickem">港版(二网)<i></i></em> <em>类型<i></i></em>
</li>
</ul>
<p class="colorp00">
价值:<em>¥6099.00</em> <span>月供:<em>6281.97</em>元(本金:<em>6099.00</em>元 + 服务费:<em>182.97</em>元)分期
x <em>1个月</em></span>
</p>
<label>
首付金额:</label>
<input type="text" />
<label>
元</label>
<label style="margin-left: 40px;">
分期月数:</label>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
</select>
<a href="" class="YImmediatelyininstallment">立即分期</a>
</form>
</div>
css代码:
*
{
margin:;
padding:;
list-style-type: none;
}
a, img
{
border:;
text-decoration: none;
}
body
{
font: 14px/180% Arial, Helvetica, sans-serif, "新宋体";
} .yListr
{
width: 690px;
font-family: "微软雅黑";
margin: 46px auto 0 auto;
}
.yListr ul
{
border-bottom: 1px solid #dcdcdc;
padding-bottom: 10px;
margin-bottom: 13px;
}
.yListr ul li
{
height: 36px;
margin-bottom: 23px;
}
.yListr ul li span
{
color: #000000;
font-size: 14px;
line-height: 36px;
display: inline-block;
width: 42px;
padding-left: 4px;
}
.yListr ul li em
{
cursor: pointer;
color: #666666;
font-size: 14px;
display: inline-block;
padding: 0 10px;
font-style: normal;
border: 1px solid #dcdcdc;
line-height: 34px;
height: 34px;
}
.yListr ul li em.yListrclickem
{
line-height: 32px;
border: 2px solid #e9630a;
height: 32px;
position: relative;
padding: 0 9px;
}
.yListr ul li em.yListrclickem i
{
display: block;
width: 15px;
height: 14px;
background: url(images/righbt.png) no-repeat 0 0;
right: -1px;
bottom: -1px;
position: absolute;
}
.yListr .colorp00
{
color: #333333;
font-size: 18px;
line-height: 50px;
}
.yListr .colorp00 span
{
color: #ed610c;
font-size: 14px;
padding-left: 20px;
}
.yListr .colorp00 em
{
font-style: normal;
}
.yListr form input, .yListr form select
{
outline: none;
border: 1px solid #dcdcdc;
width: 86px;
height: 34px;
font-size: 14px;
color: #333333;
padding-left: 8px;
}
.yListr form select
{
height: 36px;
}
.yListr form .YImmediatelyininstallment
{
font-size: 24px;
color: #ffffff;
text-align: center;
display: block;
width: 332px;
height: 50px;
line-height: 50px;
border-radius: 3px;
background: #e9630a;
margin-top: 42px;
}
via:http://www.w2bc.com/Article/31053
基于jQuery商品分类选择提交表单代码的更多相关文章
- 基于HTML5手机登录注册表单代码
分享一款基于HTML5手机登录注册表单代码.这是一款鼠标点击注册登录按钮弹出表单,适合移动端使用.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class=&qu ...
- jQuery之ajaxForm提交表单
1.jQuery的设计非常优雅,其源代码亦给人以美感,利用jQuery框架写出来的js既简练又能完美跨浏览器. 2.jquery form插件是基于jQuery开发的一套能够利用ajax技术提 ...
- jQuery使用ajaxSubmit()提交表单示例
ajaxSubmit(obj)方法是jQuery的一个插件jquery.form.js里面的方法,所以使用此方法需要先引入这个插件.如下所示: 代码如下: <script src=" ...
- jquery submit()不能提交表单的解决方法
<form id="form" method="get"> <input type="text" name="q ...
- jquery实现ajax提交表单
一般情况下,我们提交form表单采用的是submit的方法,典型的场景如下. <form id="thisForm" method="post" acti ...
- php使用jquery Form ajax 提交表单,并上传文件
在html5中我们通过FormData就可以ajax上传文件数据,不过因为兼容问题.我们选用jquery.form.min.js来进行ajax的表单提交. 一.jquery.form.js下载地址 ...
- 基于JQuery的前端form表单操作
Jquery的前端表单操作: jquery提供了良好的方法封装,在一些基本的操作的时候,能节省很多的麻烦,其中,在具体使用时,form表单的数据提交是最频繁也最常见的前后数据交换方式,所以在前 ...
- jquery ajax异步提交表单数据
使用jquery的ajax方法可以异步提交表单,成功后后台返回json数据,回调函数处理,可以不用刷新页面,达到异步的目的: 处理表单的数据可以用serialize()方法进行序列化,而如果提交的数据 ...
- jQuery使用ajaxSubmit()提交表单(在不希望页面跳转的情况下)
原文:http://www.jb51.net/article/48728.htm ajaxSubmit(obj)方法是jQuery的一个插件jquery.form.js里面的方法,所以使用此方法需要先 ...
随机推荐
- 微信小程序“信用卡还款”项目实践
小程序概述 11月3日晚,微信团队对外宣布,微信小程序开放公测.开发者可登陆微信公众平台申请,开发完成后可以提交审核,公测期间暂不能发布. 我们前一段时间也进行了小程序开发,现在来对之前的开发体验做一 ...
- 微博混合云DCP:极端流量下的峰值应对与架构挑战
摘要: 在2016杭州云栖大会的“开发者技术峰会”上,来自新浪微博的资深运维架构师王关胜带来题为<微博混合云DCP:极端流量下的峰值应对与架构挑战>的精彩分享,分享中他从微博业务背景及峰值 ...
- Spring mvc中@RequestMapping 6个基本用法小结
Spring mvc中@RequestMapping 6个基本用法小结 小结下spring mvc中的@RequestMapping的用法. 1)最基本的,方法级别上应用,例如: @RequestMa ...
- Mint17 一些安装备忘
1,中文输入法: sudo apt-add-repository ppa:fcitx-team/dailybuild-fcitx-master sudo apt-get update sudo apt ...
- Linux命令-查看进程命令:pstree
查看进程树,ps aux查看进程,如果进程太多看起来很不方便,可以使用pstree以树形方式显示正在运行的所有进程 pstree -p 查看进程树 还是太多了,可以使用管道符进行查找httpd(apa ...
- JS定义类及对象
1.工厂方式 <script type="text/javascript"> function createObject(name){ var p = new Obje ...
- 摘:ClickOnce部署
ClickOnce部署 http://www.cnblogs.com/weixing/p/3358740.html#undefined (1):一些发布方式 ClickOnce是什么玩意儿,这个问题嘛 ...
- Python isnumeric() 方法
描述 Python isnumeric() 方法检测字符串是否只由数字组成.这种方法是只针对unicode对象. 注:定义一个字符串为Unicode,只需要在字符串前添加 'u' 前缀即可,具体可以查 ...
- Python fabs() 函数
描述 fabs() 方法返回数字的绝对值,如math.fabs(-10) 返回10.0. fabs() 函数类似于 abs() 函数,但是他有两点区别: abs() 是内置函数. fabs() 函数在 ...
- iOS端JSON转Model链式编程框架SuperKVC使用方法与原理
背景 在client编程中.字典转模型是一个极为常见的问题,苹果提供了KVC来实现NSDictionary到Model的注入,可是KVC仅仅能进行单层浅注入.且无法处理类型转换.key与属性名不正确应 ...