Tag Archive show

การกำหนดให้แสดง section ของฟอร์มโดยเปลี่ยนค่าใน input เหมือน Joget: กำหนดการแสดงไม่แสดง section ด้วย input มันไม่ค่อยจะเป็นธรรมชาติเท่าไหร่ ผู้ใช้จะคุ้นเคยกับ tabs มากกว่า

ทำได้โดย

1. ให้ทำตามวิธี Joget: กำหนดการแสดงไม่แสดง section ด้วย input ก่อน
2. ให้ลาก Custom HTML มาในตำแหน่งที่ต้องการ ใส่ javascript ตามตัวอย่าง
   ?

   section tabs

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

   <ul class="nav nav-tabs" id="tabsA"> <li class="nav-item"> <a class="active nav-link show" data-toggle="tab" href="#section1">Section 1</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#section2">Section 2</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#section3">Section 3</a> </li> </ul> <script src="/jw/assets/scripts.js"></script> <script> $(document).ready(function() {   navSection();   }); </script>

3. ไฟล์ javascript ที่เก็บ function แยกเอาไว้ reused ได้หลายๆ ครั้ง
   ?

   /jw/assets/scripts.js

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

   /* pitt phunsanit show / hide section with tabs version 1 */ function navSection() { let hash = window.location.hash.substr(1); let visibilityControl = $("#visibilityControl"); let tabsA = $("#tabsA");   if (hash != visibilityControl.val()) { $('a[href="#' + hash).click(); visibilityControl.val(hash); }   $("li > a", tabsA).on("click", function() { visibilityControl .val( $(this) .attr("href") .substr(1) ) .trigger("change"); }); }

การแสดงไม่แสดง form section จะเห็นเป็น tabs ธรรมดาๆ ดูเป็นธรรมชาติขึ้นมากกว่าเดิม ตัวอย่างฟอร์ม