BlogJava-TSH,SSH开发-随笔分类-Html

BlogJava-TSH,SSH开发-随笔分类-Htmlhttp://www.blogjava.net/yc1354/category/19700.htmlzh-cnTue, 27 Mar 2007 17:23:52 GMTTue, 27 Mar 2007 17:23:52 GMT60showModalDialog和showModelessDialog使用心得(转)http://www.blogjava.net/yc1354/archive/2007/03/26/106486.html赵永超赵永超Mon, 26 Mar 2007 10:19:00 GMThttp://www.blogjava.net/yc1354/archive/2007/03/26/106486.htmlhttp://www.blogjava.net/yc1354/comments/106486.htmlhttp://www.blogjava.net/yc1354/archive/2007/03/26/106486.html#Feedback0http://www.blogjava.net/yc1354/comments/commentRss/106486.htmlhttp://www.blogjava.net/yc1354/services/trackbacks/106486.html一、showModalDialog和showModelessDialog有什么不同？
　　showModalDialog：被打开后就会始终保持输入焦点。除非对话框被关闭，否则用户无法切换到主窗口。类似alert的运行效果。
　　showModelessDialog：被打开后，用户可以随机切换输入焦点。对主窗口没有任何影响(最多是被挡住一下而以。:P)

二、怎样才让在showModalDialog和showModelessDialog的超连接不弹出新窗口？
　　在被打开的网页里加上<base target="_self">就可以了。这句话一般是放在<html>和<body>之间的。

三、怎样才刷新showModalDialog和showModelessDialog里的内容？
　　在showModalDialog和showModelessDialog里是不能按F5刷新的，又不能弹出菜单。这个只能依靠javascript了，以下是相关代码：

<body onkeydown="if (event.keyCode==116){reload.click()}">
<a id="reload" href="filename.htm" style="display:none">reload...</a>

　　将filename.htm替换成网页的名字然后将它放到你打开的网页里，按F5就可以刷新了，注意，这个要配合<base target="_self">使用，不然你按下F5会弹出新窗口的。

四、如何用javascript关掉showModalDialog(或showModelessDialog)打开的窗口。
　　<input type="button" value="关闭" onclick="window.close()">
　　也要配合<base target="_self">，不然会打开一个新的IE窗口，然后再关掉的。

五、showModalDialog和showModelessDialog数据传递技巧。
　　(作者语：本来想用一问一答形式来写的，但是我想不出这个怎么问，所以只好这样了。)
　　这个东西比较麻烦，我改了好几次了不是没办法说明白(语文水平越来越差了)，只好用个例子说明了。
　　例子：
　　　　现在需要在一个showModalDialog(或showModelessDialog)里读取或设置一个变量var_name

　　　　　　一般的传递方式：
　　　　　　　　window.showModalDialog("filename.htm",var_name)
　　　　　　　　//传递var_name变量
　　　　　　在showModalDialog(或showModelessDialog)读取和设置时：
　　　　　　　　alert(window.dialogArguments)//读取var_name变量
　　　　　　　　window.dialogArguments="oyiboy"//设置var_name变量
　　　　这种方式是可以满足的，但是当你想在操作var_name同时再操作第二个变理var_id时呢？就无法再进行操作了。这就是这种传递方式的局限性。
　　　　
　　　　　　以下是我建议使用的传递方式：
　　　　　　　　window.showModalDialog("filename.htm",window)
　　　　　　　　//不管要操作什么变量，只直传递主窗口的window对象
　　　　　　在showModalDialog(或showModelessDialog)读取和设置时：
　　　　　　　　alert(window.dialogArguments.var_name)//读取var_name变量
　　　　　　　　window.dialogArguments.var_name="oyiboy"//设置var_name变量

　　　　　　　　同时我也可以操作var_id变量
　　　　　　　　alert(window.dialogArguments.var_id)//读取var_id变量
　　　　　　　　window.dialogArguments.var_id="001"//设置var_id变量

　　　　　　　　同样还可以对主窗口的任何对象进行操作，如form对象里的元素。
　　　　　　　　window.dialogArguments.form1.index1.value="这是在设置index1元素的值"

