.Net Framework, Asp.net, Ado.net, .Net Remoting, .Net Webservice, SQL, XML, XSLT, WCF, WPF, WWF NHibernate, Ajax, Jquery, DHTML

Ado.netAsp.Net 2.0SQLC-SharpXMLFrameworkIISXMLWebServiceArchitecture
UMLProject ManagementSDLCMethodologiesDesign PatterenOOPWCF.Net RemotingWWF
MVPMVCSilver LightN-HibernateAjaxJ-QuerySEO-MarketingSite MapPhp

ETG Consultancy
Home
Consultancy
Portfolio
Join Us
Contact Us
Advertisement
Articles
WCF
User Control
Custom Control
Reflection
Deligate
UML
Globilisation
Threading
LINQ
Performance Tips
Interviews

JQuery and Json together

JQuery is a javascript library which eases javascript developemt and it also includes many Ajax functionality. So before we start we need to download the .js libraries from jquery official sites

Basic understanding

$("#header") = get the element with id="header"
$("h3") = get all "h3" element
$("div#content .photo") = get all element with class="photo" nested in the 'div id="content"'
$("ul li") = get all "li" element nested in all "ul"
$("ul li:first") = get only the first "li" element of the "ul"

See Using Jquery in repeater / gridview / datagrid
How to edit gridview row using jquery DOM

We have expert jquery developer in mumbai india, We can provide Php JQuery, Jquery with asp.net, jquery with ajax. Give a rich look to you application with with Jquery UI. Please contact us to know more about our service.
All Jquery example are experienced from jquery.com, here we are just trying to make example easier for development need.

Jquery examples

JqueryResizeableCollapseSliding EffectFloating Div
Image SlidingImage ChangesDiv AlertDiv DisappearSimple image changes
Datepicker

heading 1

This is body of 1

delete

heading 2

This is body of 2

delete

heading 3

This is body of 3

delete

heading 4

This is body of 4

delete

heading 5

This is body of 5

delete
Jquery Sample Code
<script type="text/javascript" src="js/jquery.js"></script>
1:
2:<script type="text/javascript">
3:$(document).ready(function(){
4:
5: $(".pane .delete").click(function(){
6: $(this).parents(".pane").animate({ opacity: 'hide' }, "slow");
7: });
8:
9:});
10:</script>
11:
12:<style type="text/css">
13:body {
14: margin: 10px auto;
15: width: 470px;
16:}
17:h3 {
18: margin: 0;
19: padding: 0 0 .3em;
20:}
21:p {
22: margin: 0;
23: padding: 0 0 .5em;
24:}
25:.pane {
26: background: #edf5e1;
27: padding: 10px 20px 10px;
28: position: relative;
29: border-top: solid 2px #c4df9b;
30:}
31:.pane .delete {
32: position: absolute;
33: top: 10px;
34: right: 10px;
35: cursor: pointer;
36:}
37:</style>
38:</head>
39:
40:<body>
41:<div class="pane">
42: <h3>heading 1</h3>
43: <p>This is body of 1 </p>
44: <img src="images/btn-delete.gif" alt="delete" class="delete" />
45:</div>
46:<div class="pane">
47: <h3>heading 2</h3>
48: <p>This is body of 2 </p>
49: <img src="images/btn-delete.gif" alt="delete" class="delete" />
50:</div>
51:<div class="pane">
52: <h3>heading 3</h3>
53: <p>This is body of 3 </p>
54: <img src="images/btn-delete.gif" alt="delete" class="delete" />
55:</div>
56:<div class="pane">
57: <h3>heading 4</h3>
58: <p>This is body of 4 </p>
59: <img src="images/btn-delete.gif" alt="delete" class="delete" />
60:</div>
61:<div class="pane">
62: <h3>heading 5</h3>
63: <p>This is body of 5 </p>
64: <img src="images/btn-delete.gif" alt="delete" class="delete" />
65:</div>
66:</body>
67:</html>
68:
Leave your comment.
Name
Email
Comments
Tell Us7859+5 =

Reduce your Dialy IT Cost, Consult with us
Stay healthy in recession

Advertisement
Sponsored by

Privacy Policy ©2009 ETG Consultancy, All Rights Reserved Terms & Conditions
Asp.net, Ado.net, .Net Remoting, .Net Webservice, SQL, XML, XSLT, WCF, WPF, WWF NHibernate, Ajax, Jquery, DHTML