簡潔寫 script src, border-collapse

現在的網站程式代碼工作比重已經從後端轉移到了前端,不是後端的份量減少了,而是前端的工作增加到了比後端更多。

參考資源

以下的代碼應該不陌生

 

HTML JavaScript 載入

js/script.js

jQuery

JavaScript -2 擷取至 Blockly Games

  1. 建立一個 script 的元素
  2. 設定 src 路徑
  3. 將組裝好的 <script src=””> 字串附加在載入的 script 之後

Blockly Games 從上面載入的 JavaScript 也是一個簡潔加載的技巧

JavaScript -3

進階使用者可以朝    這類的工具邁進,將 JavaScript 打包壓縮,可以增加傳輸以及執行效能。

 

CSS border-collapse

是否將表格的框線合併

 

250 total views, no views today

CKEditor 4.5.3 之初步使用

為什麼是 CKEditor ?

  1. 現在還有在維護
  2. 因為還有在維護所以應該有圖檔拖曳上傳功能
  3. 真的有圖檔拖曳上傳功能 → 讚 live demo

下載及 demo 請到官網:CKEditor

如何使用

下載解壓縮

到 ckeditor/samples/toolbarconfigurator/index.html 自訂工具列

將設定值取代 config.js 檔案

使用 Ajax 上傳都是未更新前的資料問題

在上傳前套用以下程式

拖曳圖檔至編輯區

基本知識、觀念建立:File Browser/Uploader

前端的程式都可以直接從官網下載,唯一需要自己準備的只有圖檔上傳後回傳的程式,大概是長這樣:

長這樣的根據?

直接從官網範例 → File Upload ,在 Chrome 的 F12 追蹤得到上傳後需要回傳 json

硬要看官方文件的話,在這裡 → Uploading Dropped or Pasted Files

實際運用的情況

  • 目前 2015.8.26 CKEditor 的版本為 4.5.3
  • 預計達成功能
    • 基本文字編輯、格式修改
    • 附加圖檔
      • 檔案拖曳直接上傳附加
      • 複製、貼上上傳附加 (目前只支援 Firefox,找尋其他方案)
      • 已上傳可瀏覽後附加不須重新上傳

使用 Plugins

  • autogrow : 編輯區不是固定尺寸
  • uploadimage : 拖曳檔案進編輯區即可上傳
  • image2 : 讓圖片可移動以及改變大小

自訂 Plugin : 以瀏覽圖檔點選後直接插入為例

參考資料

準備好以下材料

 

操作流程長這樣

  1. 從工具列點選瀏覽圖庫按鈕,彈出一個瀏覽圖庫子視窗
  2. 選取後點選圖片
  3. 將圖片插入編輯區,關閉瀏覽圖庫視窗 (實際程式流程為相反)

實際上的操作就是按一下工具列按鈕,然後按一下圖片這兩下

關鍵點

 

編輯時和前端顯示相同 CSS 結果

config.js

 

795 total views, no views today

多圖集合定位取用之應用 — 以 Google & MineCraft 為例

Google 的 PNG 圖片例子

我們在 Google 上可以看到精簡的網頁上還是有一些小圖片,可是當我們去追蹤圖片路徑時,發現他並不是單一圖片,而是一個大圖片,裡面集合了網站使用到的圖片元素。

以右側搜尋按鈕裡的放大鏡為例

放大鏡的 CSS ID 為 .sbico ,以下是此範例另外擷取使用的 HTML 網頁原始碼

瀏覽器看起來長這個樣子

直接說明關鍵 CSS 語法

  • background:url(http://www.google.com.tw/images/nav_logo107.png) :圖片設定在背景,不是直接插入
  • no-repeat :圖片不作任何重複動作
  • -137px -243px : 第一個數據為從左至右的距離;第二個是從上而下的距離,單位是像素,最終定位的位置如下圖
  • height:15px; width:15px;  :這張圖片長、寬各為 15 像素

-137px -243px 定位示意圖

 MineCraft 的材質包例子

 

279 total views, no views today