六、多个showModelessDialog的相互操作。
　　因为光说很费劲，我就偷点懒，直接用代码来说了，如果不明白的话那就直接来信(oyiboy#163.net(使用时请将#改成@))问我吧。

　　以下代码的主要作用是在一个showModelessDialog里移动别一个showModelessDialog的位置。

　　主文件的部份js代码。
　　var s1=showModelessDialog('控制.htm',window,"dialogTop:1px;dialogLeft:1px"） //打开控制窗口
　　var s2=showModelessDialog('about:blank',window,"dialogTop:200px;dialogLeft:300px"）　　//打开被控制窗口

　　控制.htm的部份代码。
　　<script>
　　　　//操作位置数据，因为窗口的位置数据是"xxxpx"方式的，所以需要这样的一个特殊操作函数。
function countNumber(A_strNumber,A_strWhatdo)
{
A_strNumber=A_strNumber.replace('px','')
A_strNumber-=0
switch(A_strWhatdo)
{
case "-":A_strNumber-=10;break;
case "+":A_strNumber+=10;break;
}
return A_strNumber + "px"
}
　　</script>
　　<input type="button" onclick="window.dialogArguments.s2.dialogTop=countNumber(window.dialogArguments.s2.dialogTop,'-')" value="上移">
　　<input type="button" onclick="window.dialogArguments.s2.dialogLeft=countNumber(window.dialogArguments.s2.dialogLeft,'-')" value="左移">
　　<input type="button" onclick="window.dialogArguments.s2.dialogLeft=countNumber(window.dialogArguments.s2.dialogLeft,'+')" value="右移">
　　<input type="button" onclick="window.dialogArguments.s2.dialogTop=countNumber(window.dialogArguments.s2.dialogTop,'+')" value="下移">

　　以上关键部份是：
　　　　窗口命名方式：var s1=showModelessDialog('控制.htm',window,"dialogTop:1px;dialogLeft:1px"）
　　　　变量访问方式：window.dialogArguments.s2.dialogTop

　　这个例子只是现实showModelessDialog与showModelessDialog之间的位置操作功能，通过这个原理，在showModelessDialog之间相互控制各自的显示页面，传递变量和数据等。这要看各位的发挥了。

showModalDialog()、showModelessDialog()方法使用详解

javascript有许多内建的方法来产生对话框，如：window.alert(), window.confirm(),window.prompt().等。然而IE提供更多的方法支持对话框。如：

　　showModalDialog() (IE 4+ 支持)
　　 showModelessDialog() (IE 5+ 支持)

window.showModalDialog()方法用来创建一个显示HTML内容的模态对话框，由于是对话框，因此它并没有一般用window.open()打开的窗口的所有属性。
window.showModelessDialog()方法用来创建一个显示HTML内容的非模态对话框。

当我们用showModelessDialog()打开窗口时，不必用window.close()去关闭它，当以非模态方式［IE5］打开时，打开对话框的窗口仍可以进行其他的操作，即对话框不总是最上面的焦点，当打开它的窗口ＵＲＬ改变时，它自动关闭。而模态［ＩＥ４］方式的对话框始终有焦点（焦点不可移走，直到它关闭）。模态对话框和打开它的窗口相联系，因此我们打开另外的窗口时，他们的链接关系依然保存，并且隐藏在活动窗口的下面。

使用方法如下：
vReturnValue = window.showModalDialog(sURL [, vArguments] [, sFeatures])
vReturnValue = window.showModelessDialog(sURL [, vArguments] [, sFeatures])
参数说明：
sURL
必选参数，类型：字符串。用来指定对话框要显示的文档的URL。
vArguments
可选参数，类型：变体。用来向对话框传递参数。传递的参数类型不限，包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。
sFeatures
可选参数，类型：字符串。用来描述对话框的外观等信息，可以使用以下的一个或几个，用分号“;”隔开。
dialogHeight 对话框高度，不小于１００px，ＩＥ４中dialogHeight 和 dialogWidth 默认的单位是em，而ＩＥ５中是px，为方便其见，在定义modal方式的对话框时，用px做单位。
　　 dialogWidth: 对话框宽度。
　　 dialogLeft: 距离桌面左的距离。
　　 dialogTop: 离桌面上的距离。
　　 center: {yes | no | 1 | 0 }：窗口是否居中，默认yes，但仍可以指定高度和宽度。
　　 help: {yes | no | 1 | 0 }：是否显示帮助按钮，默认yes。
　　 resizable: {yes | no | 1 | 0 } ［ＩＥ５＋］：是否可被改变大小。默认no。
　　 status: {yes | no | 1 | 0 } ［IE5+］：是否显示状态栏。默认为yes[ Modeless]或no[Modal]。
scroll:{ yes | no | 1 | 0 | on | off }：指明对话框是否显示滚动条。默认为yes。

还有几个属性是用在HTA中的，在一般的网页中一般不使用。
dialogHide:{ yes | no | 1 | 0 | on | off }：在打印或者打印预览时对话框是否隐藏。默认为no。
edge:{ sunken | raised }：指明对话框的边框样式。默认为raised。
unadorned:{ yes | no | 1 | 0 | on | off }：默认为no。

传入参数：
要想对话框传递参数，是通过vArguments来进行传递的。类型不限制，对于字符串类型，最大为4096个字符。也可以传递对象，例如：

test1.htm
====================
<script>
var mxh1 = new Array("mxh","net_lover","孟子E章")
var mxh2 = window.open("about:blank","window_mxh")
// 向对话框传递数组
window.showModalDialog("test2.htm",mxh1)
// 向对话框传递window对象
window.showModalDialog("test3.htm",mxh2)
</script>

test2.htm
====================
<script>
var a = window.dialogArguments
alert("您传递的参数为：" + a)
</script>

test3.htm
====================
<script>
var a = window.dialogArguments
alert("您传递的参数为window对象，名称：" + a.name)
</script>

可以通过window.returnValue向打开对话框的窗口返回信息，当然也可以是对象。例如：

test4.htm
===================
<script>
var a = window.showModalDialog("test5.htm")
for(i=0;i<a.length;i++) alert(a[i])
</script>

test5.htm
===================
<script>
function sendTo()
{
var a=new Array("a","b")
window.returnValue = a
window.close()
}
</script>
<body>
<form>
<input value="返回" type=button onclick="sendTo()">
</form>

常见问题：
1，如何在模态对话框中进行提交而不新开窗口？
如果你的浏览器是IE5.5+,可以在对话框中使用带name属性的iframe，提交时可以制定target为该iframe的name。对于IE4+，你可以用高度为0的frame来作：例子，

test6.htm
===================
<script>
window.showModalDialog("test7.htm")
</script>

test7.htm
===================
if(window.location.search) alert(window.location.search)
<frameset rows="0,*">
<frame src="about:blank">
<frame src="test8.htm">
</frameset>

test8.htm
===================
<form target="_self" method="get">
<input name=txt value="test">
<input type=submit>
</form>
<script>
if(window.location.search) alert(window.location.search)
</script>
2,可以通过http://servername/virtualdirname/test.htm?name=mxh方式直接向对话框传递参数吗？
答案是不能。但在frame里是可以的。

赵永超 2007-03-26 18:19 发表评论

]]>在线HTML编辑器htmlarea简单使用http://www.blogjava.net/yc1354/archive/2007/02/07/98583.html赵永超赵永超Wed, 07 Feb 2007 05:47:00 GMThttp://www.blogjava.net/yc1354/archive/2007/02/07/98583.htmlhttp://www.blogjava.net/yc1354/comments/98583.htmlhttp://www.blogjava.net/yc1354/archive/2007/02/07/98583.html#Feedback0http://www.blogjava.net/yc1354/comments/commentRss/98583.htmlhttp://www.blogjava.net/yc1354/services/trackbacks/98583.html

这几步是如果使用htmlarea3.0的说明,是在网上看到的. 在/htmlarea/examples/web-menu这个文件里有更为详细的说明.下边的这个链接的版本是多国语言版本,默认的语言为英语.

一

下载HTMLarea3.0 http://www.jhdown.com/soft/8/141/html/2006220010681.html,解压里面的文件到web站点的/htmlarea目录下(可以是自己建的目录,这里建议直接用htmlarea做为目录)；

二、定义javascript的全局变量及引入js文件:

<script type="text/javascript">
_editor_url = "${pageContext.request.contextPath}/htmlarea/";
_editor_lang = "en";
</script>

<script type="text/javascript" src="${pageContext.request.contextPath}/htmlarea/htmlarea.js"></script>

<script type="text/javascript">
var editor = null;
function initEditor() {
editor = new HTMLArea("content");
editor.generate();
}
</script>

有句editor = new HTMLArea("content");"content"是表单中textarea属性的id，如：

      <html:form action="/actionBbsreply.do?method=update" onsubmit="this['content'].value=editor.getHTML();">
        <textarea cols="110" rows="15" id="content" name="content">
          <bean:write name="bbsreply" property="content"/>
        </textarea>
        <html:submit value=" 提交 ">
        </html:submit>
      </html:form>

三、在body的onload事件中加载initEditor():

如：<body bgcolor="#ffffff" onload="initEditor()">

四、注意点:

1、editor = new HTMLArea("content");参数值是表单中textarea属性id;

2、在body的onload事件中加载initEditor()；

3、表单onsubmit事件调用this['content'].value=editor.getHTML()

在使用的过程中发现,因为默认是英文语方,提示信息也是英文的, 这对于飞惯用中文的朋友来说很是不方便 ,如果要改变语言的话
   _editor_lang = "en";
把上边代码里的._editor_lang="gb"理论上就可以了, 这样,当代码去运行的时候会找/lang文件夹下的gb.js文件,但是作者发布这套源代码的时候jb.js里的中文是用iso8859-1编码的,我用MyEclipse的javascriptEdit查看器(MyEclipse下*.js的默认)打开的时候看到的全是乱码,这就导至了在jsp页面出现错误.解决的办法就是在改变gb.js的文件的属性, 将编码格式改为utf-8的格式. 然后再加上en.js下边的
buttons: {
"ok":           "确定",
"cancel":       "取消"
},

msg: {
"Path": "路径",
"TEXT_MODE": "现在模式是文本模式. 按[<>]键切换到可视化编辑模式.",

"IE-sucks-full-screen" :
// translate here
"The full screen mode is known to cause problems with Internet Explorer, " +
"due to browser bugs that we weren't able to workaround. You might experience garbage " +
"display, lack of editor functions and/or random browser crashes. If your system is Windows 9x " +
"it's very likely that you'll get a 'General Protection Fault' and need to reboot.\n\n" +
"You have been warned. Please press OK if you still want to try the full screen editor."
},

dialogs: {
"Cancel"                                            : "Cancel",
"Insert/Modify Link"                                : "Insert/Modify Link",
"New window (_blank)"                               : "New window (_blank)",
"None (use implicit)"                               : "None (use implicit)",
"OK"                                                : "OK",
"Other"                                             : "Other",
"Same frame (_self)"                                : "Same frame (_self)",
"Target:"                                           : "Target:",
"Title (tooltip):"                                  : "Title (tooltip):",
"Top frame (_top)"                                  : "Top frame (_top)",
"URL:"                                              : "URL:",
"You must enter the URL where this link points to" : "You must enter the URL where this link points to"
}

这些代码.如果有需要的话, 可以把右边属性的值翻译成汉语,这里还有一个要注意的地方就是要对照格式,我把我改正过的贴到这里, 方便查看

// I18N constants -- Chinese GB
// by Dave Lo -- dlo@interactivetools.com
HTMLArea.I18N = {

// the following should be the filename without .js extension
// it will be used for automatically load plugin language.
lang: "gb",

tooltips: {
bold:           "粗体",
italic:         "斜体",
underline:      "底线",
strikethrough: "删除线",
subscript:      "下标",
superscript:    "上标",
justifyleft:    "位置靠左",
justifycenter: "位置居中",
justifyright:   "位置靠右",
justifyfull:    "位置左右平等",
orderedlist:    "位置左右平等",
unorderedlist: "无序清单",
outdent:        "减小行前空白",
indent:         "加宽行前空白",
forecolor:      "文字颜色",
backcolor:      "背景颜色",
horizontalrule: "水平线",
horizontalrule: "水平标尺",
createlink:     "插入连结",
insertimage:    "插入图形",
inserttable:    "插入表格",
htmlmode:       "切换HTML原始码",
popupeditor:    "放大",
about:          "关於 HTMLArea",
help:           "说明",
textindicator: "字体例子"
},

buttons: {
"ok": "确定",
"cancel": "取消"
},

msg: {
"Path": "路径",
"TEXT_MODE": "现在模式是文本模式. 按[<>]键切换到可视化编辑模式.",

"IE-sucks-full-screen" :
// translate here
"The full screen mode is known to cause problems with Internet Explorer, " +
"due to browser bugs that we weren't able to workaround. You might experience garbage " +
"display, lack of editor functions and/or random browser crashes. If your system is Windows 9x " +
"it's very likely that you'll get a 'General Protection Fault' and need to reboot.\n\n" +
"You have been warned. Please press OK if you still want to try the full screen editor."
},

dialogs: {
"Cancel"                                            : "Cancel",
"Insert/Modify Link"                                : "Insert/Modify Link",
"New window (_blank)"                               : "New window (_blank)",
"None (use implicit)"                               : "None (use implicit)",
"OK"                                                : "OK",
"Other"                                             : "Other",
"Same frame (_self)"                                : "Same frame (_self)",
"Target:"                                           : "Target:",
"Title (tooltip):"                                  : "Title (tooltip):",
"Top frame (_top)"                                  : "Top frame (_top)",
"URL:"                                              : "URL:",
"You must enter the URL where this link points to" : "You must enter the URL where this link points to"
}
};

呵呵.文件改好了以后,就把这个文件复制到/plugins/下.(在plugins下有5个子文件夹,每个又文件夹下有一个lang文件夹,把gb.js文件放进去就OK了.)
然后启动,成功了...^_^

赵永超原创,转载请注明

赵永超 2007-02-07 13:47 发表评论

]]>利用javascript实现页面跳转的几种方法http://www.blogjava.net/yc1354/archive/2007/02/02/97589.html赵永超赵永超Fri, 02 Feb 2007 09:18:00 GMThttp://www.blogjava.net/yc1354/archive/2007/02/02/97589.htmlhttp://www.blogjava.net/yc1354/comments/97589.htmlhttp://www.blogjava.net/yc1354/archive/2007/02/02/97589.html#Feedback0http://www.blogjava.net/yc1354/comments/commentRss/97589.htmlhttp://www.blogjava.net/yc1354/services/trackbacks/97589.html　　<INPUT name="pclog" type="button" value="GO" onClick="location.href='url'">

