Floating action button เรียกกันว่า FAB เป็นปุ่มเสริมบนหน้านั้น ๆ สำหรับการนำเสนอ Function หลักที่เราอยากให้ความสำคัญ ทั้งยังช่วยให้เว็บไซต์เป็นที่น่าสนใจอีกรูปแบบหนึ่ง

วิธีการ import psu-floating-icon ในเว็บไซต์

ขั้นตอนที่ 1 ให้ทำการ Copy code ด้านล่างไปใส่ในหน้า index หรือ หน้าที่ต้องการ (วางส่วนท้ายสุด นอก หรือใน body ก็ได้)

 <!--------------------------------psu-floating-icon------------------------------------>

<div class="fixed-action-btn toolbar">

<a class="btn-psu-floating btn-large blue">

<i class="large material-icons"><img src="https://www.psu.ac.th/img/icon/psu-foating-icon.png" width="100%"></i>

</a>

<ul>

<li><a class="btn-psu-floating" href="https://www.psu.ac.th" target="_blank"><b>มหาวิทยาลัยสงขลานครินทร์</b></a></li>

</ul>

</div>

<!-- css & js for psu-floating-icon-->

<link type="text/css" rel="stylesheet" href="https://www.psu.ac.th/assets/css/psu-foating-icon.min.css" media="screen,projection"/>

<script src="https://www.psu.ac.th/assets/js/materialize.min.js"></script>

<!-- script for psu-floating-icon-->

<script>

document.addEventListener('DOMContentLoaded', function() {

var elems = document.querySelectorAll('.fixed-action-btn');

var instances = M.FloatingActionButton.init(elems, {toolbarEnabled: true});

});

$('.fixed-action-btn').floatingActionButton({toolbarEnabled: true});

</script>

<!--------------------------------------/psu-floating-icon----------------------------->

 จะได้ผลลัพธ์ดังนี้

ขั้นตอนที่ 2 หากต้องการแก้ไขตำแหน่งให้ทำการดาวน์โหลด CSS (psu-foating-icon.min.css) มาเก็บใน Server เดียวกันกับเว็บไซต์

และแก้ไขตำแหน่งตามต้องการ(บรรทัดที่ 132-144)

สามารถดาวน์โหลดได้ที่ (https://www.psu.ac.th/assets/css/psu-foating-icon.min.css)

ท่านสามารถดูวิธีขั้นตอนการติดตั้งใน Platform ต่างๆได้ที่ webhost.psu.ac.th