JavaScript

設定二維陣列

需要注意的是,Javascript 是注重變數型態的語言,所以每一維陣列都必須先宣告

所以 array.push() 錯誤單純只是沒有宣告型態的關係

螢幕、視窗的寬高

 

 

iframe 根據內容高度調整

Content.html

三元運算元 Conditional (ternary) Operator

条件运算符

可以使用條件運算元簡化成

需要執行多條指令時可以使用 闭包 (Closure)

Closures 閉包

產生一組 0.00 ~100.00 的隨機數值

正規表示式

使用在 jQuery Validation Engine 2.6.2 上的一個自定義規則範例

直接編輯 jquery.validationEngine-zh_TW.js 檔案,將規則增加在內

增加一個不允許輸入 ‘ ” \  三個特殊字元的規則

379 total views, 1 views today

使用 DNS 解決 CDN 差異問題

如果發現網站有所謂 CDN 問題,可以使用不同地區的 DNS 查詢,帶我們到不同的 IP 主機,說不定可以解決瀏覽、下載方面產生的問題。

參考

使用工具

 

魔術字串

 

1,597 total views, 1 views today

使用 .htaccess 設定無法使用 ini_set() 的參數

當 PHPer 遇到無法修改主機 php.ini 的悲摧情境

Hoyo 本身是喜歡直接修改 php.ini,因為主機都是自己管理

遇到主機管理員不願意修改 php.ini 時,有些設定可以使用 ini_set() 設定,但不是全部都適用,例如上傳最大檔案限制 upload_max_filesize ,這時就必須使用其他手法

根據提示,後來使用的手法是修改 .htaccess

 

422 total views, no views today

Android APP 的開發 – 使用 Android Studio 1.4 + WebView

下載

  1. Java SE Development Kit Downloads
  2. Android Studio Download

AMD CPU

AMD CPU 因為不是 Intel CPU,所以 ABI 可以選取 arm 相關的選項,例如 :armeabi-v7 ,或使用其他 Android 模擬器

Android 模擬器可參考: [整理] 六個 Android 模擬器比一比

armeabi 的解說 ABI Management

WebView

  • 開啟 JavaScript
  • 監聽返回鍵為上一頁,直到退出

完整的 MainActivity.java 程式碼

讓 WebView 移除邊界,佔滿視窗

移除 padding 邊界 how can I set webview fill_parent in fragment?

自訂圖示

下載、安裝 Inkscape

 

修改 APP 名稱

名稱的設定檔為 AndroidManifest.xml

屬性修改值為 <application android:label=”@string/app_name”>

不過要在這裡修改,到 values/strings.xml 修改 app_name 變數方式較佳

 

打包 apk

  1. Build → Generate Signed APK

加入自定義網頁檔案

app → New → Folder → Assets Folder

可將檔案複製貼入到此目錄內,調用時名稱為 file:///android_asset ,注意沒有最後的 s

可參考: web view is not loading local html file in android

個人化微調

636 total views, no views today

如何引導網頁使用者轉換到 APP

參考至 GOMAJI 作法

  • 進網站時偵測到行動裝置用戶即切換到此網頁
  • 提供下載 APP 連結
  • APP 連結必須根據 Android, IOS 跳轉到不同商城網址

421 total views, no views today

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 顯示於另一側 (右側)

 

324 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

是否將表格的框線合併

 

297 total views, 1 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 的網址內

 

1,517 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

 

917 total views, no views today