直接跳转式：

<script>window.location.href='url';</script>

<SCRIPT LANGUAGE="javascript">

</SCRIPT>

参数解释：

<SCRIPT LANGUAGE="javascript"> js脚本开始；
window.open 弹出新窗口的命令；
'page.html' 弹出窗口的文件名；
'newwindow' 弹出窗口的名字（不是文件名），非必须，可用空''代替；
height=100 窗口高度；
width=400 窗口宽度；
top=0 窗口距离屏幕上方的象素值；
left=0 窗口距离屏幕左侧的象素值；
toolbar=no 是否显示工具栏，yes为显示；
menubar，scrollbars 表示菜单栏和滚动栏。
resizable=no 是否允许改变窗口大小，yes为允许；
location=no 是否显示地址栏，yes为允许；
status=no 是否显示状态栏内的信息（通常是文件已经打开），yes为允许；
</SCRIPT> js脚本结束

【3、用函数控制弹出窗口】
下面是一个完整的代码。
<html>
<head>
<script LANGUAGE="JavaScript">

</script>
</head>
<body onload="openwin()">
...任意的页面内容...
</body>
</html>

这里定义了一个函数openwin(),函数内容就是打开一个窗口。在调用它之前没有任何用途。
怎么调用呢？

方法一：<body onload="openwin()"> 浏览器读页面时弹出窗口；
方法二：<body onunload="openwin()"> 浏览器离开页面时弹出窗口；
方法三：用一个连接调用：
<a href="#" onclick="openwin()">打开一个窗口</a>
注意：使用的“#”是虚连接。
方法四：用一个按钮调用：
<input type="button" onclick="openwin()" value="打开窗口">

