維的筆記: html

顯示具有 html 標籤的文章。顯示所有文章

2015年6月20日星期六

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
      }
    });

2015年3月22日星期日

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

2015年3月15日星期日

CodeMirror範例

Code Mirror
可以在網頁中顯示程式碼，並且可以編輯

以下是一個範例：
1. 首先將Code Mirror 載下來
http://codemirror.net/index.html

2.在網頁<head>中載入檔案

<link href="codemirror-5.0/lib/codemirror.css" rel="stylesheet"></link>
<script src="codemirror-5.0/lib/codemirror.js"></script>
<script src="codemirror-5.0/mode/javascript/javascript.js"></script>
<script src="codemirror-5.0/addon/edit/matchbrackets.js"></script>

3. 以及設置style

<style>
  .CodeMirror { height: auto; border: 1px solid #ddd; }
  .CodeMirror-scroll { max-height: 200px; }
  .CodeMirror pre { padding-left: 7px; line-height: 1.25; }
</style>

4. 在<body>需要插入程式碼的地方加上textarea

<form>
<textarea id="code_input" >
//this block allow you to define function
//please define your function in javascript
</textarea>
</form>

5. 並且加上script，讓它可以讀值

<script>
var editor = CodeMirror.fromTextArea(document.getElementById("code_input"), {
  lineNumbers: true,
  mode: "text/javascript",
  matchBrackets: true,
});
editor.on("blur", enable_key);
editor.on("focus", disable_key);
</script>

6. 即可完成

或是連到網站觀看成果
http://m100.nthu.edu.tw/~s100062209/cal.html

note1. code_input可以改為自己定義的id

note2. enable_key 則是自己定義的funciton，表示在blur這個事件時執行

note3. disable_key和上述同理

note4. 文字區塊更改：
取值: editor.getValue();
設值: editor.SetValue(" ");

2015年6月20日 星期六