顯示具有 jQuery 標籤的文章。 顯示所有文章
顯示具有 jQuery 標籤的文章。 顯示所有文章
TOP

[jQuery] 利用jQuery blockUI防止使用者重覆點擊

於 12月 16, 2015 


<script language="javascript">


$(function() {
　$("input[id*=btn]").click(function(){
     $.blockUI(); 
　});
});


</script>




<asp:Button ID="btn" runat="server" CssClass="BtnBlue" />






jQuery blockUI 可修改參數表：


$.blockUI.defaults = { 
    // 顯示的文字內容 
    message:  '<h1>Please wait...</h1>', 
 
    title: null,        // 標題的文字有時用套板時
    draggable: true,    // 拖曳.須加在 jQuery UI
 
    theme: false, // 設定 jQuery UI 的套版
 
    // 樣式設計
    css: { 
        padding:        0, 
        margin:         0, 
        width:          '30%', 
        top:            '40%', 
        left:           '35%', 
        textAlign:      'center', 
        color:          '#000', 
        border:         '3px solid #aaa', 
        backgroundColor:'#fff', 
        cursor:         'wait' 
    }, 
 
    // 主題風格
    themedCSS: { 
        width:  '30%', 
        top:    '40%', 
        left:   '35%' 
    }, 
 
    // 背景圖層
    overlayCSS:  { 
        backgroundColor: '#000', 
        opacity:         0.6, 
        cursor:          'wait' 
    }, 
 
    // 鼠標圖示設定 
    cursorReset: 'default', 
 
    // 樣式運用 $.growlUI 
    growlCSS: { 
        width:    '350px', 
        top:      '10px', 
        left:     '', 
        right:    '10px', 
        border:   'none', 
        padding:  '5px', 
        opacity:   0.6, 
        cursor:    null, 
        color:    '#fff', 
        backgroundColor: '#000', 
        '-webkit-border-radius': '10px', 
        '-moz-border-radius':    '10px' 
    }, 
     
    // IE 讀取的問題
    iframeSrc: /^https/i.test(window.location.href || '') ? 'javascript:false' : 'about:blank', 
 
    // 修復IE問題 
    forceIframe: false, 
 
    // z-index 設定 
    baseZ: 1000, 
 
    // 如果都設定為 true 則自動置中
    centerX: true, 
    centerY: true, 
 
    // 修復IE問題
    allowBodyStretch: true, 
 
    // 是否禁止滑鼠事件
    bindEvents: true, 
 
    // 鍵盤事件 
    constrainTabKey: true, 
 
    // 淡入的時間.單位為毫秒
    fadeIn:  200, 
 
    // 淡出的時間.單位為毫秒 
    fadeOut:  400, 
 
    // 自動解鎖.單位為毫秒 0為手動解鎖 
    timeout: 0, 
 
    // 是否顯示覆蓋圖層
    showOverlay: true, 
 
    // 是否設定滑鼠焦點
    focusInput: true, 
 

    // 淡入完成後執行 
    onBlock: null, 
 
    // 淡出執行
    //   onUnblock(element, options) 
    onUnblock: null, 
 
    // IE BUG 需要知道詳細請看 http://groups.google.com/group/jquery-en/browse_thread/thread/36640a8730503595/2f6a79a77a78e493#2f6a79a77a78e493 
    quirksmodeOffsetHack: 4, 
 
    // 消息區塊 類別名稱 
    blockMsgClass: 'blockMsg', 
 
    // 是否重複允許封鎖
    ignoreIfBlocked: false 
};





參考資料：














0
意見


















標籤：




















            

          

          

        

          

        








TOP



[Javascript & jQuery] 滑動廣告2












於
6月 02, 2015











參考資料：http://www.flycan.com/article/css/javascript-jquery-slider-1334.html

依照參考資料的jQuery練習了兩種不同功能顯示方式。



方法一：依頁數隱藏左右滑動箭頭。

<head>

