智能手表的自定义搜索选项

一款智能手表的自定义搜索选项，可以选择不同的颜色、形状、屏幕大小等，还可以设置有没有物理按键，每种选择都会立即实时显示出来，整体效果相当的不错哦，喜欢的童鞋请收下吧。

分类：选项卡/滑动门 > 选项卡切换难易：初级

查看演示下载资源下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

页面的head部分，需引入google字体库和两个样式文件，代码如下：

<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">

页面的body部分，div容器里面设置好多种选项的元素，代码如下：

<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>

页面的底部，引入多个JS文件，代码如下：

<script src='https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.2.0/svg.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/tinycolor/1.1.2/tinycolor.min.js'></script>
<script type="text/javascript" src="js/index.js"></script>