A Glimpse of ListView using jQuery

Sapna
Dec 03, 2011

10.8k
0
0
- facebook
- twitter
- linkedIn
- Reddit
- WhatsApp
- Email
- Print
- Other Artcile

Introduction: In this article we will explore how we will hide and display the list items using jQuery. Further we are going to create a simple list view which have some parent item which contains child items and child elements also contain child elements whenever we click on the parent element if it contain any child item then an image of a plus sign will display in front of it and whenever we click on that image then it display all their child items. If there is any child item contains element then it will also display an image. After clicking on that image icon, the child item of that parent node will we represented by another sign which we will see in this application. Here we will using some HTML tags to make a list view and jQuery to Hide and display the list items or elements.

Step 1: Firstly we have to create a Web Application

Go to Visual Studio 2010
Open the web Application
Click OK.

Step 2: Secondly you have to add a new page to the website

Go to the Solution Explorer.
Right Click o Project name.
Select add new item.
Add new web page and give it a name.
Click OK.

Step 3: In this step we are going to see that see from where the js reference will be added to the source page of the default2.aspx page.

Step 4: Now we are going to write the script code which will be inside either on the head section or in the body section it will depend upon you which way you like most to placed it.

Step 5: In this step we have to add the images to the application let see where you have to add these images:

Step 6: Now it's time to write the jQuery code let see the code given below which will be write between the script tags <script></script>:

jQuery Code:

Code Description: Here we will discuss about the code first we are taking a ready handler inside it we have a $('li:has(ul)').click(function (event) { which is used to select all list item has it's child element and and apply a chained series of jQuery commands to the matched elements, beginning with attaching a click handler. This click handler checks to make sure that the target element of the event matches this. This is true only when the clicked item is the same as the one on which the listener was established; it allows us to ignore clicks on the child elements. After all, we only want to open and close an item when users click the parent item, not one of its children. If we determine that a parent item has been clicked, we then determine if its children are hidden or shown by employing the handy is() command using the :hidden filter. If the children are hidden, we reveal them using show(), and if shown, we hide them using hide(). we are changing the item marker with the plus and minus image and return false as the value of listner contain needless propagation. further .css('cursor', 'pointer') .click(); set the mouse cursor shape to the active pointer using css command. And hide the child element for the active items and invoking the click handler to applying if and else condition.
$('li:not(:has(ul))').css({
            cursor: 'default',
            'list-style-image': 'none'
        });
Further At the final step before users can interact with the page, We've set the list-style image style of the active items to one of the plus or minus GIF images, and we don't want that setting to be inherited by the list items that are children of those items.

Step 7: In this step we have to write the complete code which is given below and it will be write on the source file of default2.aspx page:

Code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!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>List view Demo</title>
<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('li:has(ul)').click(function (event) {
    if (this == event.target) {
        if ($(this).children().is(':hidden')) {
            $(this)
       .css('list-style-image', 'url(images/minusnewimg.gif)')
       .children().show();
        } else {
        $(this)
        .css('list-style-image', 'url(images/plusnewimg1.gif)')
        .children().hide();
        }
    }
    return false;
   })
   .css('cursor', 'pointer')
   .click();
        $('li:not(:has(ul))').css({
            cursor: 'default',
            'list-style-image': 'none'
        });
    });
</script>
</head>
<body>
<fieldset>
<legend style="font-family: 'Comic Sans MS'; color: #008000; font-size: x-large; font-weight: bold;">List view — Glimpse</legend>
<ul>
<li style="background-color: #000000; font-family: 'Comic Sans MS'; font-size: x-large; color: #FFFF00">.NET 4.0
<ul>
<li style="background-color: #CC6699; font-family: 'Comic Sans MS'; font-size: large; color: #000000">
C# programming
<ul>
<li>Constructors</li>
<li>File Handling</li>
<li>Property</li>
<li>Inheritance</li>
<li>generics</li>
</ul>
</li>
<li style="font-family: 'Comic Sans MS'; font-size: large; color: #800000; background-color: #008080">
F# programming
<ul>
<li>F# Constructors</li>
<li>File Handling in F#</li>
<li>Property in F#</li>
<li>F# Inheritance</li>
<li>F# generics</li>
</ul>
</li>
</ul>
</li>
<li style="background-color: #800000; font-family: 'Comic Sans MS'; color: #808000; font-size: x-large">jQuery</li>
<li style="font-family: 'Comic Sans MS'; font-size: x-large; color: #0000FF; background-color: #FFFF00">
Java
<ul>
<li>Core Java</li>
<li style="font-family: 'Comic Sans MS'; font-size: large">
Advance Java
<ul>
<li>Servlet</li>
<li>JSP</li>
<li>Spring</li>
<li>Hibernate</li>
<li>Struts</li>
</ul>
</li>
<li>Net Beans</li>
</ul>
</li>
<li style="background-color: #000000; font-family: 'Comic Sans MS'; font-size: x-large; color: #49FCEA;">
Web Programming
<ul>
<li style="font-family: 'Comic Sans MS'; font-size: large; color: #800000; background-color: #53AC5F">ASP.NET
<ul>
<li>AJAX</li>
<li>MVC</li>
</ul>
</li>
<li style="font-family: 'Comic Sans MS'; font-size: large; color: #990033; background-color: #CCFF66">
PHP
<ul>
<li>Jhoomla</li>
<li>DreamViewer</li>
</ul>
</li>
</ul>
</li>
</ul>
</fieldset>
</body>
</html>

Step 8: In this article we will see the design of the default2.aspx page which is given below:

Step 9: Now we have to run the application by pressing F5 and the output given below:

Output1: Whenever we run the application it will display like as the item contains the children having plus sign and those do not have the children element then they have no icon: