A simple, fast lightweight jQuery plugin for multi-select checkbox with shift key. Why fast ?? Because the id is the fastest selector we know it.

The Demo page please check http://jasonni.github.io/rangeselector/

最近做了一個兩欄式 layout
左邊欄嵌入 iframe
右邊欄分為上和下兩塊
在 chrome 和 ie 上都顯示的十分幸福美好
可是到 firefox 上時
發現 iframe 被擠下去了囧
和 @Vivian 大神研究之後
發現是 firefox 在計算 width 的方式和其他不同
例如
width 為 235px
padding 為 25px
padding 理當和 width 不會有關係
可是在 firefox 裡
width 變成 260px 了囧
好吧….front end 就是在解決這種問題的
解法就是在右邊欄加入
box-sizing: border-box

之後一切又回歸幸福美滿

Directory Structure

www
|—-index.html
|—-js
|   |---main.js
|
|--css
|   |---main.scss
|
|--img
|—–lib
    |———jquery/jquery-min.js
    |———requirejs/require.js
    |———bootstrap/bootstrap.js

1
2
3
4
5
6
7
8
9
10
11

requirejs.config({
    baseUrl: lib,
    paths: {
        jquery: jquery/jquery,
        main: ../js/main
    },
    shim: {
        bootstrap: ['jquery']
    }
});

待續…

最近因工作需要開始研究 Jquery Validation
不過因為我們導入 Bootstrap
因此它產生訊息提示的 style 還得覆寫一下
才能符合我們的需求
看一下 Demo

在實作上
各欄位驗證的屬性設定可以參考Jquery Validation Document
除了 html class 要符合 Bootstrap 規範外
其中需要注意的是
* 若 form 裡有 radio 或 checkbox 時，一定要去覆寫 errorPlacement， 否則驗證訊息會出現在錯誤的位置 * 驗證欄位可以寫在 html class 或 js，若寫在 js 不能寫 form 裡沒有的欄位，否則 bug 會找不到噢 XD

再來就是要去覆寫 js 的 function 來達到我們的需求

之前看到 label 時
被它的 for 屬性驚到原來可以這樣用
直到和 Joseph大神 pair programming
才發現到它真正的迷人之處
也解決了許久許久之前常聽到有使用者反應
為什麼你們系統的 radio 和 checkbox 這麼小
我都點不到 XD
那時得到的解答是：本來預設就是這樣！！
不過
今天終於得到真正的答案
就是搭配 label 這屬性

Demo 開始

將miiiCasa目前學到的新手訓練
實作了一張 HTML CSS Todo List 靜態網頁

之所以想做 Todo List 的原因
是因為網路上操作其實大多脫離不了新刪查改

所以假如在學習一個新的Framework時
可以搞懂新刪查改的使用方式
大概也掌握了6, 7成

因此做了一個 Todo List
希望每學到一個新的東西時
就用 Todo List 實作一下 XD

小莊大師魔鬼細節的指導

input: placeholder 以及 label: for 的優雅之處

1
2
3
4

<div>
    <label for="todo">代辦事項</label>
    <input type="text" id="todo" placeholder="enter something todo" >
</div>

JasonNi, 前端工程師 現任職於 miiicasa, TW 熱愛 新技術, 美食 Hacking Everything

First post just try how to use markdown language and change the theme.

Markdown Test:

Unordered List

* unordered

• unordered
• unordered
• unordered

Split

*** is split

Ordered List

1. ordered list

1. ordered list
2. ordered list
3. ordered list