【4、同时弹出2个窗口】

对源代码稍微改动一下：
<script LANGUAGE="JavaScript">

</script>

为避免弹出的2个窗口覆盖，用top和left控制一下弹出的位置不要相互覆盖即可。最后用上面说过的四种方法调用即可。
注意：2个窗口的name(newwindows和newwindow2)不要相同，或者干脆全部为空。OK？

【5、主窗口打开文件1.htm，同时弹出小窗口page.html】

如下代码加入主窗口<head>区：

<script language="javascript">

</script>
加入<body>区：
<a href="/blog/1.htm" onclick="openwin()">open</a>即可。

【6、弹出的窗口之定时关闭控制】

下面我们再对弹出的窗口进行一些控制，效果就更好了。如果我们再将一小段代码加入弹出的页面(注意是加入到page.html的HTML中，可不是主页面中，否则...)，让它10秒后自动关闭是不是更酷了？

首先，将如下代码加入page.html文件的<head>区：
<script language="JavaScript">

function closeit() {

setTimeout("self.close()",10000) //毫秒

}

</script>
然后，再用<body onload="closeit()"> 这一句话代替page.html中原有的<BODY>这一句就可以了。(这一句话千万不要忘记写啊！这一句的作用是调用关闭窗口的代码，10秒钟后就自行关闭该窗口。)

