PhotoSwipe是一個JS套件，主要是用來把圖片放大縮小用的一個效果，他支持觸控及滑鼠事件，擴展性不錯 使用的時候有遇到一個問題，就是他需要預先指定圖片尺寸在data標籤中，這其實有點麻煩，因為通常圖片尺寸不太有機會是寫死在標籤上的，所以作為一個好用的套件，這部分最好也給他自動化一下會比較方便使用，以下是使用的一個範例: HTML結構為下: <div class="photoswip">          <a href="圖片放大後的連結" target="...

當網頁有著龐大的檔案等待載入，為了防止客戶端網頁一直處於載入的狀態下，這時候就會需要進度條來回饋用戶目前的載入狀況。 這時候透過XHR可以很容易的取得數據，以下為XHR的一些狀態以及使用範例: const xhr = new XMLHttpRequest() // 監聽載入事件 xhr.onload = () => { console.log(`The transfer is completed: ${xhr.status} ${xhr.response}`) } // 監聽錯誤事件 xhr.onerror = () => { console.error(&...

針對IOS不合群的事件再添一筆: 今天客戶回報為什麼搜尋欄位在所有的裝置瀏覽器中都可以再鍵入[中文]後自己篩選內容，唯有IOS還要在按一下[換行]才可以。這裡順道提一下，[換行]這個按鈕正確翻譯應該是[輸入]或[鍵入]又或者是简体中文使用的[回車]才對，因為人家的英文是[return]。所以IOS中文鍵盤翻譯這裡可能要調整一下。 所以問題的點是，IOS提供的內鍵輸入，中文與其他不同的地方是，它無法觸發[keyup]事件。 所以這邊記錄一下，如果你要觸發文字輸入框的自動觸發事件，要避免IOS跟人家的體驗不一樣，那麼就配合一下要把[keyup]事件改成[input propert...

在Javascript無數的框架中，Stimulus.js算是比較彈性且可模塊化管理的JS框架，使用上僅需引入Stimulus的基礎框架，然後用ES6模塊化的方式來寫模塊引入主入口JS文件即可直接使用，不用再建構。 但是基於模塊化的語法仍然尚未普及，Stimulus官方還是有提供使用Webpack等建構的方式，關於安裝的部分，可以參考:  安裝Stimulus.js 本文不是Stimulus.js的使用教學，只會紀錄我在使用上的一些紀錄，如有任何相關使用上的經驗，歡迎一起交流討論喔! DispatchEvent <div data-acti...

關於Swiper.js，是近期我用過最全面的輪播效果，它很完整，且還蓋豐富的api可以調用做修改，非常好用。 但在使用上仍會遇到一些難解的疑惑，上網查也不見得可以查到快速的解法，須從api的文件中一個個來試，以下就是紀錄swiper使用上的一些問題紀錄: 1. Vertical 效果，若結合頁面原生地捲軸，需要設置一些參數才可以，不然直接使用官網上的範例，會導致swiper佔據touch事件，而無法使用卷軸 const swiper_mobile = new Swiper(`#mobileSwiper`, {         dire...

20230428 關於如何將json object的多層級對象，進行展開的方法 const flattenJSON = (obj = {}, res = {}, extraKey = '') => {    for(key in obj){       if(typeof obj[key] !== 'object'){          res[extraKey + key] = obj[key];     &nb...

透過js繫結資料到html網頁是前端工程常用的方法，常用的資料集格式有JSON及XML，以下說明如何實作: XML XML資料集 < ?xml version='1.0' ?> < doc>     < dataset>         < data1>data1< /data1>         < data2>data2< /data2>     &nb...

Dropzone.js 應用: 建立拖曳式上傳介面 來源: http://www.dropzonejs.com/#event-removedfile   DataTable.js 應用: 建立常用表格控制功能介面 來源: https://datatables.net/ Highchart.js 應用: 建立資料圖表用的介面 來源: http://www.highcharts.com/demo/line-basic   Leaflet.js 應用: 建立地圖用的介面 來源: http://leafl...

最近遇到一個問題，就是透過jquery的width()取螢幕寬度的值，window環境下會出現有時候是有加上卷軸的寬度(17px)有時候沒有，非常困擾。 當我用$(window).width()來取螢幕寬的時候，當我把視窗尺寸調整時，所得到的是實際寬度，然後我就可以用來計算各區塊的尺寸了 有趣的是當我把視窗高度內縮時，卷軸寬度就會被偵測到，所得到的是實際寬度減掉卷軸的寬度，而這種狀況只有出現在高度內縮才會發生，寬度內縮是不會有這種狀況出現的 因此我找了一下相關資料，發現可以用javascript內的window.innerWidth來取代jquery的$(window...