你的位置:首页 > Java教程

[Java教程]基于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: 0;      padding: 0;      list-style-type: none;    }    a, img    {      border: 0;      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