緩動函數(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) {}
  }
});