jquery.ias.js 捲軸捲動時才帶入資料

現在的資料量通常很多，要一次帶入網頁，可能會loading很重

所以有一些網頁會先帶入預設的幾筆，等捲軸捲動時，才往下繼續帶出來，例如facebook那樣

jquery有一個預設的套件，可以試試看！

http://www.jqueryscript.net/other/jQuery-Infinite-Ajax-Scroll-Plugin-ias-js.html

使用 JQuery 將滑鼠移到 Button 上時，滑鼠變成 hand

$(function () { $(":button").css( 'cursor', 'hand' ); });

使用 JQuery 取得 json 的值 - Binding 到下拉選單中

1. 在 BasicService.ashx 的檔案中撰寫以下程式碼，主要為了產生 json 格式的字串回傳

public class BasicService : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
         

            string _service = context.Request.Params["Service"];
            string rtnflag = "";

            context.Response.ContentType = "text/plain";

            switch (_service) {
                case "getMonth":
                    rtnflag = getMonth();
                    break;
            }
           
            //回傳json字串
            context.Response.Write(rtnflag);
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }

        public string getMonth() {
            StringBuilder builder = new StringBuilder();


            builder.AppendLine("{");
            for (int i = 1; i <= 12; i++) {
                builder.AppendLine("\"" + i.ToString().PadLeft(2, '0') + "\": \"" + i.ToString().PadLeft(2, '0')  + "\"");
                if (i < 12) {
                    builder.AppendLine(",");
                }
            }
            builder.AppendLine("}");
            
            return builder.ToString();

        }
    }

2. 在*.aspx 撰寫以下的程式碼

<script language="javascript">
    $(document).ready(function () {
        $.getJSON('../Services/BasicService.ashx', { Service: "getMonth" }, function (data) {
            $.each(data, function (key, val) {
                $("#Select3")[0].options.add(new Option(val, key)); 
            });
        });

    });
</script>

jQzoom Sample

jQzoom 是 JQuery的插件，滑鼠移到圖片上，可以讓圖片放大。
官網：http://www.mind-projects.it/projects/jqzoom/

<script type="text/javascript" src="js/jquery-1.6.js"></script>
<script type="text/javascript" src="js/jquery.jqzoom-core.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.jqzoom.css">

<script type="text/javascript">
$(document).ready(function(){
    var options = {
            zoomType: 'standard',
            lens:true,
            preloadImages: true,
            alwaysOn:false,
            zoomWidth: 300,
            zoomHeight: 250,
            xOffset:90,
            yOffset:30,
            position:'left',
xOffset: 10,
yOffset: 10
    };
    $('.MYCLASS').jqzoom(options);
});
</script>

</head>

<body>
<a href="images/LARGEIMAGE1.jpg" class="MYCLASS" title="放大鏡" >
    <img src="images/SMALLIMAGE1.jpg" border="0">
</a>
</body>
</html>

JQuery 使用 slideUp 做淡入淡出


<head>
<script language="javascript" src="jquery.js"></script>
<script language="javascript">
$(document).ready(function(){
$('.upd-fade').click(function(){
$("#updbox").slideDown(500).delay(800).fadeIn(400);
$("#updbox").slideUp(500);
});
});
</script>

<style type="text/css">
<!--
#updbox {
position:absolute;
width:271px;
height:43px;
z-index:1;
left: 426px;
top: 0px;
background-color: #FBE0AE;
text-align: center;
}
-->
</style>
</head>

<body>

<a href="#" class="upd-fade">更新資料庫</a>

<div id="updbox" style="display:none">更新成功！</div>
</body>
</html>


使用 JQuery 取得 json 的值

1. 建立一個 ASP.NET的空網站，產生 Default.aspx， Service.ashx(範型處理程式)

2. 我預設 json 的格式為：

{"student":[{ "name": "Marry", "height": "154", "weight": "45" },{ "name": "Tom", "height": "170", "weight": "60" }]}

3.  在 Service.ashx 撰寫程式如下：     public void ProcessRequest (HttpContext context) {
        //接收參數
        string name = context.Request.Params["name"];
        context.Response.ContentType = "text/plain";
        //組成json格式
        System.Text.StringBuilder builder = new System.Text.StringBuilder();
        builder.AppendLine("{\"student\":[{ \"name\": \"" + name + "\", \"height\": \"154\", \"weight\": \"45\" },{ \"name\": \"Tom\", \"height\": \"170\", \"weight\": \"60\" }]}");
        //回傳json字串
        context.Response.Write(builder.ToString());
    }

4. 在 Default.aspx 撰寫程式如下：

$.ajax({
            url: "Service.ashx",
            type: "GET",
            data: {"name":"Jacky"},
            dataType: "json",
            success: function (data) {
                $.each(data.student, function () {
                    document.write("姓名=" + this.name + ";身高=" + this.height + ";體重=" + this.weight + "
");
                });
            },
            error: function () {
                alert("ERROR!!!");
            }
        });

5. 最後結果如下：

【JQuery】Masked Input Plugin

作者網站：http://digitalbush.com/projects/masked-input-plugin/


<script language="javascript" type="text/javascript">
jQuery(function ($) {
$("#Birth").mask("9999/99/99");
});
</script>


<%=Html.TextBox("Birth") %>