<script language="javascript"> 

      (function($) { 

            $(function(){

                var gNum=0;//組數的初始值

                var dX=0;//水平座標位置

                var OuterBoxWidth=$(".slider").width();//外層寬度

                var TotalPage=Math.floor(($(".slider ul").width()-1)/OuterBoxWidth);//總組數

              

                $(".status li").eq(gNum).addClass("now");   

              

                $(".prev").hide();

              

                if(TotalPage==0){

                    $(".next").hide();

                }

              

                $(".next").click(function(){

                 if(gNum<TotalPage){

                  gNum++;

                  dX = gNum*OuterBoxWidth*-1;



                  $(".prev").show();

                                   

                  if(gNum==TotalPage){

                            $(".next").hide();

                  }

                  else

                  {

                      $(".next").show();

                  }   

                 }

               

                 SS();

                });

             

                $(".prev").click(function(){

                     if(gNum>0){

                  gNum--;

                  dX = gNum*OuterBoxWidth*-1;

                 

                  $(".next").show(); 



                  if(gNum==0){

                         $(".prev").hide();

                        }

                 }

                 else

                 {

                     $(".next").show();

                 }

                 SS();

                });

             

                function SS(){

                 $(".slider ul").stop().animate({left:dX}, 700);

                 $(".status li").removeClass().eq(gNum).addClass("now");

                }

             

                $(".status li").click(function(){

                 gNum=$(this).index();

                 dX = gNum*OuterBoxWidth*-1;

                 SS();

                });

            });

        })(jQuery);    

 </script>

</head>



方法二：首頁點選左箭頭滑動至頁尾，頁尾點選右箭頭滑動至首頁。

<head>

 <script language="javascript"> 

      (function($) { 

            $(function(){

                var gNum=0;//組數的初始值

                var dX=0;//水平座標位置

                var OuterBoxWidth=$(".slider").width();//外層寬度

                var TotalPage=Math.floor(($(".slider ul").width()-1)/OuterBoxWidth);//總組數

              

                $(".status li").eq(gNum).addClass("now");   

                              

                $(".next").click(function(){

                 if(gNum<TotalPage){

                  gNum++;

                  dX = gNum*OuterBoxWidth*-1;

                 }else{

                  gNum=0;

                  dX = 0;

                 }

                

                 SS();

                });

             

                $(".prev").click(function(){

                     if(gNum>0){

                  gNum--;

                  dX = gNum*OuterBoxWidth*-1;

                 

                  $(".next").show(); 

                 }

                 else

                 {                   

                     if (TotalPage>= 1)

                     {

                         dX = TotalPage*OuterBoxWidth*-1;

                         gNum = TotalPage

                     }

                 }

                 SS();

                });

             

                function SS(){

                 $(".slider ul").stop().animate({left:dX}, 700);

                 $(".status li").removeClass().eq(gNum).addClass("now");

                }

             

                $(".status li").click(function(){

                 gNum=$(this).index();

                 dX = gNum*OuterBoxWidth*-1;

                 SS();

                });

            });

        })(jQuery);    

 </script> 

</head>



