- 浏览: 657848 次
- 性别:
- 来自: 深圳
文章分类
- 全部博客 (609)
- java (139)
- 数据库 (107)
- 微信 (23)
- IT生活 (5)
- web前端 (74)
- SSH (11)
- 设计模式 (12)
- 重要资料 (11)
- 其他 (15)
- java技巧 (23)
- 服务器 (9)
- 2D/GUI (3)
- JAVA3D (2)
- ANT (5)
- Apache项目 (19)
- 数据类型 (10)
- 报表 (3)
- Collections (6)
- SQL/JDBC (15)
- 开发类 (6)
- EJB (6)
- Email (6)
- 文件读写 (2)
- 游戏 (0)
- Flex (2)
- Generic (2)
- HIbernate (12)
- I18N (5)
- Java EE (9)
- java ME (4)
- JDK 6 (8)
- JNDI/LDAP (5)
- JSP (7)
- JSTL (2)
- 正则表达式 (2)
- 安全 (2)
- Struts2 (12)
- Spring (4)
- Web服务 (10)
- Xml (1)
- JavaScript (30)
- AJAX (7)
- 验证 (4)
- 上传下载 (1)
- office办公软件 (1)
- Android (2)
- IOS (0)
- Dubbo (3)
- memcached/redis (1)
- 小程序 (1)
- 微信公众号 (0)
最新评论
-
wf_wangfeng:
怎么我用第一种方法不行呢 alert(document.rea ...
当jsp页面完全加载完成后执行一个js函数 -
Lori_Liu:
有帮助,至少可以解决了目前所遇到的问题!谢谢..
当jsp页面完全加载完成后执行一个js函数 -
starbhhc:
String actionMessage = new Stri ...
Java读取txt文件乱码 -
starbhhc:
Sev7en_jun 写道GOOD
客气,互相交流。。
javaeye论坛规则小测验(答案)--star -
Sev7en_jun:
GOOD
javaeye论坛规则小测验(答案)--star
Windows关机效果分析
使用Windows系统的用户在关机的时候,出现的界面只允许用户选择关机、注销或取消动作,而桌面上的程序都不能使用,并且屏幕呈现灰色状态。
本例将仿照这种高亮显示的效果在网页上实现.
在网页上运用这种关机效果有什么好处呢?首先,由于单击某一链接后,将用户此时不可用的操作隐藏在后台,将可用的操作放在屏幕最上层,并高亮显示,可以避免用户的误操作。其次,将信息高亮显示,也可以提醒用户应该注意的事项。
网页中实现关机效果分析
在网页中实现这种效果的原理很简单。创建两个图层,一个为遮盖层,覆盖整个页面,并且显示为灰色;另一个图层作为高亮显示的部分,在遮盖层的上方,这可通过设置图层的z-index属性来设置。当取消关机效果后,只需将这两个图层元素在页面中删除即可。
以下代码实现显示关机效果。
<html>
<head>
<title>AJAX LightBox Sample</title>
<style type="text/css">
#lightbox {/*该层为高亮显示层*/
BORDER-RIGHT: #fff 1px solid;
BORDER-TOP: #fff 1px solid;
DISPLAY: block;
Z-INDEX: 9999; /*设置该层在网页的最上端,设置足够大*/
BACKGROUND: #fdfce9; /*设置背景色*/
LEFT: 50%;
MARGIN: -220px 0px 0px -250px;
BORDER-LEFT: #fff 1px solid;
WIDTH: 500px;
BORDER-BOTTOM: #fff 1px solid;
POSITION: absolute;
TOP: 50%;
HEIGHT: 400px;
TEXT-ALIGN: left
}
#overlay {/*该层为覆盖层*/
DISPLAY: block;
Z-INDEX: 9998; /*设置高亮层的下方*/
FILTER: alpha(opacity=80); /*设置成透明*/
LEFT: 0px;
WIDTH: 100%;
POSITION: absolute;
TOP: 0px;
HEIGHT: 100%;
BACKGROUND-COLOR: #000;
moz-opacity: 0.8;
opacity: .80
}
</style>
</head>
<body>
<!--该层为覆盖层 -->
<div id="overlay"></div>
<!--该层为高亮显示层 -->
<div id="lightbox"></div>
</body>
</html>
需要注意的是,在IE浏览器中如果有<select>标记,则该标记不能被覆盖层覆盖,但在其他浏览器中则可以覆盖。
在使用IE浏览器时,要先将网页中的<select>元素隐藏起来。如以下代码可以用于隐藏页面所有的<select>元素。
selects = document.getElementsByTagName(select);
for(i = 0; i < selects.length; i++) {
selects[i].style.visibility = visibility;
}
代码实现
客户端代码
客户端的页面上有两个链接,用户单击链接后,向服务器端发送请求,并将返回信息显示到高亮层上。客户端的网页文件代码如下所示:
<html>
<head>
<title>AJAX LightBox</title>
<!-- 本例使用的css样式表文件-->
<LINK href="lightbox.css" type=text/css rel=stylesheet>
<!--prototype类文件-->
<script type="text/javascript" src="js/prototype.js" ></script>
<!--本例使用的javascript代码-->
<script type="text/javascript" src="lightbox.js" ></script>
</head>
<body>
<DIV id=container>
<UL>
<LI><A class=lbOn href="getInfo.jsp?id=one">One</A>
</LI>
<LI><A class=lbOn href="getInfo.jsp?id=two">Two</A>
</LI>
</UL>
</div>
</body>
</html>
另外,还需要设置该页面所使用CSS样式。lightbox.css样式表文件代码如下所示:
#lightbox {
BORDER-RIGHT: #fff 1px solid;
BORDER-TOP: #fff 1px solid;
DISPLAY: none;
Z-INDEX: 9999;
BACKGROUND: #fdfce9;
LEFT: 50%;
MARGIN: -220px 0px 0px -250px;
BORDER-LEFT: #fff 1px solid;
WIDTH: 500px;
BORDER-BOTTOM: #fff 1px solid;
POSITION: absolute;
TOP: 50%;
HEIGHT: 400px;
TEXT-ALIGN: left
}
UNKNOWN {
POSITION: fixed
}
#overlay {
DISPLAY: none;
Z-INDEX: 5000; FILTER: alpha(opacity=80);
LEFT: 0px;
WIDTH: 100%;
POSITION: absolute;
TOP: 0px;
HEIGHT: 100%;
BACKGROUND-COLOR: #000; moz-opacity: 0.8; opacity: .80
}
UNKNOWN {
POSITION: fixed
}
.done#lightbox #lbLoadMessage {
DISPLAY: none
}
.done#lightbox #lbContent {
DISPLAY: block
}
.loading#lightbox #lbContent {
DISPLAY: none
}
.loading#lightbox #lbLoadMessage {
DISPLAY: block
}
.done#lightbox IMG {
WIDTH: 100%; HEIGHT: 100%
}
客户端脚本
由于浏览器对图层的支持不同,所以首先要确定客户端浏览器的类型。以下代码可用于判断客户端的浏览器和操作系统。
var detect = navigator.userAgent.toLowerCase();
var OS,browser,version,total,thestring;
function getBrowserInfo() {
if (checkIt(konqueror)) {
browser = "Konqueror";
OS = "Linux";
}
else if (checkIt(safari)) browser = "Safari"
else if (checkIt(omniWeb)) browser = "OmniWeb"
else if (checkIt(opera)) browser = "Opera"
else if (checkIt(Webtv)) browser = "WebTV";
else if (checkIt(icab)) browser = "iCab"
else if (checkIt(msie)) browser = "Internet Explorer"
else if (!checkIt(compatible)) {
browser = "Netscape Navigator"
version = detect.charAt(8);
}
else browser = "An unknown browser";
if (!version) version = detect.charAt(place + thestring.length);
if(!OS) {
if (checkIt(linux)) OS = "Linux";
else if (checkIt(x11)) OS = "Unix";
else if (checkIt(mac)) OS = "Mac"
else if (checkIt(win)) OS = "Windows"
else OS = "an unknown operating system";
}
}
function checkIt(string) {
place = detect.indexOf(string) + 1;
thestring = string;
return place;
}
下面看一下网页加载时需要添加的方法。有关网页加载和初始化方法代码如下:
//网页加载调用initialize和getBrowserInfo方法
Event.observe(window, load, initialize, false);
Event.observe(window, load, getBrowserInfo, false);
//未加载时清空缓存
Event.observe(window, unload, Event.unloadCache, false);
//初始化方法
function initialize(){
//调用该方法为该页添加覆盖层和高亮显示层
addLightboxMarkup();
//为每个可高亮显示的元素创建lightbox对象
lbox = document.getElementsByClassName(lbOn);
for(i = 0; i < lbox.length; i++) {
valid = new lightbox(lbox[i]);
}
}
// 使用Dom方法创建覆盖层和高亮层
function addLightboxMarkup() {
bod = document.getElementsByTagName(body)[0];
overlay = document.createElement(div);
overlay.id = overlay;
lb = document.createElement(div);
lb.id = lightbox;
lb.className = loading;
lb.innerHTML = <div id="lbLoadMessage"> +
<p>Loading</p> +
</div>;
bod.appendChild(overlay);
bod.appendChild(lb);
}
封装lightbox类
初始化数据时,为每个可高亮显示的链接创建了lightbox对象。该类的代码具体实现如下:
var lightbox = Class.create();
lightbox.prototype = {
yPos : 0,
xPos : 0,
//构造方法,ctrl为创建该对象的元素
initialize: function(ctrl) {
//将该元素的链接赋值给this.content
this.content = ctrl.href;
//为该元素添加onclick事件activate方法
Event.observe(ctrl, click, this.activate.bindAsEventListener(this), false);
ctrl.onclick = function(){return false;};
},
//当单击链接时
activate: function(){
if (browser == Internet Explorer){//判断为IE浏览器
this.getScroll();
this.prepareIE(100%, hidden);
this.setScroll(0,0);
this.hideSelects(hidden);//隐藏所有的<select>标记
}
//调用该类中的displayLightbox方法
this.displayLightbox("block");
},
prepareIE: function(height, overflow){
bod = document.getElementsByTagName(body)[0];
bod.style.height = height;
bod.style.overflow = overflow;
htm = document.getElementsByTagName(html)[0];
htm.style.height = height;
htm.style.overflow = overflow;
},
hideSelects: function(visibility){
selects = document.getElementsByTagName(select);
for(i = 0; i < selects.length; i++) {
selects[i].style.visibility = visibility;
}
},
getScroll: function(){
if (self.pageYOffset) {
this.yPos = self.pageYOffset;
} else if (document.documentElement && document.documentElement.scrollTop){
this.yPos = document.documentElement.scrollTop;
} else if (document.body) {
this.yPos = document.body.scrollTop;
}
},
setScroll: function(x, y){
window.scrollTo(x, y);
},
displayLightbox: function(display){
//将覆盖层显示
$(overlay).style.display = display;
//将高亮层显示
$(lightbox).style.display = display;
//如果不是隐藏状态,则调用该类中的loadInfo方法
if(display != none) this.loadInfo();
},
//该方法发送Ajax请求
loadInfo: function() {
//当请求完成后调用本类中processInfo方法
var myAjax = new Ajax.Request(
this.content,
{method: get, parameters: "", onComplete: this.processInfo.bindAsEvent Listener (this)}
);
},
// 将返回的文本信息显示到高亮层上
processInfo: function(response){
//获得返回的文本数据
var result = response.responseText;
//显示到高亮层
info = "<div id=lbContent>" + result + "</div>";
//在info元素前插入一个元素
new Insertion.Before($(lbLoadMessage), info)
//改变该元素的class name的值
$(lightbox).className = "done";
//调用本类中actions方法
this.actions();
var ctrl=$(lightbox);
//为高亮层添加事件处理方法reset
Event.observe(ctrl, click, this.reset.bindAsEventListener(this), false);
ctrl.onclick = function(){return false;};
},
//恢复初始状态
reset:function(){
//隐藏覆盖层
$(overlay).style.display="none";
//清空返回数据
$(lbContent).innerHTML="";
//隐藏高亮层
$(lightbox).style.display="none";
},
// Search through new links within the lightbox, and attach click event
actions: function(){
lbActions = document.getElementsByClassName(lbAction);
for(i = 0; i < lbActions.length; i++) {
Event.observe(lbActions[i], click, this[lbActions[i].rel].bindAs EventListener(this), false);
lbActions[i].onclick = function(){return false;};
}
}
}
提示:由于该对象比较复杂,读者可以仔细参阅代码的注释部分。
服务器端代码
服务器端首先获得查询中的“id”值,如果该值为null或为空,则设置为默认值。然后判断该值,并且返回相应的一段字符串信息。处理请求的getInfojsp页面代码如下:
<%@ page language="java" import="java.util.*"%>
<%
//获得请求中id的值
String imgID = request.getParameter("id");
if (imgID==null||imgID.equals(""))//如果为null或为空
imgID="one";//设定为默认值
if ( imgID.equals("one"))//如果为one
{
%>
<h3 id="cartitle" style="border-bottom: 1px solid #C0C0C0; margin-bottom: -5px">Porsche Carrera GT</h3>
<p>The Carrera GT has a 5.7 litre V10 internal combustion engine that produces
605 SAE horsepower (451 kW). Porsche claims it will accelerate from 0 to 100
km/h (62 mph) in 3.9 seconds and has a maximum speed of 330 km/h (204 mph).
With 605 hp, the car weighs 1,380 kg (3,042 lb). The Carrera GT is only
offered with a six-speed manual transmission, in contrast to its rival the
Ferrari Enzo that is only offered with sequential manual transmission. Also
the Carrera GT is significantly less expensive than the Ferrari Enzo. The
Ferrari Enzo is priced around $660,000 to the Carrera GTs $440,000. The
Carrera GT is known for its high quality and reliability which makes it one of
the best supercars ever.
<%}else{//否则
%>
<h3 id="cartitle" style="border-bottom: 1px solid #C0C0C0; margin-bottom: -5px">Ferrari Testarossa</h3>
<p>The Ferrari Testarossa is an V12 mid-engined sports car made by Ferrari.
The name, which means "red head", comes from the red painted cylinder heads on
the flat-12 engine. The engine was technically a 180?V engine since it shared
flat-plane crankshaft pins with opposing cylinders. Output was 390 hp (291
kW), and the car won many comparison tests and admirers - it was featured on
the cover of Road & Track magazine nine times in just five years. Almost
10,000 Testarossas, 512TRs, and 512Ms were produced, making this one of the
most common Ferrari models despite its high price and exotic design.
<%}%>
使用Windows系统的用户在关机的时候,出现的界面只允许用户选择关机、注销或取消动作,而桌面上的程序都不能使用,并且屏幕呈现灰色状态。
本例将仿照这种高亮显示的效果在网页上实现.
在网页上运用这种关机效果有什么好处呢?首先,由于单击某一链接后,将用户此时不可用的操作隐藏在后台,将可用的操作放在屏幕最上层,并高亮显示,可以避免用户的误操作。其次,将信息高亮显示,也可以提醒用户应该注意的事项。
网页中实现关机效果分析
在网页中实现这种效果的原理很简单。创建两个图层,一个为遮盖层,覆盖整个页面,并且显示为灰色;另一个图层作为高亮显示的部分,在遮盖层的上方,这可通过设置图层的z-index属性来设置。当取消关机效果后,只需将这两个图层元素在页面中删除即可。
以下代码实现显示关机效果。
<html>
<head>
<title>AJAX LightBox Sample</title>
<style type="text/css">
#lightbox {/*该层为高亮显示层*/
BORDER-RIGHT: #fff 1px solid;
BORDER-TOP: #fff 1px solid;
DISPLAY: block;
Z-INDEX: 9999; /*设置该层在网页的最上端,设置足够大*/
BACKGROUND: #fdfce9; /*设置背景色*/
LEFT: 50%;
MARGIN: -220px 0px 0px -250px;
BORDER-LEFT: #fff 1px solid;
WIDTH: 500px;
BORDER-BOTTOM: #fff 1px solid;
POSITION: absolute;
TOP: 50%;
HEIGHT: 400px;
TEXT-ALIGN: left
}
#overlay {/*该层为覆盖层*/
DISPLAY: block;
Z-INDEX: 9998; /*设置高亮层的下方*/
FILTER: alpha(opacity=80); /*设置成透明*/
LEFT: 0px;
WIDTH: 100%;
POSITION: absolute;
TOP: 0px;
HEIGHT: 100%;
BACKGROUND-COLOR: #000;
moz-opacity: 0.8;
opacity: .80
}
</style>
</head>
<body>
<!--该层为覆盖层 -->
<div id="overlay"></div>
<!--该层为高亮显示层 -->
<div id="lightbox"></div>
</body>
</html>
需要注意的是,在IE浏览器中如果有<select>标记,则该标记不能被覆盖层覆盖,但在其他浏览器中则可以覆盖。
在使用IE浏览器时,要先将网页中的<select>元素隐藏起来。如以下代码可以用于隐藏页面所有的<select>元素。
selects = document.getElementsByTagName(select);
for(i = 0; i < selects.length; i++) {
selects[i].style.visibility = visibility;
}
代码实现
客户端代码
客户端的页面上有两个链接,用户单击链接后,向服务器端发送请求,并将返回信息显示到高亮层上。客户端的网页文件代码如下所示:
<html>
<head>
<title>AJAX LightBox</title>
<!-- 本例使用的css样式表文件-->
<LINK href="lightbox.css" type=text/css rel=stylesheet>
<!--prototype类文件-->
<script type="text/javascript" src="js/prototype.js" ></script>
<!--本例使用的javascript代码-->
<script type="text/javascript" src="lightbox.js" ></script>
</head>
<body>
<DIV id=container>
<UL>
<LI><A class=lbOn href="getInfo.jsp?id=one">One</A>
</LI>
<LI><A class=lbOn href="getInfo.jsp?id=two">Two</A>
</LI>
</UL>
</div>
</body>
</html>
另外,还需要设置该页面所使用CSS样式。lightbox.css样式表文件代码如下所示:
#lightbox {
BORDER-RIGHT: #fff 1px solid;
BORDER-TOP: #fff 1px solid;
DISPLAY: none;
Z-INDEX: 9999;
BACKGROUND: #fdfce9;
LEFT: 50%;
MARGIN: -220px 0px 0px -250px;
BORDER-LEFT: #fff 1px solid;
WIDTH: 500px;
BORDER-BOTTOM: #fff 1px solid;
POSITION: absolute;
TOP: 50%;
HEIGHT: 400px;
TEXT-ALIGN: left
}
UNKNOWN {
POSITION: fixed
}
#overlay {
DISPLAY: none;
Z-INDEX: 5000; FILTER: alpha(opacity=80);
LEFT: 0px;
WIDTH: 100%;
POSITION: absolute;
TOP: 0px;
HEIGHT: 100%;
BACKGROUND-COLOR: #000; moz-opacity: 0.8; opacity: .80
}
UNKNOWN {
POSITION: fixed
}
.done#lightbox #lbLoadMessage {
DISPLAY: none
}
.done#lightbox #lbContent {
DISPLAY: block
}
.loading#lightbox #lbContent {
DISPLAY: none
}
.loading#lightbox #lbLoadMessage {
DISPLAY: block
}
.done#lightbox IMG {
WIDTH: 100%; HEIGHT: 100%
}
客户端脚本
由于浏览器对图层的支持不同,所以首先要确定客户端浏览器的类型。以下代码可用于判断客户端的浏览器和操作系统。
var detect = navigator.userAgent.toLowerCase();
var OS,browser,version,total,thestring;
function getBrowserInfo() {
if (checkIt(konqueror)) {
browser = "Konqueror";
OS = "Linux";
}
else if (checkIt(safari)) browser = "Safari"
else if (checkIt(omniWeb)) browser = "OmniWeb"
else if (checkIt(opera)) browser = "Opera"
else if (checkIt(Webtv)) browser = "WebTV";
else if (checkIt(icab)) browser = "iCab"
else if (checkIt(msie)) browser = "Internet Explorer"
else if (!checkIt(compatible)) {
browser = "Netscape Navigator"
version = detect.charAt(8);
}
else browser = "An unknown browser";
if (!version) version = detect.charAt(place + thestring.length);
if(!OS) {
if (checkIt(linux)) OS = "Linux";
else if (checkIt(x11)) OS = "Unix";
else if (checkIt(mac)) OS = "Mac"
else if (checkIt(win)) OS = "Windows"
else OS = "an unknown operating system";
}
}
function checkIt(string) {
place = detect.indexOf(string) + 1;
thestring = string;
return place;
}
下面看一下网页加载时需要添加的方法。有关网页加载和初始化方法代码如下:
//网页加载调用initialize和getBrowserInfo方法
Event.observe(window, load, initialize, false);
Event.observe(window, load, getBrowserInfo, false);
//未加载时清空缓存
Event.observe(window, unload, Event.unloadCache, false);
//初始化方法
function initialize(){
//调用该方法为该页添加覆盖层和高亮显示层
addLightboxMarkup();
//为每个可高亮显示的元素创建lightbox对象
lbox = document.getElementsByClassName(lbOn);
for(i = 0; i < lbox.length; i++) {
valid = new lightbox(lbox[i]);
}
}
// 使用Dom方法创建覆盖层和高亮层
function addLightboxMarkup() {
bod = document.getElementsByTagName(body)[0];
overlay = document.createElement(div);
overlay.id = overlay;
lb = document.createElement(div);
lb.id = lightbox;
lb.className = loading;
lb.innerHTML = <div id="lbLoadMessage"> +
<p>Loading</p> +
</div>;
bod.appendChild(overlay);
bod.appendChild(lb);
}
封装lightbox类
初始化数据时,为每个可高亮显示的链接创建了lightbox对象。该类的代码具体实现如下:
var lightbox = Class.create();
lightbox.prototype = {
yPos : 0,
xPos : 0,
//构造方法,ctrl为创建该对象的元素
initialize: function(ctrl) {
//将该元素的链接赋值给this.content
this.content = ctrl.href;
//为该元素添加onclick事件activate方法
Event.observe(ctrl, click, this.activate.bindAsEventListener(this), false);
ctrl.onclick = function(){return false;};
},
//当单击链接时
activate: function(){
if (browser == Internet Explorer){//判断为IE浏览器
this.getScroll();
this.prepareIE(100%, hidden);
this.setScroll(0,0);
this.hideSelects(hidden);//隐藏所有的<select>标记
}
//调用该类中的displayLightbox方法
this.displayLightbox("block");
},
prepareIE: function(height, overflow){
bod = document.getElementsByTagName(body)[0];
bod.style.height = height;
bod.style.overflow = overflow;
htm = document.getElementsByTagName(html)[0];
htm.style.height = height;
htm.style.overflow = overflow;
},
hideSelects: function(visibility){
selects = document.getElementsByTagName(select);
for(i = 0; i < selects.length; i++) {
selects[i].style.visibility = visibility;
}
},
getScroll: function(){
if (self.pageYOffset) {
this.yPos = self.pageYOffset;
} else if (document.documentElement && document.documentElement.scrollTop){
this.yPos = document.documentElement.scrollTop;
} else if (document.body) {
this.yPos = document.body.scrollTop;
}
},
setScroll: function(x, y){
window.scrollTo(x, y);
},
displayLightbox: function(display){
//将覆盖层显示
$(overlay).style.display = display;
//将高亮层显示
$(lightbox).style.display = display;
//如果不是隐藏状态,则调用该类中的loadInfo方法
if(display != none) this.loadInfo();
},
//该方法发送Ajax请求
loadInfo: function() {
//当请求完成后调用本类中processInfo方法
var myAjax = new Ajax.Request(
this.content,
{method: get, parameters: "", onComplete: this.processInfo.bindAsEvent Listener (this)}
);
},
// 将返回的文本信息显示到高亮层上
processInfo: function(response){
//获得返回的文本数据
var result = response.responseText;
//显示到高亮层
info = "<div id=lbContent>" + result + "</div>";
//在info元素前插入一个元素
new Insertion.Before($(lbLoadMessage), info)
//改变该元素的class name的值
$(lightbox).className = "done";
//调用本类中actions方法
this.actions();
var ctrl=$(lightbox);
//为高亮层添加事件处理方法reset
Event.observe(ctrl, click, this.reset.bindAsEventListener(this), false);
ctrl.onclick = function(){return false;};
},
//恢复初始状态
reset:function(){
//隐藏覆盖层
$(overlay).style.display="none";
//清空返回数据
$(lbContent).innerHTML="";
//隐藏高亮层
$(lightbox).style.display="none";
},
// Search through new links within the lightbox, and attach click event
actions: function(){
lbActions = document.getElementsByClassName(lbAction);
for(i = 0; i < lbActions.length; i++) {
Event.observe(lbActions[i], click, this[lbActions[i].rel].bindAs EventListener(this), false);
lbActions[i].onclick = function(){return false;};
}
}
}
提示:由于该对象比较复杂,读者可以仔细参阅代码的注释部分。
服务器端代码
服务器端首先获得查询中的“id”值,如果该值为null或为空,则设置为默认值。然后判断该值,并且返回相应的一段字符串信息。处理请求的getInfojsp页面代码如下:
<%@ page language="java" import="java.util.*"%>
<%
//获得请求中id的值
String imgID = request.getParameter("id");
if (imgID==null||imgID.equals(""))//如果为null或为空
imgID="one";//设定为默认值
if ( imgID.equals("one"))//如果为one
{
%>
<h3 id="cartitle" style="border-bottom: 1px solid #C0C0C0; margin-bottom: -5px">Porsche Carrera GT</h3>
<p>The Carrera GT has a 5.7 litre V10 internal combustion engine that produces
605 SAE horsepower (451 kW). Porsche claims it will accelerate from 0 to 100
km/h (62 mph) in 3.9 seconds and has a maximum speed of 330 km/h (204 mph).
With 605 hp, the car weighs 1,380 kg (3,042 lb). The Carrera GT is only
offered with a six-speed manual transmission, in contrast to its rival the
Ferrari Enzo that is only offered with sequential manual transmission. Also
the Carrera GT is significantly less expensive than the Ferrari Enzo. The
Ferrari Enzo is priced around $660,000 to the Carrera GTs $440,000. The
Carrera GT is known for its high quality and reliability which makes it one of
the best supercars ever.
<%}else{//否则
%>
<h3 id="cartitle" style="border-bottom: 1px solid #C0C0C0; margin-bottom: -5px">Ferrari Testarossa</h3>
<p>The Ferrari Testarossa is an V12 mid-engined sports car made by Ferrari.
The name, which means "red head", comes from the red painted cylinder heads on
the flat-12 engine. The engine was technically a 180?V engine since it shared
flat-plane crankshaft pins with opposing cylinders. Output was 390 hp (291
kW), and the car won many comparison tests and admirers - it was featured on
the cover of Road & Track magazine nine times in just five years. Almost
10,000 Testarossas, 512TRs, and 512Ms were produced, making this one of the
most common Ferrari models despite its high price and exotic design.
<%}%>
发表评论
-
jquery easyui DataGrid
2015-04-11 17:15 1105Easyui Demo网站: http://www.je ... -
js获取带checkbox行的记录的Id值的两个方法
2015-04-09 14:44 683第一种: function updateProcess() ... -
文本域字符限制。
2014-10-24 13:11 538页面中:<textarea id="set& ... -
JQuery 样式设置、追加、移除与切换
2014-01-21 13:41 884获取与设置样式 获取class和设置class都可以使用a ... -
jQuery 判断页面元素是否被选中的几种方法
2014-01-21 11:03 1405jQuery 判断 checkbox 是否被选中的几种方法: ... -
jquery和js初始化加载的多种方法
2014-01-20 14:48 911jquery和js初始化加载页面的区别: jquery:等 ... -
js自动刷新当前页面
2013-12-19 14:09 802reload 方法,该方法强 ... -
页面中各种加载select的所有值
2012-08-24 18:15 10041.在页面中加载select的所有值。 1、比如,把一个ma ... -
javascript评估用户输入密码的强度
2012-08-22 15:00 901密码已经是我们生活工作中必不可少的工具,但一个不安全的密码有又 ... -
需要掌握的八个CSS布局技巧
2011-01-06 17:05 8491.若有疑问立即检测 在 ... -
ExtJs是通过Ext.ToolTip和Ext.QuickTips两个组件来实现浮动提示功能的
2010-09-27 13:59 1815Ext.QuickTips QuickTips代码示例:只需 ... -
Extjs 数据读取对象ArrayReader/JsonReader/XmlReader
2010-09-18 11:12 12171.<!DOCTYPE html PUBLIC &quo ... -
不错的JS中Cookie的文章
2010-09-10 23:17 840Cookies,有些人喜欢它们 ... -
js中cookie的使用
2010-09-10 23:14 1055cookie概述 在上一节,曾经利用一个不变的框架来存储购物栏 ... -
Javascript实例教程(9) 随机显示图片
2010-07-21 16:07 984有时你可以会在一些网站看到一些变化显示的图片,这除了可以利用F ... -
Javascript获取地址参数
2010-07-21 16:06 981修改地址后的参数: <script> funct ... -
JavaScript方法和技巧大全
2010-07-21 16:04 960JavaScript方法和技巧大全:基础知识 1 创建脚本 ... -
javascript弹出窗口问题总结
2010-07-21 16:02 7941.无提示刷新网页 大家有没有发现,有些网页,刷新的时 ... -
javascript操作cookie
2010-07-21 16:02 759使得在访问页面的时候能够沿用上次的设置,或者在不同的页面间共享 ... -
JavaScript 操作数据库
2010-07-21 16:00 1028简单的数据库操作: <HTML> <HEA ...
相关推荐
“Windows关机效果”可能是指在触发某个操作(如关闭模态窗口)时,应用类似Windows操作系统关机过程的动画效果,例如逐渐暗淡或渐隐的视觉变化。这可以增加用户体验的互动性和趣味性。 “div覆盖”是指使用HTML中...
在本示例中,"javascript模拟windowsxp关机效果代码"是一个利用JavaScript实现的仿Windows XP关机动画的效果。这个demo为初学者提供了一个学习JavaScript动态效果实现的实例。 首先,我们要理解Windows XP的关机...
JavaScript实现仿Windows关机效果是一种在网页中模拟操作系统关机界面的设计手法,它主要通过创建图层并控制其样式来实现。这一效果不仅能够提供一种视觉上的交互体验,还可以帮助防止用户在执行特定操作时进行误...
本篇文章将详细介绍一种基于JavaScript实现的仿Windows XP关机效果的弹出窗口功能。该功能通过CSS样式与JavaScript脚本结合,能够在网页上呈现出与Windows XP系统类似的关机提示效果,提升用户的交互体验。 #### 二...
### JavaScript仿XP关机效果的弹出窗口功能详解 #### 一、背景介绍与应用场景 在网站开发或应用系统设计中,美观且实用的界面效果能够显著提升用户体验。其中,“弹出窗口”作为一项常用的功能,被广泛应用于确认...
用JavaScript实现仿Windows关机效果 js访问xml之遍历节点树 JS技术大全(防止复制,粘贴等) 用javascript改变onclick调用的函数 用JavaScript加密保护网站页面 用Javascript检测网速的方法 用Javascript评估用户...
近来要做一个LightBox的效果(也有的叫Windows关机效果),不过不用那么复杂,能显示一个内容框就行了。 这个效果很久以前就做过,无非就是一个覆盖全屏的层,加一个内容显示的层。不过showbo教了我position:fixed这...
【jQuery仿Windows7】项目是一个基于JavaScript库jQuery实现的网页版Windows 7界面模拟器。这个项目的主要目标是为用户提供一种在浏览器环境下体验Windows 7操作系统界面的方式,无需依赖服务器端技术如ASP、PHP或...
本篇文章将深入探讨如何利用jQuery这一强大的JavaScript库,实现仿Windows10桌面开始菜单以及开关机特效。通过对给定的"jQuery仿Windows10桌面开始菜单及开关机特效源码.zip"进行分析,我们将揭示其中的关键技术和...
在本项目中,开发者尝试通过代码来模仿Windows 10操作系统的桌面界面,提供类似的功能,如欢迎界面、开机启动、关机以及桌面操作。这是一个典型的前端开发实践,主要涉及的技术栈包括HTML、CSS和JavaScript,可能还...
22.1 实现关机效果的界面 22.2 关机特效(二) 22.3 评星效果 22.4 输入框自动完成功能 22.5 Ajax效果的字符串过滤 22.6 Gmail右上角的Loading效果 22.7 使用XMLHTTP获取天气预报 22.8 拖拽任意对象 22.9 避免打开...
22.1 实现关机效果的界面 22.2 关机特效(二) 22.3 评星效果 22.4 输入框自动完成功能 22.5 Ajax效果的字符串过滤 22.6 Gmail右上角的Loading效果 22.7 使用XMLHTTP获取天气预报 22.8 拖拽任意对象 22.9 避免打开...
外一篇 用javascript改变onclick调用的函数 用JavaScript加密保护网站页面 用Javascript检测网速的方法 用Javascript评估用户输入密码的强度 用JavaScript实现仿Windows关机效果 用javascript实现...
程序描述:本章将利用开源框架Prototype,讲述如何在网页中实现Windows关机效果,使读者对Prototype框架有进一步的认识。 /lightbox.html 仿Window关机效果 /lightbox.js JavaScript脚本文件 第23章...
9. **仿Windows关机对话框提示框效果**:这涉及CSS模仿UI设计以及JavaScript实现交互逻辑。通过CSS创建类似Windows风格的对话框样式,JavaScript则控制对话框的显示、按钮的响应以及模拟用户确认或取消操作。 10. *...