緩動函數指定動畫效果在執行時的速度,使其看起來更加真實。
現實物體照著一定節奏移動,並不是一開始就移動很快的。當我們打開抽屜時,首先會讓它加速,然後慢下來。當某個東西往下掉時,首先是越掉越快,撞到地上後回彈,最終才又碰觸地板。
本頁可以在每次你需要時,幫助你找到想要的緩動函數。
http://api.jqueryui.com/easings/ 此頁也有相同的範例說明。
緩動函數指定動畫效果在執行時的速度,使其看起來更加真實。
現實物體照著一定節奏移動,並不是一開始就移動很快的。當我們打開抽屜時,首先會讓它加速,然後慢下來。當某個東西往下掉時,首先是越掉越快,撞到地上後回彈,最終才又碰觸地板。
本頁可以在每次你需要時,幫助你找到想要的緩動函數。
http://api.jqueryui.com/easings/ 此頁也有相同的範例說明。
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}不對喔!!');"; } }
範例說明:
$.each(data, function(index, obj){ if (index == 1) { return; // 等於continue } else { return false; // 等於break } });
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 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>
來源: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) {} } });