緩動函數(easings)速查表

緩動函數指定動畫效果在執行時的速度,使其看起來更加真實。

現實物體照著一定節奏移動,並不是一開始就移動很快的。當我們打開抽屜時,首先會讓它加速,然後慢下來。當某個東西往下掉時,首先是越掉越快,撞到地上後回彈,最終才又碰觸地板。

本頁可以在每次你需要時,幫助你找到想要的緩動函數。

http://api.jqueryui.com/easings/ 此頁也有相同的範例說明。

jsonp 測試頁面 前端 html 及後端 php 範例

HTML:

<html>
<head>
<META HTTP-EQUIV="CONTENT-TYPE" 
CONTENT="text/html; charset=UTF-8">
<script type='text/javascript' src='http://code.jquery.com/jquery-1.10.2.js'></script>
<script type='text/javascript'>
function show_msg(msg){
	alert(msg);
}
$(function(){
	$.ajax({
		type:'get',
		async:false,
		crossDamain:true,
		cache:false,
		url:'http://carbonfootprint.toyoink-ct.com.tw/carbonfootprint/login_valid',
		dataType:'jsonp',
		jsonCallback:'show_msg',
		data:{account:'jerry',passwd:'justdoit'}
	});
});
</script>
</head>
<body>
</body>
</html>

PHP:

    public function login_valid(){
        $account=$this->input->get('account');
        $passwd=$this->input->get('passwd');
        $query=$this->db->query("select * from carbon_passwd where id='{$account}' and passwd='{$passwd}';");
        if($query->num_rows()>0){
            $this->session->set_userdata($query->row(1));
            //print_r($this->session->all_userdata());
            echo "show_msg('密碼對了^^');";
        }
        else{
            echo "show_msg('你打的帳號:{$account},密碼:{$passwd}不對喔!!');";
        }
    }

jquery 使用 on api 讓新元素可用先前定義的事件方法

A delegated-events approach attaches an event handler to only one element, the tbody, and the event only needs to bubble up one level (from the clicked tr to tbody):

$( “#dataTable tbody" ).on( “click", “tr", function() {
    alert( $( this ).text() );
});

在 #dataTable tbody 元素下的 tr 元素,傳來的click事件都將會顯示以 tr 內容的訊息。

重點在 bubble up ,像上述範例一樣:tbody 一直都存在,只有它底下的tr可能會移除或新增。所以把tbody做個on的method,針對它下面指定元素與指定事件。對符合條件所傳來的氣泡事件,執行設定好的事件方法。

jquery validate plugin 如何讓沒通過驗證的輸入框後面不出現錯誤提示

From: http://stackoverflow.com/questions/4614685/jquery-validation-hide-error-message

Use the Validator errorPlacement option with an empty function:

