偷懶是程設師的美德
為了在行動裝置上能夠啟用 jQuery UI 的拖曳行為如 Draggable , 我們通常會添加外掛 jQuery UI Touch Punch來支援。
不過一旦添加以後，在指定的拖曳區塊中如果含有 <input> <textarea> <select> 卻會造成無法 forcus() 的困擾。其實只要添加這段就可以繞過這個問題
|
1 2 3 4 5 |
$("input").on("click", function (){ $(this).focus(); }) |
繼承前一篇 Codeigniter – 如何讓 System 交給 Composer 保管。
最近因為要在 Codeigniter 以外使用 Codeigniter 的工具，花了一兩天思考，後來受到製作 Codeigniter Restful 的 Chris Kacerguis 啟發，想到原來可以這麼設計。
假設我們想把已經寫好的 Codeigniter 類別庫、或是想使用 Codeigniter 的工具，用在如應用在其他 CMS、其他框架、傳統 PHP 的話，那該如何橋接呢？很簡單，改改名稱就好。
bridge_codeigniter.php 本來是 Codeigniter 的 index.php，在這個範例中為了語意化，我們不使用 index.php 。
|
1 2 3 |
$application_folder = 'ci_app'; |
瀏覽器開啟 bridge_codeigniter.php 應該也能看到 Codeigniter 的歡迎畫面，不過我們其實不需要了。
ci_app/controllers/Welcome.php
|
1 2 3 4 5 6 |
public function index() { // $this->load->view('welcome_message'); } |
新增一個 helloworld.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<?php // 我們一定有其他下載的工具，記得載入 vendor require_once 'vendor/autoload.php'; // 橋接 Codeigniter require_once 'bridge_codeigniter.php'; /** * 透過 Codeigniter 的 get_instance() 就能順利取得整個 Codeigniter 實例囉 * Codeigniter 相關配置，當然也是寫在 ci_app/ 裡面 */ $ci = &get_instance(); /** * 示範使用 Codeigniter 的 Library */ $ci->load->library('encryption'); // 產生鑰匙 $key = $ci->encryption->create_key(16); // 初始化 $ci->encryption->initialize([ 'cipher' => 'aes-256', 'mode' => 'ctr', 'key' => $key, ]); $text = 'Hello World'; // 加密後得到 a1584939ff9e8148de798646095d6ed87d28835eab153237c8a5d0309cc2d6734c0d8965b5a37e82cac5dea85bc689092785ad2507fbb297e7c96f7ddff693349yfjO5YR1aiMplRt8vDMEgS3Ta9RfIEYIg7c $ciphertext = $ci->encryption->encrypt($text); // 解碼後得到 Hello World echo $ci->encryption->decrypt($ciphertext); |
我示範了 Codeigniter 的字串加解密類別庫，瀏覽器打開 helloworld.php 能看到結果。這樣一來，就能在任何 PHP 底下執行 Codeigniter ，接著發揮你的創意吧。
雖然這種使用方式無疑會跑完整個 codeigniter 生命週期，但因為 CI 的效能算是框架中快速的，中小型開發不會有太大的影響，所以這是一種把 Codeigniter 接在其他系統底下的方式，但是否使用就取決於你的決定。
一般來說，最簡單方式是使用 “composer create-project codeigniter/framework” 來安裝，可以參考這一篇教你的一般安裝法。不過這裡要教的安裝方式，就是分離 system 目錄，可以達到
這種安裝方式官方沒有教，不過在 CI 中的 index.php 都已經支援這樣的特性。
|
1 2 3 4 |
composer init composer require codeigniter/framework 3.1.9 |
新增一個空白目錄後初始化 composer.json 並下載 codeigniter。注意！為了讓開發的系統穩定，我固定版本 3.1.9 ，請改成你想要的版本，可以在這裡找到。
因為 Codeigniter 升級有可能會需要小幅度的修改你的程式碼 (但大致上來說很少)，明確指定可以避免執行 composer update 不小心升級造成的麻煩。
將這兩個檔案複製到你的根目錄
這時候打開瀏覽器，只會看到遺失訊息。這是因為預設的 system 資料夾指定位置找不到。
|
1 2 3 |
Your system folder path does not appear to be set correctly. Please open the following file and correct this: index.php |
|
1 2 3 |
$system_path = 'vendor/codeigniter/framework/system'; |
發現了嗎？我們把 system 指向到 vendor 中的 Codeigniter ，只要重新打開瀏覽器就可以看到 Hello World 。
直接修改 composer.json 中的版本，例如我把 3.1.9 降級為 3.1.8
|
1 2 3 4 5 |
"require": { "codeigniter/framework": "3.1.8" } |
|
1 2 3 |
composer update |
這樣就完成替換囉，你可以試著 echo CI_VERION; 查看。
決定 Codeigniter 使用哪個版本核心，取決於 composer.json 的設定檔，但記得每次版本異動都要查看官方升級指南喔。
可以使用 NPM 安裝，用 Webpack 執行。以下介紹簡單傳統用法。
加入 jQuery 與 select2
|
1 2 3 4 5 6 7 8 9 |
<!-- jQuery --> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <!-- Select2 --> <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script> <!-- Select2 i18 中文翻譯 --> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/i18n/zh-TW.js"></script> |
|
1 2 3 |
npm i select2 |
<option> 外層不一定要使用 <optgroup> 做分類
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<form method="post"> <select class="user"> <optgroup label="admin"> <option value="1">Blue</option> <option value="2">David</option> </optgroup> <optgroup label="guest"> <option value="1">Judy</option> <option value="2">Kate</option> <option value="2">John</option> </optgroup> </select> </form> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
$(function (){ $(".user").select2({ language: 'zh-TW', width: '100%', // 最多字元限制 maximumInputLength: 10, // 最少字元才觸發尋找, 0 不指定 minimumInputLength: 0, // 當找不到可以使用輸入的文字 tags: true, }); }) |
data 的部分可以透過 AJAX 取得以後，再渲染 <option>。
|
1 2 3 4 5 |
<form method="post"> <select class="user"></select> </form> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
$(function (){ $(".user").select2({ language: 'zh-TW', width: '100%', // 最多字元限制 maximumInputLength: 10, // 最少字元才觸發尋找, 0 不指定 minimumInputLength: 0, // 當找不到可以使用輸入的文字 tags: true, data: [ { text: "admin", children : [ { id: 1, text: "Blue" }, { id: 2, text: "David"} ] }, { text: "guest", children : [ { id: 3, text: "Judy" }, { id: 4, text: "Kate" }, { id: 5, text: "John" }, ] } ], }); }) |
上面示範有使用 <optgroup> 的作法，如果不需要分類就直接
|
1 2 3 4 5 6 7 8 9 10 |
... data: [ { id: 1, text: "Blue" }, { id: 2, text: "David"}, { id: 3, text: "Judy" }, { id: 4, text: "Kate" }, { id: 5, text: "John" }, ] |
要給 <option> 的格式，務必要包含 id, text 兩個參數。
當搜尋的時候，才開始向伺服器要資料，並呈現再 <option>
|
1 2 3 4 5 |
<form method="post"> <select class="user"></select> </form> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
$(function (){ $(".user").select2({ language: 'zh-TW', width: '100%', // 最多字元限制 maximumInputLength: 10, // 最少字元才觸發尋找, 0 不指定 minimumInputLength: 0, // 當找不到可以使用輸入的文字 // tags: true, placeholder: '請輸入名稱...', // AJAX 相關操作 ajax: { url: 'https://next.json-generator.com/api/json/get/E1SKlb7-r', type: 'get', // 要送出的資料 data: function (params){ // 在伺服器會得到一個 POST 'search' return { search: params.term }; }, processResults: function (data, params){ console.log(data) // 一定要返回 results 物件 return { results: data, // 可以啟用無線捲軸做分頁 pagination: { more: true } } } } }); }) |
processResults 從伺服器取得的結果，因為 return.results 要產生 <option> ，所以記得格式務必為
|
1 2 3 4 5 6 |
[ { id: 1, text: "Blue" }, ...... ] |
<select> 改為複選之外，select2 也要添加 tags: true。
|
1 2 3 4 5 |
<form method="post"> <select class="user" name="user[]" multiple></select> </form> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
$(function (){ $(".user").select2({ language: 'zh-TW', width: '100%', // 最多字元限制 maximumInputLength: 10, // 最少字元才觸發尋找, 0 不指定 minimumInputLength: 0, // 當找不到可以使用輸入的文字 tags: true, data: [ { id: 1, text: "Blue" }, { id: 2, text: "David"}, { id: 3, text: "Judy" }, { id: 4, text: "Kate" }, { id: 5, text: "John" } ], }); }) |
從遠端取得資料後，只需要對綁定的元素使用 jQuery 的 apeend() 與 trigger() 觸發就可以了。
|
1 2 3 4 5 |
<form method="post"> <select class="user" multiple></select> </form> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
$(function (){ $user = $(".user"); $user.select2({ language: 'zh-TW', width: '100%', // 最多字元限制 maximumInputLength: 10, // 最少字元才觸發尋找, 0 不指定 minimumInputLength: 0, // 當找不到可以使用輸入的文字 tags: true, data: [ { id: 1, text: "Blue" }, { id: 2, text: "David"}, { id: 3, text: "Judy" }, { id: 4, text: "Kate" }, { id: 5, text: "John" } ], }); // 取得預選的遠端資料 $.get({ url: 'https://next.json-generator.com/api/json/get/NkjWQg4bS', success: function (obj){ // obj = [{"id": 3,"text": "Judy"},{"id": 4, "text": "Kate"},{"id": 100, "text": "Jason"}] $.each(obj, function(index, ele) { // Jason 因為原本資料不存在，所以會被加入，其他則僅是替換 var option = new Option(ele.text, ele.id, true, true); $user.append(option).trigger('change'); }); } }, "json") }) |
現在做 WebAPP 簡直是家常便飯的時候了，要把 Web 做成更高的易用性，jQuery 在今天還是非常好懂得工具而且超方便，尤其是這種滑動的套件，真的是太簡單了。如果要在手機拖曳的話，請看這篇。
或是使用 npm 裝到開發環境裡
|
1 2 3 |
npm install jquery-touchswipe --save |
使用方式
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$("#test").swipe({ threshold: 0, swipe:function(event, direction, distance, duration, fingerCount, fingerData, currentDirection) { console.log([event, direction, distance, duration, fingerCount, fingerData, currentDirection]); $(this).text("滑動方向 " + direction ); } }); // 額外設定，例如手指頭支援的數量 $("#test").swipe( {fingers:2} ); |
swipe() 回傳的參數
選用的參數與支援的方法可以參考官方的設定。
通常我會把 threshold 設定為 0。這樣當滑動大於 0px 的時候，就會觸發事件，預設的滑動要大於 75px 才會觸發。