index.html 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  5. <title>二维码生成 - {$site.name}</title>
  6. <link href="__CDN__/assets/libs/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
  7. <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
  8. <!--[if lt IE 9]>
  9. <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
  10. <script src="http://apps.bdimg.com/libs/respond.js/1.4.2/respond.js"></script>
  11. <![endif]-->
  12. </head>
  13. <body>
  14. <div class="container">
  15. <h2>二维码生成</h2>
  16. <hr>
  17. <div class="well">
  18. <form action="" method="post">
  19. <div class="row">
  20. <div class="col-md-4">
  21. <div class="form-group">
  22. <label class="control-label">文本内容</label>
  23. <input type="text" name="text" class="form-control" placeholder="" value="http://www.example.com">
  24. </div>
  25. <div class="form-group">
  26. <label class="control-label">标签</label>
  27. <input type="text" name="label" placeholder="" class="form-control" value="示例文字">
  28. </div>
  29. <div class="form-group">
  30. <label class="control-label">Logo</label>
  31. <div class="form-inline">
  32. <div class="radio">
  33. <label>
  34. <input type="radio" name="logo" id="logoyes" value="1">
  35. 显示(Logo地址在代码中修改)
  36. </label>
  37. </div>
  38. <div class="radio">
  39. <label>
  40. <input type="radio" name="logo" id="logono" value="0" checked>
  41. 不显示
  42. </label>
  43. </div>
  44. </div>
  45. </div>
  46. <div class="form-group">
  47. <input type="submit" class="btn btn-info" />
  48. <input type="reset" class="btn btn-default" />
  49. </div>
  50. </div>
  51. <div class="col-md-2">
  52. <div id="toastTypeGroup">
  53. <label>标签水平位置</label>
  54. <div class="form-group radio">
  55. <label><input type="radio" name="labelalignment" value="left">左</label>
  56. </div>
  57. <div class="form-group radio">
  58. <label><input type="radio" name="labelalignment" checked value="center">中</label>
  59. </div>
  60. <div class="form-group radio">
  61. <label><input type="radio" name="labelalignment" value="right">右</label>
  62. </div>
  63. </div>
  64. </div>
  65. <div class="col-md-2">
  66. <div class="form-group">
  67. <div class="form-group">
  68. <label class="control-label">前景色</label>
  69. <input type="text" name="foreground" placeholder="" class="form-control" value="#000000">
  70. </div>
  71. <div class="form-group">
  72. <label class="control-label">背景色</label>
  73. <input type="text" name="background" placeholder="" class="form-control" value="#ffffff">
  74. </div>
  75. <div class="form-group">
  76. <label class="control-label">大小</label>
  77. <input type="number" name="size" placeholder="" class="form-control" value="300">
  78. </div>
  79. <div class="form-group">
  80. <label class="control-label">内边距</label>
  81. <input type="number" name="padding" placeholder="" class="form-control" value="10">
  82. </div>
  83. </div>
  84. </div>
  85. <div class="col-md-3">
  86. <div class="form-group">
  87. <label class="control-label">Logo大小</label>
  88. <input type="number" name="logosize" placeholder="" class="form-control" value="50">
  89. </div>
  90. <div class="form-group">
  91. <label class="control-label">标签大小</label>
  92. <input type="number" name="labelfontsize" placeholder="" class="form-control" value="14">
  93. </div>
  94. <div class="form-group">
  95. <div id="positionGroup">
  96. <label>容错级别</label>
  97. <div class="form-group radio">
  98. <label>
  99. <input type="radio" name="errorcorrection" value="low">低
  100. </label>
  101. </div>
  102. <div class="form-group radio">
  103. <label>
  104. <input type="radio" name="errorcorrection" value="medium" checked="">中等
  105. </label>
  106. </div>
  107. <div class="form-group radio">
  108. <label>
  109. <input type="radio" name="errorcorrection" value="quartile">高
  110. </label>
  111. </div>
  112. <div class="form-group radio">
  113. <label>
  114. <input type="radio" name="errorcorrection" value="high">超高
  115. </label>
  116. </div>
  117. </div>
  118. </div>
  119. </div>
  120. </div>
  121. </form>
  122. </div>
  123. <input type="text" class="form-control" id='qrcodeurl' />
  124. <img src="" alt="" id='qrcodeimg' />
  125. </div>
  126. <script src="__CDN__/assets/libs/jquery/dist/jquery.min.js"></script>
  127. <script type="text/javascript">
  128. $(function () {
  129. $("form").submit(function () {
  130. $("#qrcodeimg").prop("src", "{:addon_url('qrcode/index/build',[],false)}?" + $(this).serialize());
  131. $("#qrcodeurl").val("{:addon_url('qrcode/index/build',[],false,true)}?" + $(this).serialize());
  132. return false;
  133. });
  134. $("form").trigger('submit');
  135. });
  136. </script>
  137. </body>
  138. </html>