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 + ' </span><span class="morecontent"><span>'
+ h + '</span> <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>
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 + ' </span><span class="morecontent"><span>'
+ h + '</span> <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: