jQuery实现Selectric下拉框菜单选择
1、新建html文档。
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"> <p>Primary</p> <div class="colorpick"><input type="text" value="#F8F8F8" name="base-color"></div> </div> </div> <div class="col"> <div id="secondary-color"> <p>Secondary</p> <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"> <p>Label</p> <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"> <p>Button background</p> <div class="colorpick"><input type="text" value="" name="button-background-color"></div> </div> </div> <div class="col"> <div id="button-color"> <p>Button color</p> <div class="colorpick"><input type="text" value="#444" name="button-color-color"></div> </div> </div> </div> <h3>Sizes</h3> <div id="border-width-slider"> <p>Border width <span class="value"></span></p> <div class="slider" data-val="1" data-min="0" data-max="10"></div> </div> <div id="border-round-slider"> <p>Roundness <span class="value"></span></p> <div class="slider" data-val="0" data-min="0" data-max="100"></div> </div> <div id="height-slider"> <p>Height <span class="value"></span></p> <div class="slider" data-val="40" data-min="22" data-max="50"></div> </div> <div id="indent-slider"> <p>Label indent <span class="value"></span></p> <div class="slider" data-val="10" data-min="6" data-max="30"></div> </div> <div id="button-size-slider"> <p>Arrow button size <span class="value"></span></p> <div class="slider" data-val="38" data-min="12" data-max="50"></div> </div> <div id="button-round-slider"> <p>Arrow button roundness <span class="value"></span></p> <div class="slider" data-val="0" data-min="0" data-max="100"></div> </div> <div id="button-position-slider"> <p>Arrow button position <span class="value"></span></p> <div class="slider" data-val="0" data-min="0" data-max="30"></div> </div> </div></div>
5、书写并添加js代码。<script src="public/lib/jquery.min.js"></script><script src="public/lib/prism.js"></script>
7、查看效果。
