Translate

顯示具有 jquery 標籤的文章。 顯示所有文章
顯示具有 jquery 標籤的文章。 顯示所有文章

2013年7月24日 星期三

Enter鍵按下後自動執行事件

兩種寫法：

1.javascript dopostback

<div id="divPanel">
    <asp:TextBox ID="txbContent"  runat="server" Width="60%" />
    <asp:LinkButton ID="butAdd" runat="server" Text="新增" OnClick="butAdd_Click" />
</div>

    <script type="text/javascript">
        $(document).keypress(function (e) {
            if ($('#divPanel').is(":visible") && e.which == 13) {
                __doPostBack('<%=butAdd.UniqueID%>', "");
            }
        });
    </script>

UniqueID詳細說明：

2.panel

用panel將要的元件包起來
並設定好defaultbutton屬性為Enter鍵後執行的buttonID

ex:
                <asp:Panel ID="pAdd" runat="server" DefaultButton="butAdd">
                        <asp:TextBox ID="txbContent"  runat="server" Width="60%" />
                        <asp:LinkButton ID="butAdd" runat="server" Text="新增" OnClick="butAdd_Click" />
                    </div>
                </asp:Panel>

參考：
張貼者： 於 沒有留言:
標籤： , ,

2013年4月23日 星期二

tab datapicker同時使用時…

當你的tab有datapicker，你會發現datapicker竟然失去了效用

明明就看得到，也呼叫的出來，但是怎麼點就沒應

這時後只要在重新在使用datapicker要用的時後，在呼叫一下連結
跟設定就可以了 :)

<script src="/Scripts/jquery-ui-datepicker-zh-Hant.js" type="text/javascript"></script>
$(function () { $(".datepicker").datepicker(); });


張貼者： 於 沒有留言:
標籤： ,

2011年12月26日 星期一

jquery教學語法網站

實現對焦圖片放大
http://www.wangyexx.com/s_img/991.html

簡單文字提示
http://www.wangyexx.com/s_mouse/990.html

滑鼠移向文字彈出說明文字
http://www.wangyexx.com/s_mouse/693.html
張貼者： 於 沒有留言:
標籤：

2011年12月22日 星期四

浮水印文字

引用連結：http://digitalbush.com/projects/watermark-input-plugin/

當載好兩個js檔之後，放到同一個資料夾，就可以使用了


<head runat="server">

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.watermarkinput.js" type="text/javascript"></script>

<script type="text/javascript">
    jQuery(function($) {
    $("#TextBox1").Watermark("輸入你要的字", "#dedede");
    });
</script>

</head>


<body>
<div>
<asp:TextBox ID="TextBox1" runat="server></asp:TextBox>

</div>
</body>

PS.請注意一下如果是.master記得id要變成


jQuery(function($) {
$("#ctl00_ TextBox1 ").Watermark("輸入你要的字", "#dedede");
   });

===
後續補充→發現這一篇可以做到更簡單去了解
ref→http://blog.roodo.com/esabear/archives/9329889.html
ref→http://blog.asflexer.com/jquery-textbox-watermark




 .waterMarkText  // 可以放你想要設定的任何浮水印效果
{
        color:#888888;
}

 <asp:TextBox ID="txbTitle" runat="server" tooltip="輸入浮水印文字"></asp:TextBox>



 <script type="text/javascript">
         $(function () {
             var txtbox = $('#<%=txbTitle.ClientID%>');
             txtbox.focus(function () {
                 if (txtbox.val() == this.title) {
                     txtbox.removeClass("waterMarkText");
                     txtbox.val("");
                 }
             });
             txtbox.blur(function () {
                 if (txtbox.val() == "") {
                     txtbox.addClass("waterMarkText");
                     txtbox.val(this.title);
                 }
             });
             txtbox.blur();
         });
       </script>
張貼者： 於 沒有留言:
標籤：

2011年10月28日 星期五

廣告輪播

今天要做的是廣告輪播

以前如果只有java→http://www.webpage.idv.tw/maillist/maillist2/code/01/01.htm
大概是要像這篇文這樣做，然後一個一個語法加，

但現在…

JQery在這方面可是強大到不行~><~

參考網址：
超多範例可以這看→http://malsup.com/jquery/cycle/begin.html
然後這是暫停與重新啟動→http://jquery.malsup.com/cycle/pause.html

最後再參考網路上的一篇(針對滑鼠滑入判定)→http://abgne.tw/jquery/apply-jquery/form-field-mouseover-get-focus-change-bg-color.html

目標：做一個廣告頁面，滑鼠移過去暫停，就這樣…


在head標頭內加


<style type="text/css">
       
.slideshow { height: 232px; width: 232px; }
.slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; }

</style>

<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<!-- include Cycle plugin -->
<script type="text/javascript" src="http://jquery.malsup.com/cycle/jquery.cycle.all.js"></script>

<script type="text/javascript">
    $(document).ready(function(){
     $('.slideshow').cycle({
        fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
        speed: 1000
    });});

    $(function() {
    // 當滑鼠移到 .slideshow 上時, 停止播放輪播
$('.slideshow').hover(
function()
{
$('.slideshow').cycle('pause');
},
function()
{
$('.slideshow').cycle('resume');
});
});

</script>

body只有這個...


<body>
    <form id="form1" runat="server">
    </form>
</body>
</html>



因為圖片要從資料庫拿，所以要另外處理，就變成…
.cs檔內


using System;
using System.Web.UI.WebControls;
using System.Text;


    protected void Page_Load(object sender, EventArgs e)
    {
        Literal l1 = new Literal();
        StringBuilder sb = new StringBuilder();
        for (int i = 0; i < form1.Controls.Count; i++)
        {
            sb.Append("<div class=\"slideshow\">");
            sb.Append("<img src=" + @"http://jquery.malsup.com/cycle/images/beach1.jpg" + @" width=200 height=200 />");
            sb.Append("<img src=" + @"http://jquery.malsup.com/cycle/images/beach2.jpg" + @" width=200 height=200 />");
            sb.Append("<img src=" + @"http://jquery.malsup.com/cycle/images/beach3.jpg" + @" width=200 height=200 />");
            sb.Append("</div>");

            Label1.Text = sb.ToString();
            this.Controls.Add(l1);
        }
    }

超方便，給jquery個GJ!!
張貼者： 於 沒有留言:
標籤：
訂閱： 文章 (Atom)