jQueryMiniColors颜色选择器.zip资源-CSDN文库

共9个文件

js：4个

html：2个

css：2个

版权申诉

javascript

jQuery

html5

130 浏览量 2022-11-19 19:46:23 上传评论收藏 146KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

jQuery MiniColors颜色选择器.zip （9个子文件）

jQuery MiniColors颜色选择器

jiaoben1763

jquery.min.js 91KB

bootstrap.min.css 95KB

jquery.minicolors.png 76KB

jquery.minicolors.js 23KB

bootstrap.min.js 27KB

index.html 7KB

without-bootstrap.html 5KB

jquery.minicolors.css 4KB

jquery.minicolors.min.js 11KB

<!doctype html> <html> <head> <title>jQuery MiniColors颜色选择器 - 网页模板</title> <meta charset="gb2312">  <script src="jquery.min.js"></script>  <link rel="stylesheet" href="bootstrap.min.css"> <script src="bootstrap.min.js"></script>  <script src="jquery.minicolors.js"></script> <link rel="stylesheet" href="jquery.minicolors.css"> <style> dl { margin: 20px 0; } dt { font-size: 120%; } dd { padding: 10px 20px 20px 20px; } dd:last-child { border-bottom: none; } code { color: black; border: none; background: rgba(128, 128, 128, .1); } pre { background: #f8f8f8; border: none; color: #333; padding: 20px; } h2 { margin-top: 50px; } h3 { color: #aaa; } </style> <script> $(document).ready( function() { $('.demo').each( function() { // // Dear reader, it's actually very easy to initialize MiniColors. For example: // // $(selector).minicolors(); // // The way I've done it below is just for the demo, so don't get confused // by it. Also, data- attributes aren't supported at this time...they're // only used for this demo. // $(this).minicolors({ control: $(this).attr('data-control') || 'hue', defaultValue: $(this).attr('data-defaultValue') || '', inline: $(this).attr('data-inline') === 'true', letterCase: $(this).attr('data-letterCase') || 'lowercase', opacity: $(this).attr('data-opacity'), position: $(this).attr('data-position') || 'bottom left', change: function(hex, opacity) { if( !hex ) return; if( opacity ) hex += ', ' + opacity; try { console.log(hex); } catch(e) {} }, theme: 'bootstrap' }); }); }); </script> </head> <body> <div class="row" style="margin: 0px 60px;"> <div class="col-12">  <h2 id="demos">Demos</h2>  <h3>Control Types</h3> <div class="well"> <div class="row"> <div class="col-lg-4 col-sm-4 col-12"> <div class="form-group"> <label for="hue-demo">Hue (default)</label> <input type="text" id="hue-demo" class="form-control demo" data-control="hue" value="#ff6161"> </div> <div class="form-group"> <label for="saturation-demo">Saturation</label> <input type="text" id="saturation-demo" class="form-control demo" data-control="saturation" value="#0088cc"> </div> </div> <div class="col-lg-4 col-sm-4 col-12"> <div class="form-group"> <label for="brightness-demo">Brightness</label> <input type="text" id="brightness-demo" class="form-control demo" data-control="brightness" value="#00ffff"> </div> <div class="form-group"> <label for="wheel-demo">Wheel</label> <input type="text" id="wheel-demo" class="form-control demo" data-control="wheel" value="#ff99ee"> </div> </div> </div> </div>  <h3>Input Modes</h3> <div class="well"> <div class="row"> <div class="col-lg-4 col-sm-4 col-12"> <div class="form-group"> <label for="text-field">Text field</label> <br> <input type="text" id="text-field" class="form-control demo" value="#70c24a"> </div> <div class="form-group"> <label for="hidden-input">Hidden Input</label> <br> <input type="hidden" id="hidden-input" class="demo" value="#db913d"> </div> </div> <div class="col-lg-4 col-sm-4 col-12"> <div class="form-group"> <label for="inline">Inline</label> <br> <input type="text" id="inline" class="form-control demo" data-inline="true" value="#4fc8db"> </div> </div> </div> </div>  <h3>Positions</h3> <div class="well"> <p> Valid positions include <code>bottom left</code>, <code>bottom right</code>, <code>top left</code>, and <code>top right</code>. </p> <div class="row"> <div class="col-lg-4 col-sm-4 col-12"> <div class="form-group"> <label for="position-bottom-left">bottom left (default)</label> <input type="text" id="position-bottom-left" class="form-control demo" data-position="bottom left" value="#0088cc"> </div> <div class="form-group"> <label for="position-top-left">top left</label> <input type="text" id="position-top-left" class="form-control demo" data-position="top left" value="#0088cc"> </div> </div> <div class="col-lg-4 col-sm-4 col-12"> <div class="form-group"> <label for="position-bottom-right">bottom right</label> <input type="text" id="position-bottom-right" class="form-control demo" data-position="bottom right" value="#0088cc"> </div> <div class="form-group"> <label for="position-top-right">top right</label> <input type="text" id="position-top-right" class="form-control demo" data-position="top right" value="#0088cc"> </div> </div> <div class="col-lg-4 col-sm-4 col-12"> </div> </div> </div>  <h3>…and more!</h3> <div class="well"> <div class="row"> <div class="col-lg-4 col-sm-4 col-12"> <div class="form-group"> <label for="opacity">Opacity</label> <br> <input type="text" id="opacity" class="form-control demo" data-opacity=".5" value="#766fa8"> <span class="help-block"> Opacity can be assigned by including the <code>data-opacity</code> attribute or by setting the <code>opacity</code> option to <code>true</code>. </span> </div> </div> <div class="col-lg-4 col-sm-4 col-12"> <div class="form-group"> <label for="default-value">Default Value</label> <br> <input type="text" id="default-value" class="form-control demo" data-defaultValue="#ff6600"> <span class="help-block"> This field has a default value assigned to it, so it will never be empty. </span> </div> </div> <div class="col-lg-4 col-sm-4 col-12"> <div class="form-group"> <label for="letter-case">Letter Case</label> <br> <input type="text" id="letter-case" class="form-control demo" data-letterCase="uppercase" value="#abcdef"> <span class="help-block"> This field will always be uppercase. </span> </div> </div> </div> </div> <div style="text-align:center;clear:both"> <p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p> <p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p> </div> </body> </html>

评论收藏

内容反馈

版权申诉