徐嘉裕(Neil Hsu)的工作心得網誌!

如果要做一個AJAX讀取條，像是用在瀑布流讀取資料這樣的特效，方法如下： 使用JQuery AJAX 中的complete，beforeSend這兩個參數。 complete：請求完成時執行的函式(不論結果是success或error)。 beforeSend：發送請求之前會執行的函式。 //AJAX-CODE $.ajax({ url: xoopsjsurl + '/modules/neilwenchuang/ajax.php', type: 'POST', data: { id: $id, sortid:$sortid, number:$number }, cache:false, ifModified :true, async:false, success: function(response) { if(response=="") return false; //空值終止程式 $("#waterfallsflowformboxajax").before("<div id='waterfallsflowformboxajax"+$number+"'>"+response+"</div>"); }, beforeSend:function(){  //發送請求之前會執行的函式 $('#allrecordsimg').show(); }, complete:function(){ //請求完成時執行的函式 $('#allrecordsimg').hide(); },    error: function() { console.log('ajax error!'); } }) //HTML-CODE <p id='allrecordsimg'></p> //...

客戶剛好需要做一個瀑布流功能的介面，瀑布流主要功能就是當捲軸拉到瀏覽器底時觸發資料，像是下圖這樣。 詳細程式結構就不描述了，這裡主要是說明透過jQuery觸發ajax讀取資料及控制顯示數量的操作方式，之後如果有需要可以再做其他延伸開發，code如下： HTML結構 <div id='centerbox'> <div class="row customrow"> <{foreach item=boxArr from=$wenchuangshow.neilwenchuangbox}> <div class="col-md-6 customrowcol-md-6"> <div id='contentbox'> <{$boxArr.contentbox}> </div> </div> <{/foreach}> <div id='waterfallsflowbox' name='1,<{$wenchuangshow.sortidDB}>'></div> //瀑布流取值 <div id='waterfallsflowformboxajax' name='0' ></div> //建構瀑布流區 //備註：name='0'為預設值，到時候會透過AJAX回傳數量然後JS在讀取數量來控制顯示筆數 </div> </div> JS結構 //偵測捲軸位置如果到底觸發waterfallsflowboxajax()函數 $(window).scroll(function(){ var scrollint = $(window).scrollTop(); if ($(window).height() + $(window).scrollTop() == $(document).height()) { $ajaxsetup = $("#waterfallsflowbox...

最近需要幫客戶做一個jQuery區塊特效，就是點了按鈕左區塊會往左滑出內容區，然後再點一次按鈕左區塊又會往右滑回內容區， 這裡比較特殊工法的是利用修改name值來判斷區塊開啟還是關閉，這樣也能使用.css()來控制區塊的移動特效，方法如下： //html結構 <div id='leftboxdiv'> <div id='switchbtn' name=' go '></div>  //name值預設是go 內容內容內容內容內容內容內容內容內容內容內容 </div> //js-code //滑入滑出左區塊 $(document).ready(function(){ $("#switchbtn").click(function(){ if($(this).attr("name")=="go"){ $("#leftboxdiv").css({"animation-name":"leftboxdivgo","left":"-293px"}); $(this).attr('name','back');  //吧name值改成back }else{ $("#leftboxdiv").css({"animation-name":"leftboxdivback","left":"0px"}); $(this).attr('name','go');    //吧name值改成go } }); }); //css #leftboxdiv{ position: absolute; width: 293px; height: 1076px; background: url(../../img/blocks/travelerliving-commodity_01.png) repeat ...