【7、在弹出窗口中加上一个关闭按钮】
<FORM>
<INPUT TYPE='BUTTON' VALUE='关闭' onClick='window.close()'>
</FORM>
呵呵，现在更加完美了！

【8、内包含的弹出窗口-一个页面两个窗口】

上面的例子都包含两个窗口，一个是主窗口，另一个是弹出的小窗口。
通过下面的例子，你可以在一个页面内完成上面的效果。

<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
function openwin()
{
OpenWindow=window.open("", "newwin", "height=250, width=250,toolbar=no,scrollbars="+scroll+",menubar=no");
//写成一行
OpenWindow.document.write("<TITLE>例子</TITLE>")
OpenWindow.document.write("<BODY BGCOLOR=#ffffff>")
OpenWindow.document.write("<h1>Hello!</h1>")
OpenWindow.document.write("New window opened!")
OpenWindow.document.write("</BODY>")
OpenWindow.document.write("</HTML>")
OpenWindow.document.close()
}
</SCRIPT>
</head>
<body>
<a href="#" onclick="openwin()">打开一个窗口</a>
<input type="button" onclick="openwin()" value="打开窗口">
</body>
</html>

看看 OpenWindow.document.write()里面的代码不就是标准的HTML吗？只要按照格式写更多的行即可。千万注意多一个标签或少一个标签就会出现错误。记得用OpenWindow.document.close()结束啊。

【9、终极应用--弹出的窗口之Cookie控制】

回想一下，上面的弹出窗口虽然酷，但是有一点小毛病(沉浸在喜悦之中，一定没有发现吧？)比如你将上面的脚本放在一个需要频繁经过的页面里(例如首页)，那么每次刷新这个页面，窗口都会弹出一次，是不是非常烦人？:-(
有解决的办法吗？Yes! ;-) Follow me.
我们使用cookie来控制一下就可以了。
首先，将如下代码加入主页面HTML的<HEAD>区：

<script>
function openwin(){
window.open("page.html","","width=200,height=200")
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1)
end = document.cookie.length;
returnvalue="/blog/unescape(document.cookie.substring(offset," end))
}
}
return returnvalue;
}

function loadpopup(){
if (get_cookie('popped')==''){
openwin()
document.cookie="popped=yes"
}
}

</script>

然后，用<body onload="loadpopup()">（注意不是openwin而是loadpop啊！）替换主页面中原有的<BODY>这一句即可。你可以试着刷新一下这个页面或重新进入该页面，窗口再也不会弹出了。真正的Pop-Only-Once！

赵永超 2007-02-02 17:18 发表评论

]]>