2008-12-23 190 views
0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en"> 
<head> 
<meta http-equiv="content-type" content="text/html; 
charset=utf-8"> 
<title>YUI Calendar Control Example</title> 
<link rel="stylesheet" 
type="text/css" 
href="yui/build/calendar/assets/skins/sam/calendar.css"> 
<script type="text/javascript" 
src="yui/build/yahoo-dom-event/ 
yahoo-dom-event.js"></script> 
<script type="text/javascript" 
src="yui/build/calendar/calendar-min.js"></script> 
<style type="text/css"> 
input { 
margin:0px 10px 0px 10px; 
} 
</style> 
</head> 
<body class="yui-skin-sam"> 
<div> 
<label>Please enter your date of birth:</label> 
<input type="text" name="dobfield" id="dobfield"> 
<img id="calico" src="E:\HP_PROJECT\cal.png" 
alt="Open the Calendar control"> 
</div> 
<div id="mycal"></div> 
<script type="text/javascript"> 
//create the namespace object for this example 
YAHOO.namespace("yuibook.calendar"); 
//define the lauchCal function which creates the calendar 
YAHOO.yuibook.calendar.launchCal = function() { 
//create the calendar object, specifying the container 
Var myCal = new YAHOO.widget.Calendar("mycal"); 
//draw the calendar on screen 
myCal.render(); 


} 
//define the showCal function which shows the calendar 
Var showCal = function() { 
//show the calendar 
myCal.show(); 
} 

//create calendar on page load 
YAHOO.util.Event.onDOMReady(YAHOO.yuibook.calendar.launchCal); 
//attach listener for click event on calendar icon 
YAHOO.util.Event.addListener("calico", "click", showCal); 
//myCal.hide(); 



</script> 

</body> 
</html> 

我已经使用了上面的代码。但与代码的问题是,当我点击图像图标没有显示。我是新来的JavaScript。请帮助我如何实现监听器。器件监听器

请指导我在代码中执行chages的位置。

感谢 Padmaja

+0

请重新格式化您的代码以使其可读。 – Triptych 2008-12-23 05:13:35

+0

我想我把它复制为intendcded ... – dkretz 2008-12-23 05:42:18

回答

1

的问题是,myCal是一个局部变量的launchCal()功能。为myCal变量提供全局可访问的名称空间将使其可用于每个范围。

这是你的原代码(别人不小心把我的正确的代码在你原来的问题= /)

YAHOO.namespace("yuibook.calendar"); 

//define the lauchCal function which creates the calendar 
YAHOO.yuibook.calendar.launchCal = function() { 

    //create the calendar object, specifying the container 
    var myCal = new YAHOO.widget.Calendar("mycal"); 

    //draw the calendar on screen 
    myCal.render(); 
} 

//define the showCal function which shows the calendar 
Var showCal = function() { 
    //show the calendar 
    myCal.show(); 
} 

//create calendar on page load 
YAHOO.util.Event.onDOMReady(YAHOO.yuibook.calendar.launchCal); 

//attach listener for click event on calendar icon 
YAHOO.util.Event.addListener("calico", "click", showCal); 

//myCal.hide(); 

现在看到我的变化。请注意使用全局YAHOO命名空间。

YAHOO.namespace("yuibook.calendar"); 

//define the lauchCal function which creates the calendar 
YAHOO.yuibook.calendar.launchCal = function() { 

    //create the calendar object, specifying the container 
    YAHOO.yuibook.calendar.myCal = new YAHOO.widget.Calendar("mycal"); 

    //draw the calendar on screen 
    myCal.render(); 
} 

//define the showCal function which shows the calendar 
Var showCal = function() { 
    //show the calendar 
    YAHOO.yuibook.calendar.myCal.show(); 
} 

//create calendar on page load 
YAHOO.util.Event.onDOMReady(YAHOO.yuibook.calendar.launchCal); 

//attach listener for click event on calendar icon 
YAHOO.util.Event.addListener("calico", "click", showCal); 

//myCal.hide();