$(“selector").validate({ errorPlacement: function(error, element) {} });

This effectively places the error messages nowhere.

最簡單有效的方法就是直接自訂修改自已的錯誤提示框的顯示方法。

參考:http://jqueryvalidation.org/validate

jquery plugin 在 input 內顯示輸入說明文字 範例

# jQuery Plugin Code

  $.fn.description_inside_input_field = function(){
        return this.each(function(){
            $(this).val($(this).prop('title'));
            $(this).focus(function(){
                if($(this).val()==$(this).prop('title')){
                    $(this).val('');
                }
            }).focusout(function(){
                if($(this).val()==''){
                    $(this).val($(this).prop('title'));
                }
            });
        });
    }

# Document Ready

$("tr.add_row input[type='text']").description_inside_input_field();

# Html Code

<table id="table_add_data">
<tbody>
<tr class="add_row">
<td><input class="year" title="年度" type="text" value="" /></td>
<td><input class="electric" title="電力" type="text" value="" /></td>
<td><input class="derv" title="柴油" type="text" value="" /></td>
<td><input class="natural_gas" title="天然氣" type="text" value="" /></td>
<td><input class="gas" title="汽油" type="text" value="" /></td>
<td><input class="lpg" title="液化石油氣" type="text" value="" /></td>
<td><input class="tap_water" title="自來水" type="text" value="" /></td>
<td><input class="add_button" type="button" value="新增" /><input class="cancel_button" type="button" value="取消 " /><input class="submit" type="button" value="送出" /></td>
</tr>
</tbody>
</table>

Scrollable Timeline 拖拉像 plurk 時間軸 的 jquery 程式範例

來源:http://jqueryfordesigners.com/fun-with-overflows/

// when the DOM is ready...
$(document).ready(function () {
  $('#timeline').mousedown(function (event) {
    // attach 3 pieces of data to the #timeline element
    $(this)
      .data('down', true) // a flag indicating the mouse is down
      .data('x', event.clientX) // the current mouse down X coord
      .data('scrollLeft', this.scrollLeft); // the current scroll position
        
    // return false to avoid selecting text and dragging links within the scroll window
    return false;
  }).mouseup(function (event) {
    // on mouse up, cancel the 'down' flag
    $(this).data('down', false);
  }).mousemove(function (event) {
    // if the mouse is down - start the drag effect
    if ($(this).data('down') == true) {
      // this.scrollLeft is the scrollbar caused by the overflowing content
      // the new position is: original scroll position + original mouse down X - new X
      // I'd like to see if anyone can give an example of how to speed up the scroll.
      this.scrollLeft = $(this).data('scrollLeft') + $(this).data('x') - event.clientX;
    }
  }).mousewheel(function (event, delta) {
    // now attaching the mouse wheel plugin and scroll by the 'delta' which is the
    // movement of the wheel - so we multiple by an arbitrary number.
    this.scrollLeft -= (delta * 30);
  }).css({
    'overflow' : 'hidden', // change to hidden for JS users
    'cursor' : '-moz-grab' // add the grab cursor
  });
});

// finally, we want to handle the mouse going out of the browser window and
// it not triggering the mouse up event (because the mouse is still down)
// but it messes up the tracking of the mouse down
$(window).mouseout(function (event) {
  if ($('#timeline').data('down')) {
    try {
      // *try* to get the element the mouse left the window by and if
      // we really did leave the window, then cancel the down flag
      if (event.originalTarget.nodeName == 'BODY' || event.originalTarget.nodeName == 'HTML') {
        $('#timeline').data('down', false);
      }                
    } catch (e) {}
  }
});

jQuery 讓 table 資料表轉為 json 物件

From: http://stackoverflow.com/questions/2240005/convert-a-html-table-data-into-a-json-object-in-jquery

An HTML table? Like, all the <td> contents in a 2-d array?

所有的TD標籤內容全都併在一起

var tbl = $(‘table#whatever tr’).map(function() {
    return $(this).find(‘td’).map(function() {
        return $(this).html();
    }).get();
}).get();

Then just use $.json (or whatever library you want) to turn that into a JSON string.

edit — re-written to use the native (shim here) .map() from the array prototype:

範例將每一列存為一物件

var tbl = $(‘table#whatever tr’).get().map(function(row) {
    return $(row).find(‘td’).get().map(function(cell) {
        return $(cell).html();
    });
});

jQuery selector 字串中不可使用特殊字元,若要在選擇器中使用特殊字元「必需要在前面加上兩條反斜線 “\\"」

出至:http://stackoverflow.com/questions/1466103/jquery-escape-characters-square-brackets

 

jQuery selector 字串中預設是不能使用特殊字元,若要在選擇器中使用特殊字元「必需要在前面加上兩個反斜線 “\\“」。

例如:$(‘#item\\(A\\)’) 

 

如果是藉由變數所代入 selector 中,僅需一個反斜線來脫逸特殊符號字元。

例如:
selector_string="EEP\(A\)";
$(“#"+selector_string)

 

I’ll put it here for other less fortunate souls.

 

Escape with TWO (2) backslashes.

 

http://docs.jquery.com/Frequently_Asked_Questions#How_do_I_select_an_element_that_has_weird_characters_in_its_ID.3F

 

or

 

For <span id="foo[bar]" /> you can select with $(“#foo\\[bar\\]") as discussed, or $(‘[id="foo[bar]"]’)

 

*********************************************************************

 

The introduction of jQuery API page gives the above explanation about this:

 

To use any of the meta-characters ( such as !"#$%&'()*+,./:;<=>?@[]^`{|}~ ) as a literal part of a name, it must be escaped with with two backslashes: \\.

javascript reg 字串取代用法 符合字串前加上脫逸符號

出至:http://stackoverflow.com/questions/5167096/help-with-javascript-regex-to-add-backslashes-to-certain-characters-if-doesnt-e

使用正規表示法取代字串 jQuery selector 中的特殊字元「小括號」,將小括號前面加上脫逸字元反斜線兩條。就能夠將它放到 jQuery 的 selector 中使用了。

var selector_string="language(English)";

function jquery_selector_escape(selector_string){
    selector_string=selector_string.replace(/(\(|\))/g,"\\$1″);
    return selector_string;
}

在 selector_string.replace(/(\(|\))/g,“\\$1″) 說明用小括號包起來的符合字串會將符合結果暫放在「$1」的變數當中,而要找尋的字串是小括號的兩個符號 " (  ) “,而取代字串則是將找到的小括號前面加上兩條反斜線。