CSS:display, opacity,HighCharts 自訂 Y 軸

display : 改變元素顯示特性

  • none 從網頁消失,不佔空間
  • block 塊,<div> 就是該屬性
  • inline 行內, <span>

opacity : 透明,隱身還是有體積並且可互動

  • 1 不透明
  • 0 完全透明
  • 0.5 50% 透明

範例: A Not-so-slow JavaScript Face Detector 點選作用在 <input type=”file”> 之上,該 tag 使用 opacity:0 完全透明

HighCharts 自訂 Y 軸

 

  • title: {text: ‘標題’} 標題字
  • alignTicks: false 取消多線時對齊判斷,主要是讓 max 設定值可以作用
  • max:50 最大值
  • min: 0 最小值
  • minRange: 20 最小範圍
  • opposite: true 顯示於另一側 (右側)

 

201 total views, no views today

簡潔寫 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

是否將表格的框線合併

 

182 total views, no views today

Google Map v3 使用一:定位、標注、標注說明

參考資源

擁有自己的 API KEY

現在的 Google Map 都需要使用的 API KEY  才能使用,以前的 signed_in=true 已經沒有作用了

程式範例一:將地圖移動到想要的位置

 

程式範例二:加上一個標記

 

程式範例三:標記點選顯示詳細資訊

 

  1. 在指定地點加上自訂圖案標注
  2. 該標注可點擊跳出資訊視窗
  3. 取消其他控制地圖操作,例如拖曳、滾輪放大縮小等。參考 How to disable mouse scroll-wheel scaling with Google Maps API

 

選擇地點上傳及嵌入網頁

回傳 Json

 

網頁 HTML

將查詢到的經緯度 lat, lng 套入到 Google maps embedded 的網址內

 

527 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

 

593 total views, 1 views today

開啟 CentOS 的 Mail SMTP 認證

搞這個是因為要用 PHPMailer 發信,PHP 和 Mail Server 不同台,所以必須使用 SMTP auth 進行發信。

參考

 

 

重新啟動服務

 

398 total views, no views today