2019-04-01 / JSN / 0 Comments / 941 views
HTML5 有一個元素叫做 <template>，在使用 jQuery 取得內容並複製成為模板，除了使用 clone() 之外，記得搭配 outerHTML 使用。以下範例
詳細程式碼如下
|
|
<h1>訂單</h1> <table class="orders" border="1"> </table> <template class="item"> <tr> <th class="id"></th> <td class="title"></td> </tr> </template> |
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 40 |
// 取得模板，透過取得 HTML 以後複製一份 var getTemplate = function (){ var html = $("template.item").html(); return $(html).clone(); } // 假設這是 AJAX 取得的資料 var ajaxData = function (){ return [{ id: 1, title: '蔬菜' }, { id: 2, title: '水果' }] } $(function (){ // 開始 var data = ajaxData() var temp = getTemplate() // 準備一個用來組合的 html 編碼的變數 var mix = ''; // 批次組合 $.each(data, function (key, ele){ temp.find(".id").text(ele.id) temp.find(".title").text(ele.title) // 必須要使用 outerHTML 才能取得根節點 <tr> mix += temp[0].outerHTML }) // 迴圈結合後再一次寫入 html 可以減少效能負擔 $("table.orders").html(mix) }) |
2018-08-31 / JSN / 0 Comments / 709 views
看起來效能非常好！這個套件是當初掀起流行的 Masonry 的開發團隊製作的。
安裝方式
使用 CDN
|
|
<!-- CSS --> <link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css"> <!-- JavaScript --> <script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script> |
透過 NPM 下載
如果需要完整套件(選用)，可以另外下載
|
|
npm install flickity-imagesloaded npm install flickity-fullscreen |
預設是 vanilla JavaScript (我們常說的原生 JS)，若要給 jQuery 使用還需要透過橋接
|
|
npm install jquery-bridget |
使用方式
可以直接使用 <link><script> 載入，如果使用 webpack 參考以下
|
|
var $ = require('jquery'); // 載入 jQuery var jQueryBridget = require('jquery-bridget'); // 載入 jQuery 橋接 var Flickity = require('flickity'); // 載入 Flickity // 建立 Flickity 的 jQuery 外掛 Flickity.setJQuery( $ ); jQueryBridget( 'flickity', Flickity, $ ); // 現在我們可以直接使用 $().flickity() var $carousel = $('.carousel').flickity({...}); |
HTML 的部分
|
|
<div class="main-carousel"> <div class="carousel-cell">...</div> <div class="carousel-cell">...</div> <div class="carousel-cell">...</div> </div> |
許多範例，官方講解得很清楚，可以去逛逛。
2018-07-19 / JSN / 0 Comments / 93 views
jquery.period.js
如果想要「將指定的元素集合，批次間隔固定時間去做一些事情」那麼可以用這支非常簡單的 plugin。
安裝
前往 Github 下載 或是使用 npm 下載
載入方式
|
|
import 'jquery.period.js' |
範例
這個範例是讓所有的 .item 間距 200 毫秒，批次動畫的增加高度。
|
|
$(".item").period({ delayTimes: 200, before: function (){ // ... }, todo: function(index){ // ... }, after: function (){ // ... } }) |
我們看實際範例：
2018-07-17 / JSN / 1 Comment / 214 views
為了在行動裝置上能夠啟用 jQuery UI 的拖曳行為如 Draggable , 我們通常會添加外掛 jQuery UI Touch Punch來支援。
不過一旦添加以後，在指定的拖曳區塊中如果含有 <input> <textarea> <select> 卻會造成無法 forcus() 的困擾。其實只要添加這段就可以繞過這個問題
|
|
$("input").on("click", function (){ $(this).focus(); }) |
參考
2018-06-20 / JSN / 1 Comment / 6,497 views
安裝
可以使用 NPM 安裝，用 Webpack 執行。以下介紹簡單傳統用法。
加入 jQuery 與 select2
|
|
<!-- 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> |
npm
基本用法
<option> 外層不一定要使用 <optgroup> 做分類
|
|
<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> |
|
|
$(function (){ $(".user").select2({ language: 'zh-TW', width: '100%', // 最多字元限制 maximumInputLength: 10, // 最少字元才觸發尋找, 0 不指定 minimumInputLength: 0, // 當找不到可以使用輸入的文字 tags: true, }); }) |
動態定義 option
data 的部分可以透過 AJAX 取得以後，再渲染 <option>。
|
|
<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> 的作法，如果不需要分類就直接
|
|
... data: [ { id: 1, text: "Blue" }, { id: 2, text: "David"}, { id: 3, text: "Judy" }, { id: 4, text: "Kate" }, { id: 5, text: "John" }, ] |
要給 <option> 的格式，務必要包含 id, text 兩個參數。
AJAX
當搜尋的時候，才開始向伺服器要資料，並呈現再 <option>
|
|
<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> ，所以記得格式務必為
|
|
[ { id: 1, text: "Blue" }, ...... ] |
複選
<select> 改為複選之外，select2 也要添加 tags: true。
|
|
<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" } ], }); }) |
AJAX 預選
從遠端取得資料後，只需要對綁定的元素使用 jQuery 的 apeend() 與 trigger() 觸發就可以了。
|
|
<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") }) |
Select2 相關設定可以參考官方。