jQuery实现Selectric下拉框菜单选择
1、新建html文档。
2、准备好需要用到的图标。
3、书写hmtl代码。
<div class="theme-roller">
<h2>主题样式选择</h2>
<form autocomplete="off">
<select name="presets" id="presets">
<option value="default">Default</option>
<option value="plus">Plus</option>
<option value="square">Square</option>
<option value="modern">Modern</option>
<option value="modern-v2">Modern v2</option>
<option value="flat-dark-blue">Flat (dark blue)</option>
<option value="flat-red">Flat (red)</option>
<option value="flat-light-blue">Flat (light blue)</option>
<option value="flat-radiant-orchid">Flat (radiant orchid)</option>
<option value="flat-marsala">Flat (marsala)</option>
<option value="custom">Custom</option>
</select>
</form>
<div class="custom" hidden>
<h3>Colors</h3>
<div class="row">
<div class="col">
<div id="base-color">
Primary
<div class="colorpick"><input type="text" value="#F8F8F8" name="base-color"></div>
</div>
</div>
<div class="col">
<div id="secondary-color">
Secondary
<div class="colorpick"><input type="text" value="#DDD" name="secondary-color"></div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div id="label-color">
Label
<div class="colorpick"><input type="text" value="#444" name="label-color"></div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div id="button-background-color">
Button background
<div class="colorpick"><input type="text" value="" name="button-background-color"></div>
</div>
</div>
<div class="col">
<div id="button-color">
Button color
<div class="colorpick"><input type="text" value="#444" name="button-color-color"></div>
</div>
</div>
</div>
<h3>Sizes</h3>
<div id="border-width-slider">
Border width <span class="value"></span>
<div class="slider" data-val="1" data-min="0" data-max="10"></div>
</div>
<div id="border-round-slider">
Roundness <span class="value"></span>
<div class="slider" data-val="0" data-min="0" data-max="100"></div>
</div>
<div id="height-slider">
Height <span class="value"></span>
<div class="slider" data-val="40" data-min="22" data-max="50"></div>
</div>
<div id="indent-slider">
Label indent <span class="value"></span>
<div class="slider" data-val="10" data-min="6" data-max="30"></div>
</div>
<div id="button-size-slider">
Arrow button size <span class="value"></span>
<div class="slider" data-val="38" data-min="12" data-max="50"></div>
</div>
<div id="button-round-slider">
Arrow button roundness <span class="value"></span>
<div class="slider" data-val="0" data-min="0" data-max="100"></div>
</div>
<div id="button-position-slider">
Arrow button position <span class="value"></span>
<div class="slider" data-val="0" data-min="0" data-max="30"></div>
</div>
</div>
</div>
4、书写css代码。
@media screen and (max-width: 960px) {
h4 {
margin-top: -15px;
margin-bottom: 15px;
}
.header {
height: 240px;
}
.header h1 {
font-size: 2em;
margin-top: 80px;
}
.header h1 img {
top: auto;
}
.header p {
font-size: 1em;
}
.features {
padding-top: 20px;
}
.features li {
width: 30%;
margin-left: 1.5%;
margin-right: 1.5%;
margin-bottom: 10px;
text-align: center;
vertical-align: top;
}
.features li .ico {
margin: 0 0 10px;
}
.features li p {
width: auto;
display: block;
line-height: 1.2;
}
.bt {
padding: 10px 20px;
}
.section {
font-size: 12px;
}
.social-buttons li {
width: 85px;
}
.bottom-spacer {
height: 40px;
}
/* Demo page */
.theme-roller {
left: 0;
right: 0;
bottom: 0;
top: auto;
width: auto;
border-radius: 0;
border: none;
border-top: 1px solid #CCC;
padding: 10px;
box-shadow: 0 -1px 10px -6px #000;
}
.theme-roller h2 {
font-size: 16px;
}
.theme-roller form {
float: left;
width: 50%;
}
.theme-roller select {
height: 34px;
}
.theme-roller .bt-download {
float: right;
width: 46%;
margin-top: 0;
}
.theme-roller .bt-view-raw {
clear: both;
position: absolute;
top: 4px;
right: 10px;
}
.demo .view,
.demo .code {
float: none;
width: auto;
margin-right: auto;
margin-left: auto;
}
.demo .code {
margin-top: 10px;
}
.demo-spacer {
height: 88px;
}
}
5、书写并添加js代码。
<script src="public/lib/jquery.min.js"></script>
<script src="public/lib/prism.js"></script>
6、代码整体结构。
7、查看效果。
