color-select.html 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>颜色选择器</title>
  6. <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
  7. <link rel="stylesheet" href="../css/public.css" media="all">
  8. </head>
  9. <body>
  10. <div class="layuimini-container">
  11. <div class="layuimini-main">
  12. <blockquote class="layui-elem-quote">
  13. 颜色选择器使用开源项目:paigusu<br>
  14. <a href="http://www.jq22.com/jquery-info20030" target="_blank" class="layui-btn layui-btn-danger">TableSelect</a>
  15. </blockquote>
  16. <form class="layui-form" action="" style="padding:20px;">
  17. <div class="layui-form-item">
  18. <label class="layui-form-label">颜色选择器</label>
  19. <div class="layui-input-inline">
  20. <input type="hidden" name="test_color" value="#1aa094">
  21. <span class="layui-btn layui-btn-primary test-select-color" style="padding:0 12px;min-width:45px;background-color: #1aa094;"></span>
  22. </div>
  23. </div>
  24. </form>
  25. <pre class="layui-code">
  26. $(function () {
  27. $('.paigusu').paigusu({
  28. color: '#1926dc',//初始色 支持两种配置方案
  29. }, function (event, obj) {
  30. console.log(event);
  31. console.log(obj);
  32. $(event).css('color', '#' + obj.hex)
  33. });
  34. });
  35. </pre>
  36. </div>
  37. </div>
  38. <script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
  39. <script src="../lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
  40. <script src="../lib/jq-module/paigusu.min.js" charset="utf-8"></script>
  41. <script>
  42. $(function () {
  43. $('.test-select-color').paigusu({
  44. color: '#1aa094',//初始色 支持两种配置方案
  45. }, function (event, obj) {
  46. console.log(event);
  47. console.log(obj);
  48. $(event).css('background-color', '#' + obj.hex);
  49. $('input[name="test_color"]').val('#' + obj.hex);
  50. });
  51. });
  52. </script>
  53. </body>
  54. </html>