Thursday, October 28, 2010

JQuery Example

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="frmTestJQuery.aspx.cs" Inherits="Account_frmTestJQuery" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .clsLbl
        {
            color: Blue;
        }
       
        .clsVis
        {
            display: none;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div align="center">
        Hello Welcome...
        <table>
            <tr>
                <td>
                    <asp:Label ID="lblUsername" runat="server" Text="Username" />
                </td>
                <td>
                    <input type="text" id="txtUsername" runat="server" value="Hello" />
                </td>
            </tr>

            <tr>
                <td>
                    <asp:Label ID="lblUsername1" runat="server" Text="Username1" />
                </td>
                <td>
                    <asp:TextBox ID="txtUsername1" runat="server" Text="write your Username here"></asp:TextBox>
                </td>
            </tr>

            <tr>
                <td>
                    <asp:Label ID="lblTest" runat="server" Text="Test" />
                </td>
                <td>
                    <input type="text" id="txtTest" isgridtext="True" value="Test" />
                </td>
            </tr>
            <tr>
                <td>
                    <asp:Label ID="lblUserPhone" runat="server" Text="Phone" />
                </td>
                <td>
                    <input type="text" id="txtPhone" runat="server" />
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <input id="Button1" type="button" class="clsButton" value="Submit" runat="server" />
                </td>
            </tr>
            <tr>
                <td id="tdTestID" runat="server" colspan="2" align="center">
                    <span id="spnTest" runat="server">abcd</span>
                    <!-- whatever HTML control we can write here to alert for strTestID of jquery Function -->
                </td>
            </tr>
            <tr>
                <td id="td1" runat="server" colspan="2" align="center">
                    <a href="http://www.google.com" target="_blank">www.Google.com</a>
                </td>
            </tr>
        </table>
        <div id="dvUserInfo" align="center">
            <table border="1">
                <tr>
                    <td>
                        <asp:Label ID="lblCheck" runat="server" Text="Check" />
                    </td>
                </tr>
            </table>
            <table border="1">
                <tr>
                    <td>
                        <div id="divUserDetail">
                            Show User Detail</div>
                    </td>
                </tr>
            </table>
            <table border="0">
                <tr>
                    <td>
                        &nbsp;
                    </td>
                </tr>
            </table>
            <table border="1">
                <tr>
                    <td>
                        <asp:DropDownList ID="ddlDropDown1" runat="server">
                            <asp:ListItem Value="Home_1">Home</asp:ListItem>
                            <asp:ListItem Value="Office_1">Office</asp:ListItem>
                            <asp:ListItem Value="FarmHouse_1">FarmHouse</asp:ListItem>
                            <asp:ListItem Value="Food_1">Food1</asp:ListItem>
                            <asp:ListItem Value="Food_2">Food2</asp:ListItem>
                        </asp:DropDownList>
                    </td>
                    <td>
                        <!--<div id="dvForNewDropDown">
                        </div> -->

                        <asp:DropDownList ID="ddlDropDown2" runat="server">
                        </asp:DropDownList>

                    </td>

                    <td>
                        <!--<div id="dvForNewDropDownNot">
                        </div> -->

                        <asp:DropDownList ID="ddlDropDownNot" runat="server">
                        </asp:DropDownList>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input id="btnSave" type="button" class="clsButton" value="Save" runat="server"  />
                    </td>
                    <td>
                        <input id="btnNewDropDownClone" type="button" class="clsButton" value="Drop down Clone" runat="server" />
                    </td>
                    <td>
                        <input id="btnNewDropDownWithNot" type="button" class="clsButton" value="Not Drop down Clone" runat="server" />
                    </td>
                </tr>
            </table>
        </div>
    </div>
    </form>
</body>
<script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">

    $(document).ready(function () {
        //Code goes here

        //alert($("#txtUsername").val()); // ID
        //alert($("#txtUsername1").val()); // ID
        //alert($("input").val());  // Control
        //alert($("div").val());    // Control
        //alert($("div input").val()); // Inner Control
        //alert($(".clsButton").val());  // class

        //alert($("input[type='button']").val()); // Selection on standard attributes
        //alert($("input[type='text']").val()); // Selection on standard attributes
        //alert($("input[ID='txtUsername1']").val()); // Selection on standard attributes
        //alert($("input[value='Submit']").val()); // Selection on standard attributes

        //alert($("input[IsGridText='True']").val()); // Selection on custome attributes



        //--Functions

        // VAL()
        //var strUserName = $("#txtPhone").val();  // VAL()
        //$("#txtPhone").val("079232323");         // VAL()


        // HTML()
        //var strTestID = $("#tdTestID").html();
        //alert(strTestID);
        //$("#tdTestID").html("<a id='aHref' href='' OnClick='alert(1)'> Click Here </a>");

        // TEXT      the main difference between Text and Html is that .. Html will get all the html and text will get only text value.
        //var strTestID = $("#tdTestID").text();
        //alert(strTestID);


        // Attr (attribute)
        //var IsGridText = $("#txtTest").attr("IsGridText");
        //alert(IsGridText);
        //$("#txtTest").attr("IsGridText", "False");
        //$("#txtTest").attr({ IsGridText: 'True', IsSelected: 'True' });

        // Css (style sheet)
        //var varUsername = $("#txtUsername").css("color");
        //alert(varUsername);
        //$("#txtUsername").css("color", "red");
        //$("#txtUsername").css({ 'height': '150px', 'width' : '150px' });


        // Each
        //$("input").each(function () {
        //    alert($(this).val());
        // })

        //$("input[type='TEXT']").each(function () {
        //    alert($(this).val());
        //})


        // toggleClass()
        //$("#dvUserInfo").toggleClass("Content");

        // height()
        //$("#dvUserInfo").height();

        // hide()
        //$("#dvUserInfo").hide();

        // show()
        //$("#dvUserInfo").show();


        // appendTo
        //$("<div>Hello</div>").appendTo("#<%= lblCheck.ClientID %>");
        //alert($("#<%= lblCheck.ClientID %>").html())
        //$("#<%= lblCheck.ClientID %>").append("<div>Hello</div>");


        // change()
        //$("#txtUsername").change(function () {
        //   alert('Change Check...');
        //});

        //click()
        //$("a").click(function () {
        //    alert('Hi');
        //});

        //dblclick()
        //$("a").dblclick(function () {
        //  alert('Hi');
        //});

        //focus()
        //$("#txtUsername1").focus();

        //focusIn()
        //$("#txtUsername").focusIn(function());

        //hover()
        //$("#lblCheck").hover(function () {
        //  alert('Hover Check');
        //});

        //keydown()
        //$("#txtUsername").keydown(function () {
        //  alert('Key Down Check function... Hello 123 Hello 123');
        //});


        //keyup()
        //$("#txtUsername").keyup(function () {
        //   alert('Hi');
        //});

        //keypress ()
        //$("#txtUsername").keypress(function () {
        //alert('Hi');
        //});

        //mousedown()
        //$("#txtUsername").mousedown(function () {
        //    alert('Hi');
        //});

        //mouseup()
        //$("#txtUsername").mouseup(function () {
        //  alert('Hi');
        //});

        //mousemove()
        //$("#txtUsername").mousemove(function () {
        //  alert('Hi');
        //});


        /*
        //Get
        .val()
        .html()
        .text()


        //Set
        .val(1)
        .html(1)
        .text(1)

        //Get
        .attr("Class")
        .css("Height")

        //Set
        .attr("Class", "clsUserInfo")
        .css("Color", "#CCC")
        */

        //-- will have to ask about  haseClass(), toggleClass(), height(), innerHeight(), outerHeight(), width(), innerWidth (), outerWidth () ,
        //-- fadeIn(), fadeOut(), appendTo   

        // toggleClass
        $("#<%= lblCheck.ClientID %>").click(function () {
            $(this).toggleClass("clsLbl");  //-- Color Change css applied
            $("#divUserDetail").toggleClass("clsVis"); //-- div Visible On/Off css applied
        });


        // Change()
        //$("#ddlDropDown1").change(function () {
        // alert($("#ddlDropDown1").val());
        //});


        // click
        $("#btnSave").click(function () {
            alert($("#<%= ddlDropDown1.ClientID %>").val());
        });

        // Clone
        $("#btnNewDropDownClone").click(function () {
            //$("#ddlDropDown1").clone().appendTo("#dvForNewDropDown");
            $("#ddlDropDown2").html("");
            $("#ddlDropDown1 option").clone().appendTo("#ddlDropDown2");
        });

        // Not
        $("#btnNewDropDownWithNot").click(function () {
            $("#ddlDropDownNot").html("");
            $("#ddlDropDown1 option").not("[value*='Food']").clone().appendTo("#ddlDropDownNot");
            //$("#ddlDropDown1").find("!option[value*='Food']").clone().appendTo("#ddlDropDownNot"); // -- But not working
        });


    });

</script>
</html>

No comments:

Post a Comment