CSS部份：

    <style type="text/css">

            .list{ list-style:none; margin:0; padding:0;}

            .sliderBox{ background-color :#ede9e8; width:960px;  overflow:hidden; position:relative;padding-bottom:7px; }

            .slider{ width:888px; height:50px; overflow:hidden; margin:auto; position:relative;}

            .slider ul{ overflow:hidden;  position:absolute; left:0;list-style-type:none;}

            .slider li{ float:left;text-align:center;list-style-type:none;}

            .status{ text-align:center; margin-top:0px; position:relative\9; *margin-left:435px;}

            .status li{ cursor:pointer; background:#FFF; display:inline-block; text-indent:-9999px; border:2px solid #CCC; width:8px; height:8px; border-radius:100%; margin:0 5px; *float:left; }

            .status li.now{ background:#09C; border-color:#999;}

            .dIcon{ text-indent:-9999px; position:absolute; top:15px; display:block; width:10px; height:10px; background:url(../slider.png) no-repeat; width:22px; height:30px;}

            .next{ right:5px; background-position:-22px -2px;}

            .prev{ left:5px; background-position:0 -2px;}

            .next:hover{ background-position:-22px -32px;}

            .prev:hover{ background-position:0 -32px;} 

    </style>



HTML的部份：



                <div class="sliderBox">

                  <div class="slider">

                    <ul id="ulSlider" class="list" runat="server">

                                <li>

                                    <table border="0" bgcolor="#ede9e8" width="296">

                                        <tr>

                                            <td width="50" rowspan="2" align="left" style= "word-break:break-all;">

                                                    <asp:Image ID="img" runat="server" ImageUrl=''/>

                                            </td>

                                            <td width="246" align="left" valign="bottom">

                                                <div style="width: 236px;text-overflow:ellipsis; white-space:nowrap;overflow:hidden">

                                                    <asp:LinkButton ID="btname" style="text-decoration:none"                ForeColor="Black" runat="server" Text='name'></asp:LinkButton>

                                                </div>

                                            </td>       

                                        </tr>

                                        <tr>

                                            <td width="246" align="left" valign="top" style= "word-break:break-all;">

                                                <asp:LinkButton ID="btDesc" style="text-decoration:none;" ForeColor="Black" runat="server" Text='Desc'></asp:LinkButton>

                                            </td>

                                        </tr>

                                    </table>                                           

                    </ul>

                  </div>

                  <a href="javascript:;" class="dIcon next">Next</a>

                  <a href="javascript:;" class="dIcon prev">Prev</a>

                </div>







0
意見


















標籤：
,













            

          

          

        

          

        








TOP



[Javascript & jQuery] 滑動廣告












於
5月 21, 2015











<html>

<head>

　<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

    <style type="text/css">

       .left {

          float:left;

       }

    </style>



 <script language="javascript">

    $(document).ready(function(){ 

    alert($(document).width());

   var docw = $(document).width() - 599;

   $("#SliderRight").click(function(){

   $("#main").animate({

    scrollLeft: $("#main").scrollLeft() + docw

   }, 700,function(){}); 

   });

   $("#SliderLeft").click(function(){

   $("#main").animate({

    scrollLeft: $("#main").scrollLeft() - docw

   }, 700,function(){}); 

   });



    });

 </script>

</head>



<body>


<input type="button" id="left" value="左" />
<input type="button" id="right" value="右" />
<div id="main" style="margin: 50px auto; overflow: hidden; width: 100%; height: 600px;">
<div style="width: 4200px;">
<div class="left">1<br /><img src="1.jpg" alt="" width="300px" /></div>
<div class="left">2<br /><img src="2.jpg" alt="" width="300px" /></div>
<div class="left">3<br /><img src="3.jpg" alt="" width="300px" /></div>
<div class="left">4<br /><img src="4.jpg" alt="" width="300px" /></div>
<div class="left">5<br /><img src="5.jpg" alt="" width="300px" /></div>
</div>
</div>

</body>

</html>



參考資料：

http://sweeteason.pixnet.net/blog/post/37793032-%E7%B7%B4%E7%BF%92%E7%94%A8jquery-%E8%AE%93%E9%A0%81%E9%9D%A2%E5%B7%A6%E5%8F%B3%E6%BB%91%E5%8B%95










0
意見


















標籤：
,













            

          

          

        

          

        








TOP



[ASP.NET, jQuery] ASP.Net使用jQuery日歷選擇器












於
12月 10, 2014











<head>

  <script>

      $(function() {           

        $("input[id*=tbStartTime]").datepicker({ showOn: "both", buttonImage: "../images/gesplus/calendar.gif", buttonImageOnly: true, dateFormat: "yy/mm/dd" });

      });

  </script>



  <style>

//調整圖片位置

    .ui-datepicker-trigger { margin-left:5px; margin-top: 5px; margin-bottom: -6px; }

  </style>

</head>





<asp:TextBox ID="tbStartTime" runat="server" Columns="10"></asp:TextBox>



參考資料：

http://blog.xuite.net/tolarku/blog/213867131-%5BAsp.net%5D+%E9%81%B8%E6%93%87%E6%97%A5%E6%9C%9F+Calendar+%E4%BD%BF%E7%94%A8+jQueryUI+%E7%9A%84+DatePicker



http://www.fbloggs.com/2009/04/16/how-to-style-the-button-image-in-jquery-datehandler-ui/



http://jqueryui.com/datepicker/#localization



http://blog.wu-boy.com/2008/04/jquery%E7%AD%86%E8%A8%98-%E5%A5%BD%E7%94%A8%E7%9A%84%E6%97%A5%E6%9C%9F%E5%87%BD%E5%BC%8F/





script取得ID的方式

一、　

$(".date-picker").datepicker()



二、




$("#<%= txtEventDate.ClientID %>").datepicker()





三、


$("input[id*=txtEventDate]").datepicker()







參考資料：

http://stackoverflow.com/questions/5115067/jquery-datepicker-not-working-in-asp-net-page










0
意見


















標籤：
,