JS筆記

2024-04-12

使用photoswipe的一些筆記

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

關於XHR的使用紀錄與進度條的設計

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

IOS Safari 的keyup沒反應該怎麼辦

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

stimulus.js 使用筆記

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

Swiper8 使用紀錄

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

JS重新開始全紀錄

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

JS 繫結資料說明

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

JS資源應用

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...
更多資料
2016-11-24

透過JS抓螢幕寬度,卷軸的尺寸會被偵測到的問題

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

Contact

Github

Codepen

歡迎參觀我的賣場
© 2013 Copyright Digishot Web | Design Tools
Visitors【660179】
digishot webdesign studio