2013年2月27日 星期三

{JQuery}倒數計時器(Like hTC時鐘效果)

當到數十秒結束後,將saveBtn 效果Open

JavaScript:
function timerStart() {
            $("span").each(function () {
                $(this).attr('style', 'display');
            });
            //只有秒數
            $('.counter').counter({ format: '59' });
            //事件:counterStop
            $('.counter').live('counterStop', function () {
                $('#<%=saveBtn.ClientID %>').removeAttr('disabled');
            });
         }


Html:
<asp:Button ID="saveBtn" runat="server" Text="Upload" class="btnred" />

<span id="spanCounterWord" style="display:none" >等待</span>
                <span class="counter  counter-analog" id="spanCounter" style="display:none" >0:10</span>
                <span id="spanCounterWord2" style="display:none" >秒後,即可再度上傳</span>


註1:在API中綁定counterStop事件用 on , 其為jQuery UI版本為1.7以上才能使用,
        1.7以下的版本使用 live 綁定
註2:each 使用如下Sample:

$("span").each(function () {
});


$("span[dir='value']").each(function(){
});


API:
http://blog.sophilabs.com/2012/08/jquery-counter-plugin/

JS 綁定事件
http://blog.wu-boy.com/2012/04/use-on-api-to-attach-event-handlers-on-jquery/

each 瀏覽標籤
http://stackoverflow.com/questions/1936411/return-the-text-of-each-span-using-jquery
API:
http://api.jquery.com/each/
參考資料:
http://stackoverflow.com/questions/1936411/return-the-text-of-each-span-using-jquery