Expandable Control in Windows Store App Using JQuery

Introduction

In this article we will implement an expandable control in a Metro Style Application using jQuery. The expandable control contains the text of a topic; initially it will show less than 500 characters. The logic is that if the control contains less than 500 characters of text then the link will remain hidden but if it contains more than 500 characters then a link "more..." will be shown and the user can click on the link to expand the control.

In the following we are including the entire code of the HTML file and the JavaScript file to create this mini application. 

Step 1 : First, you will create a new Metro Style Application. Let us see the description with images of how to create it:

  • Open Visual Studio 2012
  • File -> New -> Project
  • Choose Template -> JavaScript -> Metro Style Application
  • Rename the application

img11.gif

Step 2 : In the Solution Explorer there are two files that we will primarily work with; the Default.Html file:

img2.gif

Step 3 : First of all we add a jQuery library to our project. The JavaScript code and the style sheet code is written in the header section. The following is the contents of the project:

 

  • JavaScript Code

  • Style Sheet Code

Code :

 

  <script src="/js/default.js"></script>

    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>

    <script type="text/javascript">

 

        $(document).ready(function () {

            var showChar = 500;

            var ellipsestext = "...";

            var moretext = "more";

            var lesstext = "less";

            $('.more').each(function () {

                var content = $(this).html();

 

                if (content.length > showChar) {

 

                    var c = content.substr(0, showChar);

                    var h = content.substr(showChar - 1, content.length - showChar);

 

                    var html = c + '<span class="moreellipses">' + ellipsestext + '&nbsp;</span><span class="morecontent"><span>'

                        + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>';

 

                    $(this).html(html);

                }

 

            });

 

            $(".morelink").click(function () {

                if ($(this).hasClass("less")) {

                    $(this).removeClass("less");

                    $(this).html(moretext);

                } else {

                    $(this).addClass("less");

                    $(this).html(lesstext);

                }

                $(this).parent().prev().toggle();

                $(this).prev().toggle();

                return false;

            });

        });

 

    </script>

Code :

<style type="text/css">

        a {

color: #0254EB

}

a:visited {

color: #0254EB

}

a.morelink {

text-decoration:none;

outline: none;

}

.morecontent span {

display: none;

}

.comment {

width: 800px;

background-color: #f00;

margin: 10px;

font-size:20px;

border:5px;

}

</style>

Step 4 : The complete code of this application is written below. It contains the code of the HTML file code and the JavaScript file code.

 

Code :

 

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>App3</title>

 

    <!-- WinJS references -->

    <link href="//Microsoft.WinJS.1.0.RC/css/ui-dark.css" rel="stylesheet" />

    <script src="//Microsoft.WinJS.1.0.RC/js/base.js"></script>

    <script src="//Microsoft.WinJS.1.0.RC/js/ui.js"></script>

 

    <!-- App3 references -->

    <link href="/css/default.css" rel="stylesheet" />

    <script src="/js/default.js"></script>

    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>

    <script type="text/javascript">

 

        $(document).ready(function () {

            var showChar = 500;

            var ellipsestext = "...";

            var moretext = "more";

            var lesstext = "less";

            $('.more').each(function () {

                var content = $(this).html();

 

                if (content.length > showChar) {

 

                    var c = content.substr(0, showChar);

                    var h = content.substr(showChar - 1, content.length - showChar);

 

                    var html = c + '<span class="moreellipses">' + ellipsestext + '&nbsp;</span><span class="morecontent"><span>'

                        + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>';

 

                    $(this).html(html);

                }

 

            });

 

            $(".morelink").click(function () {

                if ($(this).hasClass("less")) {

                    $(this).removeClass("less");

                    $(this).html(moretext);

                } else {

                    $(this).addClass("less");

                    $(this).html(lesstext);

                }

                $(this).parent().prev().toggle();

                $(this).prev().toggle();

                return false;

            });

        });

 

    </script>

    <style type="text/css">

        a {

color: #0254EB

}

a:visited {

color: #0254EB

}

a.morelink {

text-decoration:none;

outline: none;

}

.morecontent span {

display: none;

}

.comment {

width: 800px;

background-color: #f00;

margin: 10px;

font-size:20px;

border:5px;

}

    </style>

</head>

<body>

   <div class="comment more"><h2 style="font-weight:bold">Expandble control in Metro Apps Using jQuery</h2></div>

   <div class="comment more">

       <h2 style="font-weight:bold">Caching in ASP.NET</h2><br />

        Caching is a technique of persisting the data in memory for immediate

        access to requesting program calls. Many in the developer community

       consider caching as one of the features available to

       improve performance of Web applications

       <h2 style="font-weight:bold">why caching.......</h2><br />

       Consider a page that has list of Employee name, contact numbers

        and mail-Ids of existing employees of a company on an intranet accessible

        by all employees. This is very useful information that is available throughout

        the company and could also be one of the most accessed pages. The functionality of

        adding, updating or deleting is usually less intensive compared to more

       transaction-based systems like Purchase ordering, Voucher creation etc.

        Now in a normal scenario the process of querying database for each request is

        not cost-effective in terms of server resources, hence is lot better to cache

        or persist the data to avoid this costly loss of resources.

</div>

</body>

</html>

 

Step 5 : After running this code the output looks like this:

img3.gif 

Click on the "more.." link:

img4.gif

Up Next
    Ebook Download
    View all
    Learn
    View all