html5智能手表交互式搜索选项特效代码下载



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

9 34 12



特效描述:智能手表 交互式 搜索选项。html5交互式搜索选项、设置智能手表搜索,颜色,屏幕外形,屏幕尺寸,物理按键等搜索条件,一款交互式搜索表单代码

代码结构

1. 引入CSS

<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/icon?family=Material+Icons'>
<link rel='stylesheet prefetch' href='css/material.blue-orange.min.css'>
<link type="text/css" rel="stylesheet" href="css/style.css">

2. 引入JS

<script type="text/javascript" src='js/material.min.js'></script>
<script type="text/javascript" src='js/svg.min.js'></script>
<script type="text/javascript" src='js/tinycolor.min.js'></script>
<script type="text/javascript" src="js/index.js"></script>

3. HTML代码

<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
  <header class="mdl-layout__header">
    <div class="mdl-layout__drawer-button"><i class="material-icons">arrow_back</i></div>
    <div class="mdl-layout__header-row">
      <div class="mdl-layout-title">自定义搜索</div>
    </div>
  </header>
  <main class="mdl-layout__content">
    <div class="page-content mdl-grid">
      <div class="mdl-cell mdl-cell--6-col mdl-cell--4-col-phone mdl-cell--3-col-tablet mdl-cell--middle">
        <div class="watch">
          <svg class="watch-image" id="watch-image" xmlns="http://www.w3.org/2000/svg" version="1.1">
            <g class="svg-content">
              <rect id="watch-band" ry="35" rx="16" x="44" height="306" width="89" fill="#2e2e2e"></rect>
              <g id="watch-metal">
                <rect id="watch-button" y="138" x="159" height="32" width="14" fill="#858585"></rect>
                <rect id="watch-face" ry="55" rx="55" y="80" x="14" height="148" width="148" stroke="#bababa" stroke-width="8" fill="#000000"></rect>
              </g>
            </g>
          </svg>
        </div>
      </div>
      <div class="mdl-cell mdl-cell--6-col mdl-cell--4-col-phone mdl-cell--5-col-tablet mdl-cell--middle">
        <div class="settings mdl-card mdl-shadow--2dp">
          <div class="options">
            <div class="options__item options__item--vertical"><span class="option-title">颜色</span>
              <div class="color-checkboxes">
                <input class="color-checkbox__input" type="radio" id="col-Pink" value="#e91e63" name="colour"/>
                <label class="color-checkbox Pink" for="col-Pink" id="col-Pink-label" style="background: #e91e63"></label><span class="mdl-tooltip" for="col-Pink-label">粉</span>
                <input class="color-checkbox__input" type="radio" id="col-Purple" value="#673ab7" name="colour"/>
                <label class="color-checkbox Purple" for="col-Purple" id="col-Purple-label" style="background: #673ab7"></label><span class="mdl-tooltip" for="col-Purple-label">紫</span>
                <input class="color-checkbox__input" type="radio" id="col-Blue" value="#2196f3" name="colour"/>
                <label class="color-checkbox Blue" for="col-Blue" id="col-Blue-label" style="background: #2196f3"></label><span class="mdl-tooltip" for="col-Blue-label">蓝</span>
                <input class="color-checkbox__input" type="radio" id="col-Green" value="#8bc34a" name="colour"/>
                <label class="color-checkbox Green" for="col-Green" id="col-Green-label" style="background: #8bc34a"></label><span class="mdl-tooltip" for="col-Green-label">绿</span>
                <input class="color-checkbox__input" type="radio" id="col-Yellow" value="#fdd835" name="colour"/>
                <label class="color-checkbox Yellow" for="col-Yellow" id="col-Yellow-label" style="background: #fdd835"></label><span class="mdl-tooltip" for="col-Yellow-label">黄</span>
                <input class="color-checkbox__input" type="radio" id="col-Orange" value="#ff9800" name="colour"/>
                <label class="color-checkbox Orange" for="col-Orange" id="col-Orange-label" style="background: #ff9800"></label><span class="mdl-tooltip" for="col-Orange-label">橙</span>
                <input class="color-checkbox__input" type="radio" id="col-Red" value="#f44336" name="colour"/>
                <label class="color-checkbox Red" for="col-Red" id="col-Red-label" style="background: #f44336"></label><span class="mdl-tooltip" for="col-Red-label">红</span>
                <input class="color-checkbox__input" type="radio" id="col-Black" value="#222222" name="colour"/>
                <label class="color-checkbox Black" for="col-Black" id="col-Black-label" style="background: #222222"></label><span class="mdl-tooltip" for="col-Black-label">黑</span>
                <input class="color-checkbox__input" type="radio" id="col-White" value="#ffffff" name="colour"/>
                <label class="color-checkbox bordered White" for="col-White" id="col-White-label" style="background: #ffffff"></label><span class="mdl-tooltip" for="col-White-label">白</span>
                <input class="color-checkbox__input" type="radio" id="col-Silver" value="#bababa" name="colour"/>
                <label class="color-checkbox Silver" for="col-Silver" id="col-Silver-label" style="background: #bababa"></label><span class="mdl-tooltip" for="col-Silver-label">灰</span>
                <input class="color-checkbox__input" type="radio" id="col-Any" value="#bababa" name="colour" checked="checked"/>
                <label class="color-checkbox Any" for="col-Any" id="col-Any-label" style="background: null"></label><span class="mdl-tooltip" for="col-Any-label">随机</span>
              </div>
            </div>
            <div class="options__item">
              <label class="option-title" for="shape-dropdown">屏幕外形</label>
              <select class="option-input option-dropdown" id="shape-dropdown">
                <option selected="selected" value="0">没关系</option>
                <option value="sq">方形</option>
                <option value="r">圆形</option>
              </select>
            </div>
            <div class="options__item"><span class="option-title">屏幕尺寸</span><span class="option-input toggle-list" id="size-options">
                <label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect">
                  <input class="mdl-icon-toggle__input" type="checkbox" value="0.9" checked="checked"/><i class="mdl-icon-toggle__label icon--custom">小</i>
                </label>
                <label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect">
                  <input class="mdl-icon-toggle__input" type="checkbox" value="1" checked="checked"/><i class="mdl-icon-toggle__label icon--custom">中</i>
                </label>
                <label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect">
                  <input class="mdl-icon-toggle__input" type="checkbox" value="1.1" checked="checked"/><i class="mdl-icon-toggle__label icon--custom">大</i>
                </label></span></div>
            <div class="options__item">
              <label class="option-title options__content" for="button-dropdown">物理按键</label>
              <select class="option-input option-dropdown" id="button-dropdown">
                <option selected="selected" value="0">没关系</option>
                <option value="y">有</option>
                <option value="n">无</option>
              </select>
            </div>
          </div>
          <div class="mdl-card__actions mdl-card--border"><a class="mdl-button mdl-button--raised mdl-js-button mdl-button--primary mdl-js-ripple-effect">立即搜索</a></div>
        </div>
      </div>
    </div>
  </main>
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 图片头像上传 文件上传 文本框 下拉框 复选 单选 登录框 注册框 搜索框 验证码 二级联动 三级联动 城市选择 value赋值 筛选 按钮控制 购物车 颜色选择 表单提交 全选/反选 添加删除 添加标签 密码强度验证 表单验证 html5按钮动画 按钮样式 密码修改设置 切换按钮 form表单

×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到