<%@ 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>
</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