Date post: | 07-Apr-2018 |
Category: |
Documents |
Upload: | pradeepgoud1210 |
View: | 216 times |
Download: | 0 times |
of 37
8/3/2019 54181823 0461 Chapter 9 Creating Rich Content in ASP Net
1/37
ASP.NET jQuery Cookbook
Sonal Aneel Allana
Chapter No.9
"Creating Rich Content in ASP.NET"
8/3/2019 54181823 0461 Chapter 9 Creating Rich Content in ASP Net
2/37
In this package, you will find:A Biography of the author of the book
A preview chapter from the book, Chapter NO.9 "Creating Rich Content in ASP.NET"A synopsis of the books content
Information on where to buy this book
About the AuthorSonal Aneel Allana is a Senior Technical Consultant with Accentiv' SurfGold,
Singapore. She has over a decade of experience in building web and desktop solutions in
Microsoft technologies. She has worked with government agencies, credit bureaus,
banks, financial institutions, and multinationals, delivering high-end customized solutionsto meet their needs. She has worked on applications ranging from core banking software
and B2B links to content management, workflow, and loyalty engines.
From time to time, she has also taken up the role of project lead and has carried numerousprojects from conceptualization through implementation successfully. In addition to her
experience in Microsoft technologies, she is well versed in J2EE and LAMP platforms.
She holds a Master's degree in Computer Science from the National University of
Singapore and a Bachelor's degree in Computer Engineering from Mumbai University.
She is also passionate about network and data security and has a certificate in Security
Technology and Management from the Institute of Systems Science, National University
of Singapore.
For More Information:www.PacktPub.com/asp-net-jquery-cookbook/book
http://www.packtpub.com/asp-net-jquery-cookbook/bookhttp://www.packtpub.com/asp-net-jquery-cookbook/bookhttp://www.packtpub.com/asp-net-jquery-cookbook/book8/3/2019 54181823 0461 Chapter 9 Creating Rich Content in ASP Net
3/37
I would like to dedicate this book to my father for always believing in me
and loving me unconditionally. Dad, I am sorry that you passed away
before this book could become a reality.Special thanks to my mother for her love, sacrifices, and encouragement.
My husband, Aneel, for his constant guidance, support, and patience.
Without him this book would be impossible.
Thanks to Salim, Minaz, Rehan, and Yasmeen. There are many things I
owe to you.
Thanks to the wonderful team at Packt Publishing for their hard work,
dedication, and patience. Special thanks to Steven for being a constant
guide throughout the process. Thanks to my reviewers for meticulously
evaluating the content and for helping to make the book better.
For More Information:www.PacktPub.com/asp-net-jquery-cookbook/book
http://www.packtpub.com/asp-net-jquery-cookbook/bookhttp://www.packtpub.com/asp-net-jquery-cookbook/bookhttp://www.packtpub.com/asp-net-jquery-cookbook/book8/3/2019 54181823 0461 Chapter 9 Creating Rich Content in ASP Net
4/37
ASP.NET jQuery CookbookThe jQuery library has become increasingly popular with web application developersbecause of its simplicity and ease of use. The library is supported by an active community
of developers and has grown significantly over the years after its inception in 2006 byJohn Resig. Using this library eases complicated tasks and adds to the interactive
experience of the end user. Its extensible plugin architecture enables developers to build
additional functionalities on top of the core library.
With Microsoft's contribution of Templates, DataLink, and Globalization plugins to the
jQuery library and the distribution of jQuery with Visual Studio 2010 onwards, the
library has gained popularity with ASP.NET developers. jQuery can be very easilyinterfaced with ASP.NET controls as well as custom user controls. It can be used to
validate controls using client side scripts, thus giving us an alternative for server side
Validation Controls. It can be used to incorporate cool animation effects as well as tocreate graphic-rich pages. It can be used to post AJAX requests to web services, page
methods, and HTTP handlers. The possibilities with jQuery are endless.
This cookbook aims to cover some of the day-to-day tasks faced by ASP.NET developers
and how jQuery can be applied to work out the same. We will be focusing on interfacing
jQuery with ASP.NET applications and some of the amazing tasks that can be
accomplished using this powerful library. The recipes described in this book give fast and
easy solutions to some of the common encountered problems in web applications.
What This Book CoversChapter1, Working with ASP.NET Controls, describes the interfacing of standard
ASP.NET controls with the jQuery library. Controls such as TextBox, CheckBoxList,DropDownList, and Hyperlink are covered in this chapter.
Chapter 2, Validation of ASP.NET Controls, explains different client side validation
techniques that can be used with jQuery for validation of ASP.NET controls. These
validation techniques provide a substitute for server side Validation Controls.
Chapter 3, Working with GridView Control, explores different manipulations that can be
applied to the ASP.NET GridView control. You will learn to highlight rows/cells,
remove rows/ cells, use plugins, and apply animation effects using scripts.
Chapter 4, Working with Image Control, describes interesting applications of jQuery with
the ASP.NET Image control. The recipes covered demonstrate handy utilities such as
zooming, cropping, swapping, and changing the opacity of images. You will also learn to
build a photo gallery using jQuery.
For More Information:www.PacktPub.com/asp-net-jquery-cookbook/book
http://www.packtpub.com/asp-net-jquery-cookbook/bookhttp://www.packtpub.com/asp-net-jquery-cookbook/bookhttp://www.packtpub.com/asp-net-jquery-cookbook/book8/3/2019 54181823 0461 Chapter 9 Creating Rich Content in ASP Net
5/37
Chapter 5,Animations in ASP.NET, looks into various interesting animation effects that
can be achieved using jQuery. You will learn to apply different types of animation effects
to ASP. NET Label, Image, and Panel controls. Various effects such as fading, sliding,enlarging, and so on are covered in this chapter. The chapter also demonstrates animation
chaining and prevention of animation queue buildup.
Chapter 6,AJAX and ASP.NET (Part 1), demonstrates the making of AJAX calls using
jQuery. The chapter describes three basic techniques of sending AJAX request to the
server: via page methods, web services, and HTTP handlers. The chapter also
demonstrates the use of the Firebug add-on in Mozilla Firefox browser to investigate the
AJAX request/response.
Chapter 7,AJAX and ASP.NET (Part 2), explores more advanced applications of jQueryAJAX. The recipes in this chapter show how to work with HTML, XML, script, JSON,
JSONP, and complex data types such as objects using AJAX. You will also learn to build
a search engine using Yahoo! Search API.Chapter 8, Client Templating in ASP.NET, explains the use of Microsoft's jQuery
Templates plugin in ASP.NET websites. The chapter covers both inline as well as
external templates.
For More Information:www.PacktPub.com/asp-net-jquery-cookbook/book
http://www.packtpub.com/asp-net-jquery-cookbook/bookhttp://www.packtpub.com/asp-net-jquery-cookbook/bookhttp://www.packtpub.com/asp-net-jquery-cookbook/book8/3/2019 54181823 0461 Chapter 9 Creating Rich Content in ASP Net
6/37
9Creat ing Ric h Cont ent
in ASP.NET
In this chapter, we will cover:
f Creating an accordion control
f Creating a tab control
f Creating draggable controls
f Creating dialog boxes
f Using the datepicker control
f Using the progress bar control
f Using the slider control
f Adding tooltips to controls
I n t roduc t ion
Various jQuery plugins are available to add interactive features to ASP.NET web applications.
A popular plugin is the jQuery UI, built on top of the jQuery library, and consisting of handy
functionalities for creating rich content in web applications. In a nutshell, the jQuery UI library
provides the following:
f Completely confgurable widgets like accordion, tabs, progressbar, datepicker, slider,
autocomplete, dialog, and button
f Interactive features like draggable, droppable, resizable, selectable, and sortablef Advanced animation effects like show, hide, toggle, blind, bounce, explode, fade,
highlight, pulsate, puff, scale, slide, etc
f Customisable themes to suit the look and feel of your website
For More Information:www.PacktPub.com/asp-net-jquery-cookbook/book
http://www.packtpub.com/asp-net-jquery-cookbook/bookhttp://www.packtpub.com/asp-net-jquery-cookbook/bookhttp://www.packtpub.com/asp-net-jquery-cookbook/book8/3/2019 54181823 0461 Chapter 9 Creating Rich Content in ASP Net
7/37
Creating Rich Content in ASP.NET
2
In this article, we will primarily take a look at integration of jQuery UI with ASP.NET to build rich
content quickly and easily.
Get t i ng s ta r t ed
1. Let's start by creating a new ASP.NET website Ch a p t e r 9 in Visual Studio.
Go to the download page of jQuery UI at h t t p : / / j q u e r y u i . c o m/ d o wn l o a d ,
which allows customizable downloads based on the features required in the web
application. For the purpose of this chapter, we will download the default build as
shown next:
For More Information:www.PacktPub.com/asp-net-jquery-cookbook/book
http://www.packtpub.com/asp-net-jquery-cookbook/bookhttp://www.packtpub.com/asp-net-jquery-cookbook/bookhttp://www.packtpub.com/asp-net-jquery-cookbook/book8/3/2019 54181823 0461 Chapter 9 Creating Rich Content in ASP Net
8/37
Chapter 9
3
jQuery UI allows various custom themes. We will select the S u n n y theme for
our project:
2. Save the downloaded le. The download basically consists of the following:
c s s folder consisting of the the theme les
d e v e l o p me n t - b u n d l e folder consisting of demos, documents, raw script
les, etc.
j s folder consisting of the minied version of jQuery library and jQuery UI
3. Save the earlier mentioned css folder in the current project. Save the minied version
of jQuery UI and jQuery library in a script folder j s in the project.
4. In the recipes described in this chapter, in addition to including the jQuery library on
ASP.NET pages, also include the UI library as shown next:
< s c r i p t s r c = " j s / j q u e r y - 1 . 4 . 1 . j s " t y p e = " t e x t / j a v a s c r i p t " > < / s c r i p t >
< s c r i p t s r c = " j s / j q u e r y - u i - 1 . 8 . 9 . c u s t o m. mi n . j s " t y p e = " t e x t /
j a v a s c r i p t " > < / s c r i p t >
For More Information:www.PacktPub.com/asp-net-jquery-cookbook/book
http://www.packtpub.com/asp-net-jquery-cookbook/bookhttp://www.packtpub.com/asp-net-jquery-cookbook/bookhttp://www.packtpub.com/asp-net-jquery-cookbook/book8/3/2019 54181823 0461 Chapter 9 Creating Rich Content in ASP Net
9/37
Creating Rich Content in ASP.NET
4
5. Include the downloaded theme on the aspx pages as follows:
< l i n k h r e f = " c s s / s u n n y / j q u e r y - u i - 1 . 8 . 9 . c u s t o m. c s s " r e l = " s t y l e s h e e t "
t y p e = " t e x t / c s s " / >
Now let's move on to the recipes and explore some of the powerful functionalities of jQuery UI.
Creat ing an acc ord ion con t ro l
The jQuery accordion widget allows the creation of collapsible panels on the page without the
need for page refresh. Using an accordion control, a single panel is displayed at a time while
the remaining panels are hidden.
Gett ing Ready
1. Create a new web form Re c i p e 1 . a s p x in the current project.2. Add a main content panel to the page. Within the main panel, add pairs of headers
and subpanels as shown next:
< a s p : P a n e l i d = " c o n t e n t A r e a " r u n a t = " s e r v e r " >
< h 3 > < a h r e f = " # " > S e c t i o n 1 < / h 3 >
< a s p : P a n e l I D= " P a n e l 1 " r u n a t = " s e r v e r " >
L o r e m i p s u m d o l o r s i t a me t , c o n s e c t e t u r a d i p i s i c i n g e l i t , s e d d o
e i u s mo d t e mp o r i n c i d i d u n t u t l a b o r e e t d o l o r e ma g n a a l i q u a .
< / a s p : P a n e l >
< h 3 > < a h r e f = " # " > S e c t i o n 2 < / h 3 >
< a s p : P a n e l I D= " P a n e l 2 " r u n a t = " s e r v e r " >
Ut e n i m a d mi n i m v e n i a m, q u i s n o s t r u d e x e r c i t a t i o n u l l a mc o l a b o r i s
n i s i u t a l i q u i p e x e a c o mmo d o c o n s e q u a t .
< / a s p : P a n e l >
< h 3 > < a h r e f = " # " > S e c t i o n 3 < / h 3 >
< a s p : P a n e l I D= " P a n e l 3 " r u n a t = " s e r v e r " >
Du i s a u t e i r u r e d o l o r i n r e p r e h e n d e r i t i n v o l u p t a t e v e l i t e s s e
c i l l u m d o l o r e e u f u g i a t n u l l a p a r i a t u r .
< / a s p : P a n e l >
< h 3 > < a h r e f = " # " > S e c t i o n 4 < / h 3 >
< a s p : P a n e l I D= " P a n e l 4 " r u n a t = " s e r v e r " >
E x c e p t e u r s i n t o c c a e c a t c u p i d a t a t n o n p r o i d e n t , s u n t i n c u l p a q u i
o f f i c i a d e s e r u n t mo l l i t a n i m i d e s t l a b o r u m
< / a s p : P a n e l >
< / a s p : P a n e l >
3. Add some styling to the main content panel as required:
# c o n t e n t Ar e a
{
For More Information:www.PacktPub.com/asp-net-jquery-cookbook/book
http://www.packtpub.com/asp-net-jquery-cookbook/bookhttp://www.packtpub.com/asp-net-jquery-cookbook/bookhttp://www.packtpub.com/asp-net-jquery-cookbook/book8/3/2019 54181823 0461 Chapter 9 Creating Rich Content in ASP Net
10/37
Chapter 9
5
wi d t h : 3 0 0 p x ;
h e i g h t : 1 0 0 %;
}
Our accordion markup is now ready. We will now transform this markup into an accordion
control using the functionalities of jQuery UI.
How to do i t ...
1. In the d o c u me n t . r e a d y ( ) function of the jQuery script block, apply the
a c c o r d i o n ( ) method to the main content panel:
$ ( " # c o n t e n t Ar e a " ) . a c c o r d i o n ( ) ;
Thus, the complete jQuery UI solution for the problem at hand is as follows:
< s c r i p t l a n g u a g e = " j a v a s c r i p t " t y p e = " t e x t / j a v a s c r i p t " >
$ ( d o c u me n t ) . r e a d y ( f u n c t i o n ( ) {
$ ( " # c o n t e n t A r e a " ) . a c c o r d i o n ( ) ;
} ) ;
< / s c r i p t >
How i t w orks . ..
Run the web page. The accordion control is displayed as shown in the following screenshot:
For More Information:www.PacktPub.com/asp-net-jquery-cookbook/book
http://www.packtpub.com/asp-net-jquery-cookbook/bookhttp://www.packtpub.com/asp-net-jquery-cookbook/bookhttp://www.packtpub.com/asp-net-jquery-cookbook/book8/3/2019 54181823 0461 Chapter 9 Creating Rich Content in ASP Net
11/37
Creating Rich Content in ASP.NET
6
Click on the respective panel headers to display the required panels. Note that the accordion
control only displays the active panel at a time. The remaining panels are hidden from
the user.
There 's more
For detailed documentation on the jQuery UI accordion widget, please visit h t t p : / /
j q u e r y u i . c o m/ d e mo s / a c c o r d i o n / .
See also
Creating a tab control
Creat ing a tab c on t ro l
The jQuery UI tab widget helps to create tab controls quickly and easily on ASP.NET web
pages. The tab control helps in organizing content on a page thus improving the presentation
of bulky content. With the help of jQuery UI tab widget, the content can also be retrieved
dynamically using AJAX.
In this recipe, we will see a simple example of applying this powerful widget to ASP.NET forms.
Gett ing Ready
1. Create a new web form Re c i p e 2 . a s p x in the current project.
2. Add an ASP.NET container panel to the page.
3. Within this container panel, add subpanels corresponding to the tab contents. Also
add hyperlinks to each of the subpanels.
Thus the complete aspx markup of the web form is as shown next:
< f o r m i d = " f o r m1 " r u n a t = " s e r v e r " >
< a s p : p a n e l i d = " c o n t e n t A r e a " r u n a t = " s e r v e r " >
< u l >
< l i > < a h r e f = " # t a b 1 " > T a b 1 < / a > < / l i >
< l i > < a h r e f = " # t a b 2 " > T a b 2 < / a > < / l i >
< l i > < a h r e f = " # t a b 3 " > T a b 3 < / a > < / l i >
< l i > < a h r e f = " # t a b 4 " > T a b 4 < / a > < / l i >
< / u l >
For More Information:www.PacktPub.com/asp-net-jquery-cookbook/book
http://www.packtpub.com/asp-net-jquery-cookbook/bookhttp://www.packtpub.com/asp-net-jquery-cookbook/book8/3/2019 54181823 0461 Chapter 9 Creating Rich Content in ASP Net
12/37
Chapter 9
7
< a s p : p a n e l I D = " t a b 1 " r u n a t = " s e r v e r " >
< p > L o r e m i p s u m d o l o r s i t a me t , c o n s e c t e t u r a d i p i s i c i n g e l i t , s e d
d o e i u s mo d t e mp o r i n c i d i d u n t u t l a b o r e e t d o l o r e ma g n a a l i q u a . < / p >
< / a s p : p a n e l >
< a s p : p a n e l I D = " t a b 2 " r u n a t = " s e r v e r " >
< p > Ut e n i m a d mi n i m v e n i a m, q u i s n o s t r u d e x e r c i t a t i o n u l l a mc o
l a b o r i s n i s i u t a l i q u i p e x e a c o mmo d o c o n s e q u a t . < / p >
< / a s p : p a n e l >
< a s p : p a n e l I D = " t a b 3 " r u n a t = " s e r v e r " >
< p > Du i s a u t e i r u r e d o l o r i n r e p r e h e n d e r i t i n v o l u p t a t e v e l i t
e s s e c i l l u m d o l o r e e u f u g i a t n u l l a p a r i a t u r . < / p >
< / a s p : p a n e l >
< a s p : p a n e l I D = " t a b 4 " r u n a t = " s e r v e r " >
< p > E x c e p t e u r s i n t o c c a e c a t c u p i d a t a t n o n p r o i d e n t , s u n t i n c u l p a
q u i o f f i c i a d e s e r u n t mo l l i t a n i m i d e s t l a b o r u m< / p >
< / a s p : p a n e l >
< / a s p : p a n e l >
< / f o r m >
Next, we will see how we can transform this markup into a tab control using jQuery UI.
How to do i t ...
1. In the d o c u me n t . r e a d y ( ) function of the jQuery script block, apply the t a b s ( )
method to the container panel as follows:
$ ( " # c o n t e n t Ar e a " ) . t a b s ( ) ;
Thus, the complete jQuery UI solution for creating the tab control is as follows:
< s c r i p t l a n g u a g e = " j a v a s c r i p t " t y p e = " t e x t / j a v a s c r i p t " >
$ ( d o c u me n t ) . r e a d y ( f u n c t i o n ( ) {
$ ( " # c o n t e n t Ar e a " ) . t a b s ( ) ;
} ) ;
< / s c r i p t >
For More Information:www.PacktPub.com/asp-net-jquery-cookbook/book
http://www.packtpub.com/asp-net-jquery-cookbook/bookhttp://www.packtpub.com/asp-net-jquery-cookbook/bookhttp://www.packtpub.com/asp-net-jquery-cookbook/book8/3/2019 54181823 0461 Chapter 9 Creating Rich Content in ASP Net
13/37
Creating Rich Content in ASP.NET
8
How i t w orks . ..
Run the web form. The page displays the tabbed content as follows:
Click on the respective tab headers to view the required content.
There 's more
For detailed documentation on the jQuery UI tabs widget, please visit
h t t p : / / j q u e r y u i . c o m/ d e mo s / t a b s / .
See also
Creating an accordion control
For More Information:www.PacktPub.com/asp-net-jquery-cookbook/book
http://www.packtpub.com/asp-net-jquery-cookbook/bookhttp://www.packtpub.com/asp-net-jquery-cookbook/book8/3/2019 54181823 0461 Chapter 9 Creating Rich Content in ASP Net
14/37
Chapter 9
9
Creat ing d raggab le c on t ro ls
With the help of jQuery UI, web controls can be enhanced and interactive properties such as
draggable, droppable, resizable, sortable, and selectable can be added. In this recipe, let's
create some draggable ASP.NET panels on the web form.
Gett ing Ready
1. Create a new web form Re c i p e 3 . a s p x in the current project.
2. Add a container div area on the web form as follows:
< d i v a l i g n = " c e n t e r " i d = " c o n t e n t Ar e a " >
< / d i v >
Add the following css style to the above div area:
# c o n t e n t A r e a
{
wi d t h : 3 0 0 p x ;
h e i g h t : 1 0 0 %;
}
3. Within the container div area, add few panel controls. Create the following css class
for these panel controls:
. p a n e l
{
b o r d e r : 1 p x s o l i d ;
b o r d e r - c o l o r : Gr a y ;
wi d t h : 2 0 0 p x ;h e i g h t : 1 0 0 p x ;
p a d d i n g : 5 p x ;
}
4. Apply the above class to the panels, so that the complete aspx markup of the form is
as shown next:
< f o r m i d = " f o r m1 " r u n a t = " s e r v e r " >
< d i v a l i g n = " c e n t e r " i d = " c o n t e n t Ar e a " >
< a s p : P a n e l I D= " P a n e l 1 " r u n a t = " s e r v e r " C s s C l a s s = " p a n e l " >
L o r e m i p s u m d o l o r s i t a me t , c o n s e c t e t u r a d i p i s i c i n g
e l i t , s e d d o e i u s mo d t e mp o r i n c i d i d u n t u t l a b o r e e t d o l o r e ma g n a
a l i q u a .
< / a s p : P a n e l >
< a s p : P a n e l I D= " P a n e l 2 " r u n a t = " s e r v e r " C s s C l a s s = " p a n e l " >
Ut e n i m a d mi n i m v e n i a m, q u i s n o s t r u d e x e r c i t a t i o n u l l a mc o
l a b o r i s n i s i u t a l i q u i p e x e a c o mmo d o c o n s e q u a t .
For More Information:www.PacktPub.com/asp-net-jquery-cookbook/book
http://www.packtpub.com/asp-net-jquery-cookbook/bookhttp://www.packtpub.com/asp-net-jquery-cookbook/book8/3/2019 54181823 0461 Chapter 9 Creating Rich Content in ASP Net
15/37
Creating Rich Content in ASP.NET
10
< / a s p : P a n e l >
< a s p : P a n e l I D= " P a n e l 3 " r u n a t = " s e r v e r " C s s C l a s s = " p a n e l " >
Du i s a u t e i r u r e d o l o r i n r e p r e h e n d e r i t i n v o l u p t a t e v e l i t
e s s e c i l l u m d o l o r e e u f u g i a t n u l l a p a r i a t u r .
< / a s p : P a n e l >
< a s p : P a n e l I D= " P a n e l 4 " r u n a t = " s e r v e r " C s s C l a s s = " p a n e l " >
E x c e p t e u r s i n t o c c a e c a t c u p i d a t a t n o n p r o i d e n t ,
s u n t i n c u l p a q u i o f f i c i a d e s e r u n t mo l l i t a n i m i d e s t l a b o r u m
< / a s p : P a n e l >
< / d i v >
< / f o r m>
5. The page will display the panels as captured in the following screenshot:
For More Information:www.PacktPub.com/asp-net-jquery-cookbook/book
http://www.packtpub.com/asp-net-jquery-cookbook/bookhttp://www.packtpub.com/asp-net-jquery-cookbook/bookhttp://www.packtpub.com/asp-net-jquery-cookbook/book8/3/2019 54181823 0461 Chapter 9 Creating Rich Content in ASP Net
16/37
Chapter 9
11
We will now add jQuery UI's draggable feature to these panels so that they can be dragged
anywhere on the page on the mousedown event.
How to do i t ...
1. In the d o c u me n t . r e a d y ( ) function of the jQuery script block, apply the
d r a g g a b l e ( ) method to the panel controls. Use the css selector $ ( " . p a n e l " ) to
retrieve all the panel controls on the page:
$ ( " . p a n e l " ) . d r a g g a b l e ( ) ;
T h u s , t h e c o mp l e t e j Qu e r y s o l u t i o n i s a s f o l l o ws :
< s c r i p t l a n g u a g e = " j a v a s c r i p t " t y p e = " t e x t / j a v a s c r i p t " >
$ ( d o c u me n t ) . r e a d y ( f u n c t i o n ( ) {
$ ( " . p a n e l " ) . d r a g g a b l e ( ) ;
} ) ;
< / s c r i p t >
How i t w orks . ..
Run the web form. Now click on any panel and drag on the screen. You will notice that the
panels can be dragged and dropped as required, as shown in the following screenshot:
For More Information:www.PacktPub.com/asp-net-jquery-cookbook/book
http://www.packtpub.com/asp-net-jquery-cookbook/bookhttp://www.packtpub.com/asp-net-jquery-cookbook/bookhttp://www.packtpub.com/asp-net-jquery-cookbook/book8/3/2019 54181823 0461 Chapter 9 Creating Rich Content in ASP Net
17/37
Creating Rich Content in ASP.NET
12
There 's more
For detailed documentation on the jQuery UI draggable feature, please visit
h t t p : / / j q u e r y u i . c o m/ d e mo s / d r a g g a b l e / .
See also
Adding tooltips to controls
Creat ing d ia log boxes
Dialog boxes are an important mode of interaction with the end user. They are used to deliver
information, error, warning, or conrmation messages to the end user.
jQuery UI provides a dialog widget as an alternative to the traditional JavaScript pop-up
windows. In this recipe, let's see how to use jQuery UI dialog widget to display a basic
conrmation dialog box.
Gett ing Ready
1. Create a new web form Re c i p e 4 . a s p x in the current project.
2. Add an ASP.NET panel on the form with the required conrmation message as follows:
< a s p : P a n e l I D= " d i a l o g b o x " T o o l T i p = " Co n f i r ma t i o n " r u n a t = " s e r v e r " >
Ar e y o u s u r e y o u wa n t t o c o n t i n u e ?
< / a s p : P a n e l >
At runtime, the ASP.NET panel control is rendered as a div element
and the T o o l T i p property is rendered as t i t l e property of the div
element. Hence, we can use the T o o l T i p property to set the title of
the dialog box as done in the code snippet mentioned earlier.
3. Add a button control to the form to trigger the dialog box on the c l i c k event.
Thus, the complete aspx markup of the web form is as follows:
< f o r m i d = " f o r m1 " r u n a t = " s e r v e r " >
< d i v a l i g n = " c e n t e r " >
< a s p : P a n e l I D= " d i a l o g b o x " T o o l T i p = " C o n f i r ma t i o n "
r u n a t = " s e r v e r " >
Ar e y o u s u r e y o u wa n t t o c o n t i n u e ?
< / a s p : P a n e l >
For More Information:www.PacktPub.com/asp-net-jquery-cookbook/book
http://www.packtpub.com/asp-net-jquery-cookbook/bookhttp://www.packtpub.com/asp-net-jquery-cookbook/book8/3/2019 54181823 0461 Chapter 9 Creating Rich Content in ASP Net
18/37
Chapter 9
13
< a s p : Bu t t o n I D= " b t n Op e n " r u n a t = " s e r v e r " T e x t = " C l i c k t o o p e n t h e
d i a l o g b o x " / >
< / d i v >
< / f o r m>
Thus, on page load, the page will display as shown in the following screenshot:
Now, let's use jQuery UI to set the properties of the dialog box.
How to do i t ...
1. In the d o c u me n t . r e a d y ( ) function of the jQuery script block, apply the d i a l o g ( )
method on the panel control:
$ ( " # d i a l o g b o x " ) . d i a l o g ( {
For More Information:www.PacktPub.com/asp-net-jquery-cookbook/book
http://www.packtpub.com/asp-net-jquery-cookbook/bookhttp://www.packtpub.com/asp-net-jquery-cookbook/bookhttp://www.packtpub.com/asp-net-jquery-cookbook/book8/3/2019 54181823 0461 Chapter 9 Creating Rich Content in ASP Net
19/37
Creating Rich Content in ASP.NET
14
2. Set the a u t o Op e n property to f a l s e , so that the dialog box is hidden until the
d i a l o g ( " o p e n " ) method is called:
a u t o Op e n : f a l s e ,
3. Set the m o d a l property to t r u e , so that the web form is disabled as long as the
dialog box is open:
mo d a l : t r u e ,
4. Set the r e s i z a b l e property to f a l s e , so that the dialog window cannot be resized
at runtime:
r e s i z a b l e : f a l s e ,
5. Set the b u t t o n s property to an array containingOK and C a n c e l buttons. Also
dene the desired action on the click event of the respective buttons. For the
purpose of this demo, we have dened . d i a l o g ( " C l o s e " ) as the custom action
for both the buttons:
b u t t o n s : {
" OK" : f u n c t i o n ( ) {
$ ( t h i s ) . d i a l o g ( " c l o s e " ) ;
} ,
" Ca n c e l " : f u n c t i o n ( ) {
$ ( t h i s ) . d i a l o g ( " c l o s e " ) ;
}
}
} ) ;
6. Dene an event handler for the c l i c k event of the b t n Op e n button control:
$ ( " # b t n Op e n " ) . c l i c k ( f u n c t i o n ( ) {
7. Open the dialog box:
$ ( " # d i a l o g b o x " ) . d i a l o g ( " o p e n " ) ;
8. Return f a l s e so that the dialog box remains active on the page until further
user action:
r e t u r n f a l s e ;
} ) ;
For More Information:www.PacktPub.com/asp-net-jquery-cookbook/book
http://www.packtpub.com/asp-net-jquery-cookbook/bookhttp://www.packtpub.com/asp-net-jquery-cookbook/bookhttp://www.packtpub.com/asp-net-jquery-cookbook/book8/3/2019 54181823 0461 Chapter 9 Creating Rich Content in ASP Net
20/37
Chapter 9
15
Thus, the complete jQuery solution is as follows:
< s c r i p t l a n g u a g e = " j a v a s c r i p t " t y p e = " t e x t / j a v a s c r i p t " >
$ ( d o c u me n t ) . r e a d y ( f u n c t i o n ( ) {$ ( " # d i a l o g b o x " ) . d i a l o g ( {
a u t o Op e n : f a l s e ,
mo d a l : t r u e ,
r e s i z a b l e : f a l s e ,
b u t t o n s : {
" OK" : f u n c t i o n ( ) {
$ ( t h i s ) . d i a l o g ( " c l o s e " ) ;
} ,
" Ca n c e l " : f u n c t i o n ( ) {
$ ( t h i s ) . d i a l o g ( " c l o s e " ) ;
}
}
} ) ;
$ ( " # b t n Op e n " ) . c l i c k ( f u n c t i o n ( ) {
$ ( " # d i a l o g b o x " ) . d i a l o g ( " o p e n " ) ;
r e t u r n f a l s e ;
} ) ;
} ) ;
< / s c r i p t >
Note that, at runtime, the dialog box is rendered
as the following div element:
Are you sure you want to continue?
For More Information:www.PacktPub.com/asp-net-jquery-cookbook/book
http://www.packtpub.com/asp-net-jquery-cookbook/bookhttp://www.packtpub.com/asp-net-jquery-cookbook/book8/3/2019 54181823 0461 Chapter 9 Creating Rich Content in ASP Net
21/37
Creating Rich Content in ASP.NET
16
How i t w orks . ..
Run the web form. Click on the button to launch the conrmation box as follows:
On clicking either of the OK or Cancel buttons, the dialog box disappears and the page is
enabled again. Note that the dialog box can also be dragged on the page as required.
There 's more
For detailed documentation on the jQuery UI dialog widget, please visit
h t t p : / / j q u e r y u i . c o m/ d e mo s / d i a l o g /.
For More Information:www.PacktPub.com/asp-net-jquery-cookbook/book
http://www.packtpub.com/asp-net-jquery-cookbook/bookhttp://www.packtpub.com/asp-net-jquery-cookbook/book8/3/2019 54181823 0461 Chapter 9 Creating Rich Content in ASP Net
22/37
Chapter 9
17
See also
Using the progress bar control
Using the da tep icker con t ro l
The datepicker is a popular control for date elds in online submission forms. In this recipe,
let's see how to use the jQuery UI to attach a datepicker to an ASP.NET TextBox control.
Gett ing Ready
1. Create a new web form Re c i p e 5 . a s p x in the current project.
2. Add controls to create a simple search form that accepts an input date eld
as follows:< f o r m i d = " f o r m1 " r u n a t = " s e r v e r " >
< d i v a l i g n = " c e n t e r " >
< a s p : L a b e l I D= " l b l D a t e " r u n a t = " s e r v e r " > S e a r c h b y
r e g i s t r a t i o n d a t e : < / a s p : L a b e l >
< a s p : T e x t B o x I D= " t x t Da t e " r u n a t = " s e r v e r " > < / a s p : T e x t Bo x >
< a s p : Bu t t o n I D= " b t n S u b mi t " T e x t = " S e a r c h " r u n a t = " s e r v e r " / >
< / d i v >
< / f o r m>
Thus, on page load, the web form appears as shown in the following screenshot:
For More Information:www.PacktPub.com/asp-net-jquery-cookbook/book
http://www.packtpub.com/asp-net-jquery-cookbook/bookhttp://www.packtpub.com/asp-net-jquery-cookbook/bookhttp://www.packtpub.com/asp-net-jquery-cookbook/book8/3/2019 54181823 0461 Chapter 9 Creating Rich Content in ASP Net
23/37
Creating Rich Content in ASP.NET
18
We will now use jQuery UI to attach a datepicker to the TextBox control.
How to do i t ...
f In the d o c u me n t . r e a d y ( ) function of the jQuery script block, apply the
d a t e p i c k e r ( ) method to the TextBox control:
$ ( " # t x t D a t e " ) . d a t e p i c k e r ( ) ;
Thus, the complete jQuery solution for the given problem is as follows:
< s c r i p t l a n g u a g e = " j a v a s c r i p t " t y p e = " t e x t / j a v a s c r i p t " >
$ ( d o c u me n t ) . r e a d y ( f u n c t i o n ( ) {
$ ( " # t x t D a t e " ) . d a t e p i c k e r ( ) ;
} ) ;
< / s c r i p t >
How i t w orks . ..
Run the web form. On mouseclick on the TextBox control, the datepicker is displayed as shown
in the following screenshot:
The desired date can be picked from the displayed calendar as required.
For More Information:www.PacktPub.com/asp-net-jquery-cookbook/book
http://www.packtpub.com/asp-net-jquery-cookbook/bookhttp://www.packtpub.com/asp-net-jquery-cookbook/bookhttp://www.packtpub.com/asp-net-jquery-cookbook/book8/3/2019 54181823 0461 Chapter 9 Creating Rich Content in ASP Net
24/37
Chapter 9
19
There 's more
For detailed documentation on the jQuery UI datepicker widget, please visit
h t t p : / / j q u e r y u i . c o m/ d e mo s / d a t e p i c k e r / .
See also
Creating dialog boxes
Using the p rogress bar con t ro l
jQuery UI provides a Progressbar widget to show the processing status during a wait time in an
application. In this recipe, we will learn to create a Progressbar in ASP.NET.
Gett ing Ready
1. Include an animated gif le p b a r - a n i . g i f in the images folder in the project.
2. Add a new web form Re c i p e 6 . a s p x to the current project.
3. Add an ASP.NET panel control for the progressbar as follows:
< a s p : P a n e l i d = " p r o g r e s s b a r " r u n a t = " s e r v e r " > < / a s p : P a n e l >
4. Dene some basic css style for the above as follows:
# p r o g r e s s b a r
{
wi d t h : 3 0 0 p x ;h e i g h t : 2 2 p x ;
}
5. The jQuery UI progressbar uses the jQuery UI CSS Framework for styling. Hence, to
set the background of the progressbar to the animated g i f le, add the following css
style:
. u i - p r o g r e s s b a r - v a l u e { b a c k g r o u n d - i ma g e : u r l ( i ma g e s / p b a r - a n i .
g i f ) ; }
6. Create another content panel that is initially hidden and displayed only after the
progressbar loads completely.
< a s p : P a n e l i d = " c o n t e n t A r e a " r u n a t = " s e r v e r " > P a g e s u c c e s s f u l l y
l o a d e d < / a s p : P a n e l >
For More Information:www.PacktPub.com/asp-net-jquery-cookbook/book
http://www.packtpub.com/asp-net-jquery-cookbook/bookhttp://www.packtpub.com/asp-net-jquery-cookbook/book8/3/2019 54181823 0461 Chapter 9 Creating Rich Content in ASP Net
25/37
Creating Rich Content in ASP.NET
20
7. We will use the following css class to hide this panel,
. h i d e
{
d i s p l a y : n o n e ;
}
Thus, the complete aspx markup of the form is as follows:
< f o r m i d = " f o r m1 " r u n a t = " s e r v e r " >
< d i v a l i g n = " c e n t e r " >
< a s p : P a n e l i d = " p r o g r e s s b a r " r u n a t = " s e r v e r " > < / a s p : P a n e l >
< a s p : P a n e l i d = " c o n t e n t A r e a " r u n a t = " s e r v e r " > P a g e s u c c e s s f u l l y
l o a d e d < / a s p : P a n e l >
< / d i v >
< / f o r m>
Now, we will look at the jQuery solution for applying the Progressbar widget to the
ASP.NET panel.
How to do i t ...
1. In the d o c u me n t . r e a d y ( ) function of the jQuery script block, hide the
display message:
$ ( " # c o n t e n t Ar e a " ) . a d d Cl a s s ( " h i d e " ) ;
2. Initialise a counter:
v a r c n t = 0 ;
3. Dene the maximum value of the counter:
v a r ma x C n t = 1 0 0 ;
4. Use the JavaScript timer function s e t I n t e r v a l ( ) to dene the timeout interval and
the callback function after each interval:
v a r i d = s e t I n t e r v a l ( s h o wp r o g r e s s , 1 0 ) ;
5. Now, dene the previous callback function:
f u n c t i o n s h o wp r o g r e s s ( ) {
6. Check if the current value of the counter is less than or equal to the maximum
allowable value:
i f ( c n t < = ma x Cn t ) {
7. If yes, then apply the p r o g r e s s b a r ( ) function with the current counter value:$ ( " # p r o g r e s s b a r " ) . p r o g r e s s b a r ( {
v a l u e : c n t
} ) ;
For More Information:www.PacktPub.com/asp-net-jquery-cookbook/book
http://www.packtpub.com/asp-net-jquery-cookbook/bookhttp://www.packtpub.com/asp-net-jquery-cookbook/bookhttp://www.packtpub.com/asp-net-jquery-cookbook/book8/3/2019 54181823 0461 Chapter 9 Creating Rich Content in ASP Net
26/37
Chapter 9
21
8. Increment the counter:
c n t + + ;
}
9. If the current value of the counter is greater than the maximum value, clear the timer
using the respective ID:
e l s e {
c l e a r I n t e r v a l ( i d ) ;
10. Show the display message:
$ ( " # c o n t e n t Ar e a " ) . r e mo v e Cl a s s ( " h i d e " ) ;
11. Hide the progress bar:
$ ( " # p r o g r e s s b a r " ) . a d d Cl a s s ( " h i d e " ) ;
}
}
Thus, the complete jQuery solution is a follows:
< s c r i p t l a n g u a g e = " j a v a s c r i p t " t y p e = " t e x t / j a v a s c r i p t " >
$ ( d o c u me n t ) . r e a d y ( f u n c t i o n ( ) {
$ ( " # c o n t e n t Ar e a " ) . a d d Cl a s s ( " h i d e " ) ;
v a r c n t = 0 ;
v a r ma x C n t = 1 0 0 ;
v a r i d = s e t I n t e r v a l ( s h o wp r o g r e s s , 1 0 ) ;
f u n c t i o n s h o wp r o g r e s s ( ) {
i f ( c n t < = ma x Cn t ) {$ ( " # p r o g r e s s b a r " ) . p r o g r e s s b a r ( {
v a l u e : c n t
} ) ;
c n t + + ;
}
e l s e {
c l e a r I n t e r v a l ( i d ) ;
$ ( " # c o n t e n t A r e a " ) . r e mo v e Cl a s s ( " h i d e " ) ;
$ ( " # p r o g r e s s b a r " ) . a d d Cl a s s ( " h i d e " ) ;
}
}
} ) ;
< / s c r i p t >
For More Information:www.PacktPub.com/asp-net-jquery-cookbook/book
http://www.packtpub.com/asp-net-jquery-cookbook/bookhttp://www.packtpub.com/asp-net-jquery-cookbook/bookhttp://www.packtpub.com/asp-net-jquery-cookbook/book8/3/2019 54181823 0461 Chapter 9 Creating Rich Content in ASP Net
27/37
Creating Rich Content in ASP.NET
22
In this solution, we have used the JavaScript timer s e t I n t e r v a l ( c u s t o mF u n c t i o n ,
t i me o u t ) to call a custom function after the timeout (in milliseconds). Important points to
note are:
f The setInterval method returns a numeric number, i d to track the timeout. This ID
can be later used to clear the timer.
f The timer calls the custom function s h o wp r o g r e s s ( ) repeatedly after every timeout
interval until the c l e a r I n t e r v a l ( i d ) is called.
f After every timeout, we will increment the variable c n t by 1 and apply it to the
progressbar.
f When c n t reaches ma x Cn t , the progressbar loads completely.
How i t w orks . ..
Run the web form. You will see that the progressbar loads in steps, as shown in thefollowing screenshot:
For More Information:www.PacktPub.com/asp-net-jquery-cookbook/book
http://www.packtpub.com/asp-net-jquery-cookbook/bookhttp://www.packtpub.com/asp-net-jquery-cookbook/book8/3/2019 54181823 0461 Chapter 9 Creating Rich Content in ASP Net
28/37
Chapter 9
23
After the load is complete, the progressbar is hidden and the content panel is displayed
instead, as follows:
There 's more
For detailed documentation on the jQuery UI progressbar widget, please visit
h t t p : / / j q u e r y u i . c o m/ d e mo s / p r o g r e s s b a r / .
See also
Using the slider control
Using the s l ider con t ro l
The slider control is useful in various applications requiring user interaction such as volume
control, color pickers, etc. In this recipe, we will apply the jQuery UI slider widget to create ascrollable div.
For More Information:www.PacktPub.com/asp-net-jquery-cookbook/book
http://www.packtpub.com/asp-net-jquery-cookbook/bookhttp://www.packtpub.com/asp-net-jquery-cookbook/book8/3/2019 54181823 0461 Chapter 9 Creating Rich Content in ASP Net
29/37
Creating Rich Content in ASP.NET
24
Gett ing Ready
1. Create a new web form Re c i p e 7 . a s p x in the current project.2. Create nested div areas on the page as follows:
< d i v i d = " o u t e r Co n t e n t " >
< d i v i d = " i n n e r Co n t e n t " >
< / d i v >
< / d i v >
3. Since we want to scroll the inner content area, we will set the width of the
i n n e r Co n t e n t to be longer than that of the o u t e r Co n t e n t . Hence, defne the
following styles on the respective div areas:
# o u t e r Co n t e n t
{
wi d t h : 3 0 0 p x ;
h e i g h t : 1 0 0 p x ;o v e r f l o w: h i d d e n ;
b o r d e r : 1 p x s o l i d ;
}
# i n n e r C o n t e n t
{
wi d t h : 5 0 0 p x ;
p o s i t i o n : r e l a t i v e ;
l e f t : 5 p x ;
o v e r f l o w: a u t o ;
}
4. Now create a div element to which we can apply the slider as follows:
< d i v i d = " s l i d e r " > < / d i v >
Thus, the complete aspx markup of the web form is as follows:
< f o r m i d = " f o r m1 " r u n a t = " s e r v e r " >
< d i v a l i g n = " c e n t e r " >
< d i v i d = " s l i d e r " > < / d i v >
< d i v i d = " o u t e r Co n t e n t " >
< d i v i d = " i n n e r C o n t e n t " >
L o r e m i p s u m d o l o r s i t a me t , c o n s e c t e t u r a d i p i s i c i n g e l i t ,
s e d d o e i u s mo d t e mp o r i n c i d i d u n t u t l a b o r e e t d o l o r e ma g n a a l i q u a .
Ut e n i m a d mi n i m v e n i a m, q u i s n o s t r u d e x e r c i t a t i o n u l l a mc o l a b o r i s
n i s i u t a l i q u i p e x e a c o mmo d o c o n s e q u a t . Du i s a u t e i r u r e d o l o r i n
r e p r e h e n d e r i t i n v o l u p t a t e v e l i t e s s e c i l l u m d o l o r e e u f u g i a t n u l l a
p a r i a t u r . E x c e p t e u r s i n t o c c a e c a t c u p i d a t a t n o n p r o i d e n t , s u n t i n
c u l p a q u i o f f i c i a d e s e r u n t mo l l i t a n i m i d e s t l a b o r u m< / d i v >
< / d i v >
< / d i v >
< / f o r m>
For More Information:www.PacktPub.com/asp-net-jquery-cookbook/book
http://www.packtpub.com/asp-net-jquery-cookbook/bookhttp://www.packtpub.com/asp-net-jquery-cookbook/book8/3/2019 54181823 0461 Chapter 9 Creating Rich Content in ASP Net
30/37
Chapter 9
25
Let's take a look at the adopted approach for scrolling the inner div based on the position of
the slider:
1. First determine the amount of scrollable area available:
S c r o l l a b l e Ar e a = ( Wi d t h o f I n n e r Di v ) ( Wi d t h o f O u t e r Di v )
2. Now, apply the Slider value to this Scrollable area to get the left scroll position:
L e f t S c r o l l P o s i t i o n = ( S l i d e r Va l u e * S c r o l l a b l e Ar e a ) / 1 0 0
Since, the slider value is a percentage, in the above formula we divide by 100.
3. Now, set the scrollLeft property of the outer div to the above value to scroll the inner
div as per the slider.
Next, let's use jQuery UI to implement the slider using the earlier mentioned approach.
How to do i t ...
1. In the d o c u me n t . r e a d y ( ) function of the jQuery script block, apply the s l i d e r ( )
function on the slider panel:
$ ( " # s l i d e r " ) . s l i d e r ( {
2. Dene the minimum value of the slider:
mi n : 0 ,
3. Dene the maximum value of the slider:
ma x : 1 0 0 ,
4. Set a n i ma t e to t r u e to slide smoothly on mouse click:
a n i ma t e : t r u e ,
5. Dene the callback function on the slide event. This event is triggered on every
mouse move during the slide:
s l i d e : f u n c t i o n ( e , u i ) {
6. As explained earlier, get the scrollable width as follows:
v a r i S c r o l l Wi d t h = $ ( " # i n n e r C o n t e n t " ) . wi d t h ( ) -
$ ( " # o u t e r C o n t e n t " ) . wi d t h ( ) ;
7. Set the scrollLeft property by computing the left scroll position:
$ ( " # o u t e r Co n t e n t " ) . a t t r ( { s c r o l l L e f t : ( u i . v a l u e * 0 . 0 1 *
i S c r o l l Wi d t h ) } ) ;
} ,
For More Information:www.PacktPub.com/asp-net-jquery-cookbook/book
http://www.packtpub.com/asp-net-jquery-cookbook/bookhttp://www.packtpub.com/asp-net-jquery-cookbook/bookhttp://www.packtpub.com/asp-net-jquery-cookbook/book8/3/2019 54181823 0461 Chapter 9 Creating Rich Content in ASP Net
31/37
Creating Rich Content in ASP.NET
26
8. Dene the callback function on the change event. This event is triggered on slide stop
or if the value is changed programmatically:
c h a n g e : f u n c t i o n ( e , u i ) {
9. Similar to the slide event, calculate the scrollable width:
v a r i S c r o l l Wi d t h = $ ( " # i n n e r C o n t e n t " ) . wi d t h ( ) -
$ ( " # o u t e r C o n t e n t " ) . wi d t h ( ) ;
10. Animate the scrollLeft property of the outer panel:
$ ( " # o u t e r C o n t e n t " ) . a n i ma t e ( { s c r o l l L e f t : ( u i . v a l u e * 0 . 0 1 *
i S c r o l l Wi d t h ) } , " s l o w" ) ;
}
} ) ;
Thus, the complete jQuery UI solution for the given problem is as follows:
< s c r i p t l a n g u a g e = " j a v a s c r i p t " t y p e = " t e x t / j a v a s c r i p t " >$ ( d o c u me n t ) . r e a d y ( f u n c t i o n ( ) {
$ ( " # s l i d e r " ) . s l i d e r ( {
mi n : 0 ,
ma x : 1 0 0 ,
a n i ma t e : t r u e ,
s l i d e : f u n c t i o n ( e , u i ) {
v a r i S c r o l l Wi d t h = $ ( " # i n n e r C o n t e n t " ) . wi d t h ( ) -
$ ( " # o u t e r C o n t e n t " ) . wi d t h ( ) ;
$ ( " # o u t e r C o n t e n t " ) . a t t r ( { s c r o l l L e f t : ( u i . v a l u e *
0 . 0 1 * i S c r o l l Wi d t h ) } ) ;
} ,
c h a n g e : f u n c t i o n ( e , u i ) {
v a r i S c r o l l Wi d t h = $ ( " # i n n e r C o n t e n t " ) . wi d t h ( ) -
$ ( " # o u t e r C o n t e n t " ) . wi d t h ( ) ;
$ ( " # o u t e r C o n t e n t " ) . a n i ma t e ( { s c r o l l L e f t : ( u i . v a l u e
* 0 . 0 1 * i S c r o l l Wi d t h ) } , " s l o w" ) ;
}
} ) ;
} ) ;
< / s c r i p t >
For More Information:www.PacktPub.com/asp-net-jquery-cookbook/book
http://www.packtpub.com/asp-net-jquery-cookbook/bookhttp://www.packtpub.com/asp-net-jquery-cookbook/bookhttp://www.packtpub.com/asp-net-jquery-cookbook/book8/3/2019 54181823 0461 Chapter 9 Creating Rich Content in ASP Net
32/37
Chapter 9
27
How i t w orks . ..
Run the page. Drag the slider handle to display the scrolling content as shown next:
There 's more
For detailed documentation on the jQuery UI slider widget, please visit
h t t p : / / j q u e r y u i . c o m/ d e mo s / s l i d e r / .
See also
Using the progressbar control
Add ing too l t ips t o con t ro ls
jQuery UI version 1.8 does not have inbuilt support for tooltips. The widget will only be
released as part of jQuery UI version 1.9.
In this recipe, we will explore an alternative tooltip plugin for creating tooltips in
ASP.NET pages.
For More Information:www.PacktPub.com/asp-net-jquery-cookbook/book
http://www.packtpub.com/asp-net-jquery-cookbook/bookhttp://www.packtpub.com/asp-net-jquery-cookbook/bookhttp://www.packtpub.com/asp-net-jquery-cookbook/book8/3/2019 54181823 0461 Chapter 9 Creating Rich Content in ASP Net
33/37
Creating Rich Content in ASP.NET
28
Gett ing Ready
1. Create a new web form Re c i p e 8 . a s p x in the current project.2. Download the jQuery tooltip plugin from h t t p : / / b a s s i s t a n c e . d e / j q u e r y -
p l u g i n s / j q u e r y - p l u g i n - t o o l t i p / .
3. Save the above plugin le in the script folder j s in the project.
4. On the web form, include the stylesheet as well as the plugin as follows:
< l i n k h r e f = " c s s / j q u e r y . t o o l t i p . c s s " r e l = " s t y l e s h e e t " t y p e = " t e x t /
c s s " / >
< s c r i p t s r c = " j s / j q u e r y - 1 . 4 . 1 . j s " t y p e = " t e x t / j a v a s c r i p t " > < /
s c r i p t >
< s c r i p t s r c = " j s / j q u e r y . t o o l t i p . j s " t y p e = " t e x t / j a v a s c r i p t " > < /
s c r i p t >
5. Add a simple login form to the page.6. Add s p a n areas containing the tooltip text as follows:
< s p a n c l a s s = " t o o l t i p " t i t l e = " P l e a s e u s e y o u r r e g i s t e r e d e ma i l
a d d r e s s " > ? < / s p a n >
< s p a n c l a s s = " t o o l t i p " t i t l e = " P l e a s e e n t e r y o u r p i n n u mb e r
h e r e " > ? < / s p a n >
where, the t o o l t i p css class is dened as follows:
. t o o l t i p
{
b o r d e r : 1 p x s o l i d ;
b a c k g r o u n d - c o l o r : S i l v e r ;c u r s o r : p o i n t e r ;
wi d t h : 1 5 p x ;
}
Thus, the complete aspx markup of the page is as follows:
< f o r m i d = " f o r m1 " r u n a t = " s e r v e r " >
< d i v a l i g n = " c e n t e r " i d =" c o n t e n t Ar e a " >
< f i e l d s e t s t y l e = " wi d t h : 3 5 0 p x ; h e i g h t : 1 4 0 p x ; " >
< t a b l e b o r d e r = " 0 " c e l l p a d d i n g = " 3 " c e l l s p a c i n g = " 3 " >
< t r > < t d c o l s p a n = " 2 " c l a s s = " h e a d e r " > L OGI N US ERS < / t d > < / t r >
< t r >
< t d a l i g n = " r i g h t " >
< a s p : L a b e l I D= " l b l Us e r Na me " r u n a t = " s e r v e r "
T e x t = " Us e r Na me : " > < / a s p : L a b e l >
< / t d >
< t d a l i g n = " l e f t " >
For More Information:www.PacktPub.com/asp-net-jquery-cookbook/book
http://www.packtpub.com/asp-net-jquery-cookbook/bookhttp://www.packtpub.com/asp-net-jquery-cookbook/book8/3/2019 54181823 0461 Chapter 9 Creating Rich Content in ASP Net
34/37
Chapter 9
29
< a s p : T e x t Bo x I D = " t x t Us e r Na me " r u n a t = " s e r v e r " > < /
a s p : T e x t Bo x >
< s p a n c l a s s = " t o o l t i p " t i t l e = " P l e a s e u s e y o u r
r e g i s t e r e d e ma i l a d d r e s s " > &n b s p ; ? &n b s p ; < / s p a n >< / t d >
< / t r >
< t r >
< t d a l i g n = " r i g h t " >
< a s p : L a b e l I D= " l b l P a s s wo r d " r u n a t = " s e r v e r "
T e x t = " P a s s wo r d : " > < / a s p : L a b e l >
< / t d >
< t d a l i g n = " l e f t " >
< a s p : T e x t Bo x I D = " t x t P a s s wo r d " r u n a t = " s e r v e r "
T e x t Mo d e = " P a s s wo r d " > < / a s p : T e x t Bo x >
< s p a n c l a s s = " t o o l t i p " t i t l e = " P l e a s e e n t e r y o u r p i n
n u mb e r h e r e " > &n b s p ; ? &n b s p ; < / s p a n >
< / t d >
< / t r >< t r >
< t d a l i g n = " c e n t e r " c o l s p a n = " 2 " >
< a s p : Bu t t o n I D= " b t n S u b mi t " r u n a t = " s e r v e r "
T e x t = " S u b mi t " / > &n b s p ;
< a s p : Bu t t o n I D= " b t n Re s e t " r u n a t = " s e r v e r "
T e x t = " R e s e t " / >
< / t d >
< / t r >
< / t a b l e >
< / f i e l d s e t >
< / d i v >
< / f o r m>
On page load, the web form appears as displayed in the following screenshot:
Let's see how to use the tooltip plugin for displaying the tooltip text on hover.
For More Information:www.PacktPub.com/asp-net-jquery-cookbook/book
http://www.packtpub.com/asp-net-jquery-cookbook/bookhttp://www.packtpub.com/asp-net-jquery-cookbook/bookhttp://www.packtpub.com/asp-net-jquery-cookbook/book8/3/2019 54181823 0461 Chapter 9 Creating Rich Content in ASP Net
35/37
Creating Rich Content in ASP.NET
30
How to do i t ...
1. In the d o c u me n t . r e a d y ( ) function of the jQuery script block, apply the t o o l t i p ( ) method to all the span elements:
$ ( " s p a n " ) . t o o l t i p ( ) ;
Thus, the complete jQuery solution is as follows:
< s c r i p t l a n g u a g e = " j a v a s c r i p t " t y p e = " t e x t / j a v a s c r i p t " >
$ ( d o c u me n t ) . r e a d y ( f u n c t i o n ( ) {
$ ( " s p a n " ) . t o o l t i p ( ) ;
} ) ;
< / s c r i p t >
Note that be applying the . t o o l t i p ( ) method on the span areas, we can
create the required tooltips. The t i t l e text is displayed as the tooltip text.
How i t w orks . ..
Run the web page. Mouseover on the ? icon. You will notice that the tooltip is displayed as
shown in the following screenshot:
For More Information:www.PacktPub.com/asp-net-jquery-cookbook/book
http://www.packtpub.com/asp-net-jquery-cookbook/bookhttp://www.packtpub.com/asp-net-jquery-cookbook/bookhttp://www.packtpub.com/asp-net-jquery-cookbook/book8/3/2019 54181823 0461 Chapter 9 Creating Rich Content in ASP Net
36/37
Chapter 9
31
There 's more
For detailed documentation on the jQuery Tooltip plugin, please visit
h t t p : / / d o c s . j q u e r y . c o m/ P l u g i n s / To o l t i p .
See also
Creating dialog boxes
For More Information:www.PacktPub.com/asp-net-jquery-cookbook/book
http://www.packtpub.com/asp-net-jquery-cookbook/bookhttp://www.packtpub.com/asp-net-jquery-cookbook/bookhttp://www.packtpub.com/asp-net-jquery-cookbook/book8/3/2019 54181823 0461 Chapter 9 Creating Rich Content in ASP Net
37/37
Where to buy this bookYou can buy ASP.NET jQuery Cookbookfrom the Packt Publishing website:http://www.packtpub.com/asp-net-jquery-cookbook/book
Free shipping to the US, UK, Europe and selected Asian countries. For more information, please
read our shipping policy.
Alternatively, you can buy the book from Amazon, BN.com, Computer Manuals and
most internet book retailers.
www.PacktPub.com
For More Information:www PacktPub com/asp-net-jquery-cookbook/book
http://www.packtpub.com/Shippingpolicyhttp://www.packtpub.com/Shippingpolicyhttp://www.packtpub.com/asp-net-jquery-cookbook/bookhttp://www.packtpub.com/asp-net-jquery-cookbook/bookhttp://www.packtpub.com/Shippingpolicyhttp://www.packtpub.com/asp-net-jquery-cookbook/book