Category Archives: Javascript

[jQuery]自動回捲按鈕

很多的網頁都習慣在右下角做一個可以回捲到最上方的按鈕,這個功能的其實原理很簡單,只要善用scroll系列的函式即可達到效果

HTML

CSS

jQuery

Continue Reading

[Javascript]Reveal.js

Reveal.js 是一套利用HTML 5實作而成的Presentation Framework,可以利用它來製作網頁型的簡報

官方文件也非常清楚,本身內部也提供許多API,讓簡報更容易控制,是個非常方便的東西

安裝 可以到 這裡 下載 source code,或者按照官方文件操作,利用 npm 和 grunt 安裝

操作方法

1.一般用法 內頁皆是使用 section 包起來

2.Anchor Text 透過 id 自定義網頁上顯示的anchor text

3.Vertical Slides 垂直型簡報

4.Highlight Highlight程式區段

5.Background 簡報背景

6.Blockquote Blockquote

7.Fragment 分批顯示功能

8.Fragment Styles 分批顯示功能特效

API Reveal 內部也有許多API可以使用

CustomEvent

Continue Reading

[Javascript]use strict(嚴格模式)

在Javascript中,如果沒有宣告變數也可以直接使用 例如:

但為了避免區域與全域的變數重疊,或者其他不必要產生的狀況,通常在使用變數前都會宣告

不過當程式一多,難免會有漏掉的時候,因此可以使用嚴格模式來撰寫

也可以針對特定的function做嚴格模式

除了變數宣告之外,strict mode還限制了一些東西,例如物件中不能設定相同屬性等等,有興趣可以直接上網查查相關的文件

Continue Reading

[HTML]自製簡易Lightbox Loading特效

在網路上常會看到許多當點擊後,四周畫面一黑,然後出現一些文字訊息方塊的特效

這種Lightbox Loading的效果,網路上有許多很完整的套件

但如果只是為了做個轉換的特效,可以自己快速做一個,不一定還要去引用其他套件

以下做個簡單的範例: HTML

CSS

jQuery

Continue Reading

[Javascript]RequireJS

RequireJS是一個javascript 的 Module Loader,好處是可以將Javascript模組化

以下這段範例,必須考慮到套件與套件之間相依性的問題手動進行順序的調整

使用RequireJS後就可以避開這些狀況,更有效的管理外部引用的Javascript套件

使用方法 專案架構

require RequireJS 引入

如果怕要存取許多套件會讓網頁卡住,可以調整成async讀入

include main.js

引入時可以同時定義讀取自己寫的main.js

main.js

如果有跳出alert就代表運作成功了,只要在main.js使用require函式就可以引入套件

以引入jQuery、Underscore.js、Backbone.js為例使用require.js

main.js

注意:這邊有一點要注意,因為underscore和backbone並不是按照AMD(Asynchronous Module Definition)標準開發,因此單純直接使用require是無法取得物件的 詳細取得物件的做法下面會提到

利用require.config定義引入的套件路徑

main.js

自訂AMD套件 在RequireJS中要引入自己寫的套件,必須要參照AMD標準來開發

say.js(custom module)

main.js

依附其他套件的AMD套件 如果開發的套件有依附在其他套件上(例如jQuery),可以先讓jQuery引入後再引入自行開發的套件 say.js

main.js

jQuery plugin hello.js

main.js

引入非AMD標準的套件 上面有提到,underscore和backbone並不是按照AMD標準開發,因此需要另外設定才能取得引入的物件

main.js

Backbone.js實例 main.js

view.js

Continue Reading