Introduction: In this article we will
explore how we work with events in jQuery to make a simple GUI
(graphical user interface). In this article we will make a menu order as a UI
for the customer and will be applying some events to the menu items. Further
here we are creating some categories of items and the customer will choose a
category to select one of the items belonging to that category. So let's create an example page that puts the knowledge that we've gained so far to use. Here the page uses not only events but also some jQuery techniques that
we've explored in earlier chapters, including some heavy-weight jQuery
selectors. Further our goal for this example seems simple: to allow users to
select the type and number of menu item categories they would like added to
their order. Lets see how we will create it.
Step 1: Firstly we have to
create a Web Application
- Go to Visual Studio 2010
- Create the Web Application
- Click OK.
![Step_1fig.gif]()
Step 2: Secondly you have to add a new
page to the website
- Go to the Solution Explorer.
- Right Click on the Project name.
- Select add new item.
- Add new web page and give it a name.
- Click OK.
![Step_2_1fig.gif]()
![Step_2_2fig.gif]()
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_3_img.gif]()
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 want to place it.
![Step_4fig.gif]()
Step 5: In this line we will write the
jQuery code for the GUI application:
Code:
![Step_5_fig.gif]()
Code Description: $('fieldset div
div').hide(); method is used to hide the menu item bydefault whenever we run the
application. Hiding and showing the options is just one of the things that we
need to do when the state of one of the check boxes changes. Let's look at each
step in this fragment to see what it does for us. First, the click handler
stores the checked state of the check box in a variable named checked. This
makes for easy reference in the code, and it establishes a local variable that
we can use in any closures that we create. it still needs to adjust the state of
the quantity text boxes. These boxes are initially disabled and will only be
enabled when an appetizeris checked. We locate the text box with $('input[type=text]',$(this)
.parents('div:first')), a similar selector to the one we just employed that says
"locate the <input> element of type text in my first parent <div>." To this
element, we do the following:
Further we are using the attr() command to set
its disabled state to correspond to the inverse of the check box state. Apply a
CSS color value so that the text is invisible when the control is disabled. Set
the value to 1. Call the change handler of the text box to compute the item and
display them. the expression $('~ span:first',this) locates the first sibling of
this that's a <span> element. Employ the each() method to obtain a reference to
the element and assign focus to that element if the check box is in checked
state. $('span[price] input[type=text]').change(); is used to change it's text
value inside the textbox. further this will help to understand that how to
establish click and change handlers on elements that can
be used to effect whatever user interface changes we want when triggered.
Step 6: In this step we will see the
complete code for the default2.aspx page which is given below:
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>
<head>
<title>Mac
D Menu</title>
<script
type="text/javascript"
src="Scripts/jquery-1.4.1.min.js"></script>
<script
type="text/javascript">
$(function () {
$('fieldset div div').hide();
$(':checkbox').click(function
() {
var checked =
this.checked;
$('div', $(this).parents('div:first'))
.css('display', checked ?
'block' : 'none');
$('input[type=text]', $(this).parents('div:first'))
.attr('disabled', !checked)
.css('color', checked ?
'black' : '#f0f0f0')
.val(1)
.change()
.each(function () {
if (checked) this.focus();
});
});
$('span[price] input[type=text]').change(function
() {
$('~ span:first',
this).text(
$(this).val() * $(this).parents("span[price]:first").attr('price')
);
});
$('span[price] input[type=text]').change();
});
</script>
<style
type="text/css">
.style1
{
width: 65px;
height: 65px;
}
</style>
</head>
<body>
<h1
style="background-color:
#993333; font-family:
'Comic Sans MS';">
<img
class="style1"
src="image/logo.png"
alt="image"
/>c' Donalds</h1>
<h2
style="font-family:
'Comic Sans MS'; font-size:
xx-large; color:
#800000; background-color:
#008080;">Online Order Menu</h2>
<fieldset>
<legend
style="font-family:
'Comic Sans MS'; color:
#009933; font-size:
x-large">Menu</legend>
<div>
<label
style="font-family:
'Comic Sans MS'; font-size:
large; color:
#800000">
<input
type="checkbox"
name="Menu"
value="imperial"/>
Breakfast Menu
(4)
</label>
<span
price="3"
style="background-color:
#FFCC99">
<input
type="text"
name="imperial.quantity"
disabled="disabled"
value="1"
style="background-color:
#FF9966; font-family:
'Comic Sans MS'; height:
27px; width:
126px;"/>
$3<span></span>
</span>
<div>
<label
style="font-family:
'Comic Sans MS'; color:
#800000">
<input
type="radio"
name="imperial.option"
value="Hash
Brown"
checked="checked"/>
Hash Brown
</label>
<label
style="font-family:
'Comic Sans MS'; color:
#800000">
<input
type="radio"
name="imperial.option"
value="vegetarian"/>
Veg McMuffin
</label>
<label
style="font-family:
'Comic Sans MS'; color:
#800000">
<input
type="radio"
name="imperial.option"
value="vegetarian"/>
Sausage Muffin
</label>
<label
style="font-family:
'Comic Sans MS'; color:
#800000">
<input
type="radio"
name="imperial.option"
value="Non-vegetarian"/>
Sausage McMuffin
with egg
</label>
</div>
</div>
<div>
<label
style="font-family:
'Comic Sans MS'; font-size:
large; color:
#000080">
<input
type="checkbox"
name="appetizers"
value="spring"/>
Beverages (5)
</label>
<span
price="4"
style="background-color:
#FF6699">
<input
type="text"
name="spring.quantity"
disabled="disabled"
value="1"
style="background-color:
#FF5050; font-family:
'Comic Sans MS';"/>
$4
</span>
<div>
<label
style="font-family:
'Comic Sans MS'; color:
#0000FF">
<input
type="radio"
name="spring.option"
value="beverage"
checked="checked"/>
Cappucino
</label>
<label
style="font-family:
'Comic Sans MS'; color:
#000080">
<input
type="radio"
name="spring.option"
value="bevarage"/>
Coke
</label>
<label
style="font-family:
'Comic Sans MS'; color:
#000080">
<input
type="radio"
name="spring.option"
value="beverage"/>
Plain Tea
</label>
<label
style="font-family:
'Comic Sans MS'; color:
#000080">
<input
type="radio"
name="spring.option"
value="beverage"/>
Hot Chocolate
</label>
<label
style="font-family:
'Comic Sans MS'; color:
#000080; background-color:
#99FF99;">
<input
type="radio"
name="spring.option"
value="beverage"/>
Cold Coffee
</label>
</div>
</div>
<div
style="background-color:
#800000"></div>
</fieldset>
</body>
</html>
Step 7: In this step we will see the
design application which is given below:
![Step_7fig.gif]()
Step 8: In this step we are going to run
the application by pressing F5.
Output1:
![Output1.gif]()
Output 2:
![output2.gif]()
Output 3:
![Output3.gif]()