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