jquery-Slider

Ref: https://jqueryui.com/slider/#range
包含多個jquery套件
可以參考內容去更改
以下只以range slider作為範例

1. 在html中加入link:

<link href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"></link>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

2. 在html裡加一個id=slider-range的div

<div id="slider-range"></div>

3. 在script裡initial bar:

$(function() {
    $("#slider-range").slider({
      range: true,
      min: 0,
      max: 500,
      values: [ 75, 300 ],
      slide: function( event, ui ) {
        // do somethong when value change
        // ui.values[0]: left value
        // ui.values[1]: right value
      }
    });
    

jquery-flip

轉
Reference link:
http://nnattawat.github.io/flip/

利用jquery可以達到flip的效果
1. 下載套件
網站最上方下載
或是在Github
https://github.com/nnattawat/flip

2. 在html 載入需要的連結和檔案

 <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
 <script src="dist/jquery.flip.js"></script>

(第一行為jquery，第二行為flip套件)
(第二個套件要注意檔案位置)

3. 對於需要翻轉的block，需設成下列形式:

    <div id="card-2" class="card">
      <div class="front">
         Front content
      </div>
      <div class="back">
         Back content
      </div>
    </div>

即需要翻轉的block內容必須包含兩個<div>，一個class為front，一個class為back


4. 設置flip()

    <script type="text/javascript">
    $(function(){
      $("#card-2").flip({
        axis: "y",
        reverse: true,
        trigger: "click"
      });
    });
    </script>

5. 其他Option:

Attribute	Possible value	Default	Description
axis	y, x	y	The axis that you want to rotate around
trigger	click, hover, manual	click	Event that activates the flip action. Using manual means that you have to activate it via javascript.
reverse	true, false	false	Set to true if you want to reverse the direction of the flip.
speed	any integer	500	Duration in milisecond for flipping dom

若將trigger設為manual，則需要在javascript呼叫flip()，如:

$("#card-2").flip(true);  //back side

和

$("#card-2").flip(false);  //front side

6. demo
http://m100.nthu.edu.tw/~s100062209/hw3.html

Regular Expression-javascript

可以參考
http://www.w3schools.com/jsref/jsref_obj_regexp.asp

● /pattern/modifiers
  ○ pattern
    ◎ 運算元：
      [abc]：找到有abc字元(a或b或c)
      [^abc]：不包含abc字元
      a|b    ：找到a或b
      n+    ：找到n至少一次
      n*    ：找到n 零次或一次以上
      n?    ：找到n 零次或一次
   
   
    ◎ 特殊符號：
      \w ：word-character (a-z, A-Z, 0-9,_)
      \W：非word-character
      \d ：digit (0-9)
      \D：非digit
      \s ：空白
      \S：非空白
      \b：在開頭或結尾
      \B：不在開頭或結尾
      \n：換行符號
      \r： carriage return
      \t： tab
   

  ○ modifiers

     i: 忽略大小寫

     g: 找出所有pattern，而非只找到一個就停

     m: multiline matching，和換行有關

● javascript RegExp Object：
  ○建構：

    var res = new RegExp(pattern, modifiers);

  ○Method：

    1. exec()

    2. test()：  match時回傳true，否則回傳false

    3. toString()

e.g.

  var res = new RegExp(/[2-9]/g);
  if (res.test(input_txt.value))
  {
    alert("Sorry! " + input_txt.value + " is not accepted");
    clear_in();
    return;
  }

● replace()：  (String method)

1.  str.replace("str1", "str2")：str1被取代為str2

2.  str.replace(/pattern/modifiers, "str1")：match的pattern取代為str1

3.  str.replace(res, "str1")：利用ResExp object，將match到的pattern取代為str1

4. 利用$1可以取得()中match到的pattern  (一定要用小括號)

e.g. (將2進位數字轉換成number) 

  str.replace(/([0-1]+)/g, "parseInt(\"$1\",2)")
  eval(str)

● test($str)：  (regexp method)
  用來測試string是否包含pattern(回傳true或false)
e.g.

 var res = new RegExp(pattern, modifier);
 var str = "...";
 res.test(str);

● match： (String method)
  用來測試string 是否包含pattern(回傳match的pattern)
e.g.

 var str = "...";
 var res = str.match(/pattern/modifier);