index.html 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <link rel="stylesheet" href="bulma.min.css">
  7. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
  8. <title>Data-aware Element Actions demo</title>
  9. <script src="countrycodes.js"></script>
  10. <script src="dbelementactions.js"></script>
  11. </head>
  12. <body>
  13. <section class="section">
  14. <h1 class="title is-3">Data-aware HTML Actions demo</h1>
  15. <div class="box">
  16. <div class="columns is-vcentered" >
  17. <div class="column is-3">
  18. <div class="field has-addons is-horizontal">
  19. <div class="field-body">
  20. <p class="control">
  21. <button id="btnFirst" class="button">
  22. <span class="icon is-small">
  23. <i class="bi bi-chevron-double-left"></i>
  24. </span>
  25. </button>
  26. </p>
  27. <p class="control">
  28. <button id="btnPrevious" class="button">
  29. <span class="icon is-small">
  30. <i class="bi bi-chevron-left"></i>
  31. </span>
  32. </button>
  33. </p>
  34. <p class="control">
  35. <button id="btnNext" class="button">
  36. <span class="icon is-small">
  37. <i class="bi bi-chevron-right"></i>
  38. </span>
  39. </button>
  40. </p>
  41. <p class="control">
  42. <button id="btnLast" class="button">
  43. <span class="icon is-small">
  44. <i class="bi bi-chevron-double-right"></i>
  45. </span>
  46. </button>
  47. </p>
  48. <p class="control">
  49. <button id="btnEdit" class="button">
  50. <span class="icon is-small">
  51. <i class="bi bi-pencil-square"></i>
  52. </span>
  53. </button>
  54. </p>
  55. <p class="control">
  56. <button id="btnAppend" class="button">
  57. <span class="icon is-small">
  58. <i class="bi bi-plus-circle"></i>
  59. </span>
  60. </button>
  61. </p>
  62. <p class="control">
  63. <button id="btnPost" class="button">
  64. <span class="icon is-small">
  65. <i class="bi bi-check"></i>
  66. </span>
  67. </button>
  68. </p>
  69. <p class="control">
  70. <button id="btnCancel" class="button">
  71. <span class="icon is-small">
  72. <i class="bi bi-x-circle"></i>
  73. </span>
  74. </button>
  75. </p>
  76. </div> <!-- .field-body -->
  77. </div> <!-- .field -->
  78. </div> <!-- .column -->
  79. <div class="column is-2">
  80. <div class="field "> <!--has-addons is-horizontal-->
  81. <p class="control ml-4 is-pulled-right">
  82. <label class="checkbox" for="cbAutoEdit">
  83. <input id="cbAutoEdit" type="checkbox" class="checkbox">
  84. Auto-edit
  85. </label>
  86. </p>
  87. </div>
  88. </div> <!-- .column -->
  89. </div> <!-- .columns -->
  90. </div> <!-- .box -->
  91. <div class="box">
  92. <h5 class="title is-5">Country data</h5>
  93. <div class="field">
  94. <label class="label" for="edtName">Country name</label>
  95. <p class="control">
  96. <input class="input" type="text" id="edtName" placeholder="Full name of country">
  97. </p>
  98. </div>
  99. <div class="field">
  100. <label class="label" for="edtName">Country ISO code</label>
  101. <p class="control">
  102. <input class="input" type="text" id="edtCode" placeholder="2-character ISO code">
  103. </p>
  104. </div>
  105. </div> <!-- .box -->
  106. </section>
  107. <script>
  108. rtl.showUncaughtExceptions=true;
  109. window.addEventListener("load", rtl.run);
  110. </script>
  111. </body>
  112. </html>