Bootstrap 3

Modal

只能使用關閉功能關閉視窗,設定  data-keyboard=”false”, data-backdrop=”static”

Tooltips, Popovers

針對超長且無空格英數字串,必須另外設定 CSS 處理

jQuery Ajax 完成後執行,網頁內容為 ajax 載入,Javascript 在 HTML 一開始載入無法獲取對象,部份操作可以使用 $(document).on() ,不過並不是萬能

 

  • http://jquery-plugins.net/jquery-blockui-plugin
  • http://www.malsup.com/jquery/block/#demos
  • http://www.bootstrapzero.com/bootstrap-template/blocks
  • http://designmodo.github.io/startup-demo/?u=787
  • http://respontent.frebsite.nl/

自訂組件 – 移除 glyphicons

到 Customize and download · Bootstrap 自訂需求後,到最下方點擊 Compile and Download 即可

91 total views, no views today

Unicode 字型以及 CSS3 WEB Font

Unicode 字型

現成的 Unicode 表:Unicode Table

 

 

 

 

 

自己用 PHP 重現

 

  • dechex() : 將 10 進制轉換成 16 進制

使用在亂數產生一個「中文名字」

CSS3 WEB Font

 

 

141 total views, 1 views today

Bootstrap 的字型圖示原理

CSS3 網頁字型說明:CSS3 Web Fonts

 

 

最終呈現

20140302_000

更多的網頁字型下載: 10 Super Useful Free Icon Font Sets | Freebies

自己的 TureType 字型轉換

可以到 Font2Web – Your Online Font Converter Converting .ttf and .otf to .woff, .eot and.svg 這裡轉換

212 total views, 1 views today

HTML5 的拖拉檔案上傳 ( Drag & drop files Upload )

參考:

重點有

  1. 將物件設定為可拖 (Drag) 的狀態,在此是想要實現拉檔案到網頁直接上傳,所以此步驟可省略
  2. 在指定的對象放開檔案 (Drop) ,設定觸發的 ondrop 事件
  3. 從事件的 dataTransfer 物件內取得所需資料

將功能實作成 jQuery Plugin

參考: How to Create a Basic Plugin

如此就可以自己包合用的外掛

html5uploader

請到這裡下載: html5uploader – Drag & drop files to browser using HTML 5, PHP and JS – Google Project Hosting

實作步驟

  1. 使用 Google Chrome 或 Mozilla Firefox 測試功能
  2. 修改 uploader.php 上傳處理及路徑
  3. 上傳頁面增加表單檔案上傳,處理不支援 HTML5 瀏覽器
  4. 整合系統,增加傳遞值。主要工作在 HTML5 JavaScript 的 HTML POST 格式處理

上傳網頁處理,增加不支援 HTML5 的表單上傳

上傳頁面改用 jQuery 載入 Javascript 以及增加系統所需傳遞參數

使用 Mozilla Firefox 的 Live HTTP Headers 附加元件追蹤 HTTP header

瞭解 HTML POST 格式後,修改 html5uploader.js 程式

Firefox 3.6 中文檔名傳遞錯誤問題

參考此篇 ajax中文拋出異常 – ITeye問答 ,將 filename 使用 encodeURI() 處理即可

對於 uploader.php 的認知, elseif () 那段和上傳方式沒關係

451 total views, no views today