XiaoLian

因應客戶之需求，不同產品的類別，PageTitle隨之改變。提供JavaScript兩種方法。 部分HTML（參考）︰ <a id='nav-4' onclick =" changePageTitle('Auto-ID Device - Time Recorder / Time Attendance') " >Time Recorder / Time Attendance</a> <a id='nav-10' onclick =" changePageTitle('Auto-ID Device - Access Control/Controller') " >Access Control/Controller</a> <a id='nav-62' onclick =" changePageTitle('Auto-ID Device - Portable Data Collector') " >Portable Data Collector</a> <a id='nav-71' onclick =" changePageTitle('Auto-ID Device - Cashless Payment System') " >Cashless Payment System</a> <a id='nav-76' onclick =" changePageTitle('Auto-ID Device - Guard Patrol Tour Terminal') " >Guard Patrol Tour Terminal</a> <a id='nav-78' onclick =" changePageTitle('Auto-ID Device - Biometric Reader') " >Biometric Reader</a>...

為了要適應不同頁面大小及瀏覽裝置設備，需利用CSS來控制。 iframe位置連結可透過Google Map產生 ，不在本篇討論之。本篇iframe位置連結因涉及隱私，故假資料填入。 部分HTML（參考）︰ <div class=" iframe-rwd "> <iframe src="https://www.google.com/maps/embed?pb=xxxxxxxxx888888.777777" width="800" height="600" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe> </div> CSS（參考）︰ <style type="text/css"> /* google map for RWD */ .iframe-rwd { position: relative; padding-bottom: 50%; padding-top: 30px; height: 0; overflow: hidden; } .iframe-rwd iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } </style> 大螢幕執行畫面︰   小螢幕執行畫面︰