文本框和div [英] textbox and div
问题描述
有人可以指点我到一个有解释的网站，或者给我一个
*非常简单的一个div的例子，它会在一个文本框的正下方打开
页。我见过很多例子。不幸的是，我现在没有时间来挖掘代码来提取基本功能。
一个实际可以点击现场的实现可以在这里找到：
http://www.eworldui.net/CustomContro...PopupDemo.aspx
查看日历弹出文本框和图像：
提前非常感谢!!
could someone please point me to a site with an explanation or give me a
*very* simple example of a div that would open right below a textbox on a
page. I''ve seen lots of examples out there. Unfortunately I don''t have time
right now to dig through that code to extract the basic functionality. The
one implementation that really hits the spot can be found here:
http://www.eworldui.net/CustomContro...PopupDemo.aspx
look at the "Calendar Popup with Textbox and Image:"
thank you so much in advance!!
推荐答案
Alex写道：
有人可以指点我到一个有解释的网站，或者给我一个
*非常简单的div例子，可以在下面打开
页面上的文本框。我见过很多例子。不幸的是，我现在没有时间挖掘代码来提取基本功能。一个真正击中现场的实现可以在这里找到：
could someone please point me to a site with an explanation or give me a
*very* simple example of a div that would open right below a textbox on a
page. I''ve seen lots of examples out there. Unfortunately I don''t have time
right now to dig through that code to extract the basic functionality. The
one implementation that really hits the spot can be found here:
我喜欢这个：
http://www.softcomplex.com/products/...dar/demo1.html
下载有很好的示例代码：
http://www.softcomplex.com/products/.../download.html
Mike
I like this one:
http://www.softcomplex.com/products/...dar/demo1.html
The download has nice example code:
http://www.softcomplex.com/products/.../download.html
Mike
谢谢，Mike，回复！ tigra实现的问题是它会弹出一个实际的浏览器窗口而不是div。
。另外，我不是真的需要现在只需显示一些额外信息
关于用户刚刚点击的文本框...有意义吗？
这是一个令人费解的简单示例，我需要将其转换为
点，其中div（如果显示）不会推送其他内容但是
浮动在文本框的正下方......我猜风格必须改为
位置：绝对...但我怎样才能抓住坐标来放入div？
<！DOCTYPE HTML PUBLIC" - // W3C // DTD HTML 4.01 Transitional // EN">
< html>
< ; head>
< title>我很酷的div弹出< / title>
< / head>
< body>
< form>
< table border = 1>
< tr>
< td>这里的一些字段< / td>
< td>< input type =" text" id =" thisText"
onClick =" javascript ：document.all.divOne.style.disp lay =''''">< div id =" divOne"
style =" display：none; position：relative; border：1px
solid; width：200px; height：150px">< / div>< / td>
< / tr>
< tr>
< td>某些字段< / td>
< td>< input type =" text" id =" thisText"
onClick =" javascript ：document.all.divTwo.style.disp lay =''''">< div id =" divTwo"
style =" display：none; position：relative; border：1px
solid; width：200px; height：150px">< / div>< / td>
< / tr>
< / table>
< / form>
< / body>
< / html>
" mscir" < MS *** @ yahoo.com>在消息中写道
新闻：11 ************* @ corp.supernews.com ...
Thanks, Mike, for the reply! The problem with the tigra implementation is
that it pops up an actual browser window and not a div. also, I don''t really
need it for a calendar right now just to display some additional information
about the textbox the user just clicked on... does that make sense?
Here''s a mind-numbingly simple example that I need to be converted to the
point where the divs (when shown) will not push other content down but
"float" right below the textbox... I guess the style has to change to
position:absolute... but how can I grab the coordinates to put the div in??
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My cool div pop-out</title>
</head>
<body>
<form>
<table border=1>
<tr>
<td>some field here</td>
<td><input type="text" id="thisText"
onClick="javascript:document.all.divOne.style.disp lay=''''"><div id="divOne"
style="display:none;position:relative;border:1px
solid;width:200px;height:150px"></div></td>
</tr>
<tr>
<td>some field there</td>
<td><input type="text" id="thisText"
onClick="javascript:document.all.divTwo.style.disp lay=''''"><div id="divTwo"
style="display:none;position:relative;border:1px
solid;width:200px;height:150px"></div></td>
</tr>
</table>
</form>
</body>
</html>
"mscir" <ms***@yahoo.com> wrote in message
news:11*************@corp.supernews.com...
Alex写道：
有人可以请我指一个有解释的网站，或者给我一个
*非常简单的div的例子，它会在
页面的文本框下方打开。我见过很多例子。不幸的是，我现在没有时间来挖掘代码以提取基本功能。
一个真正能够点击现场的实现可以在这里找到：
could someone please point me to a site with an explanation or give me a
*very* simple example of a div that would open right below a textbox on a
page. I''ve seen lots of examples out there. Unfortunately I don''t have
time
right now to dig through that code to extract the basic functionality.
The
one implementation that really hits the spot can be found here:
我喜欢这个：
http://www.softcomplex.com/products/...dar/demo1.html
下载有很好的示例代码：
http://www.softcomplex.com/产品/.../download.html
Mike
I like this one:
http://www.softcomplex.com/products/...dar/demo1.html
The download has nice example code:
http://www.softcomplex.com/products/.../download.html
Mike
Alex，
Alex,
谢谢，迈克，回复！ tigra实现的问题是它弹出一个实际的浏览器窗口而不是div。另外，我现在不需要它来制作一个日历只是为了显示一些关于用户刚刚点击的文本框的其他信息......这有意义吗？
Thanks, Mike, for the reply! The problem with the tigra implementation is
that it pops up an actual browser window and not a div. also, I don''t really
need it for a calendar right now just to display some additional information
about the textbox the user just clicked on... does that make sense?
对不起我没看错。您如何看待使用hovertext？
<！DOCTYPE HTML PUBLIC" - // W3C // DTD HTML 4.01 // EN"
" ; http：//www.w3.org/TR/html4/strict.dtd">
< html>
< ; head>
< title> santaklauss的纯css工具提示< / title>
< meta name =" generator" content =" HAPedit 3.0"
< style type =" text / css">
body {width：100％; text-align：left; }
div #main {margin：0 25％}
p {line-height：150％}
a.info {
位置：相对;
z-index：24;
背景颜色：#cccccc;
颜色：＃000000 ;
text-decoration：none;
}
a.info:hover {z-index：25; background-color：#ff0 }
a.info span {display：none}
a.info:hover span {
display：block;
位置：绝对;
顶部：2em;
左：2em;
宽度：15em;
border：1px solid＃0cf;
background-color：yellow;
color：red;
font-size：1.1em;
font-weight：bold;
text-align：center
}
< / style>
< / head>
< body>
< div id =" main">
< h3>使用您的图像的示例代码：< / h3>
< hr>
1939年9月2日 - 当德国袭击波兰时，这一天标志着德国航空公司对布尔泽克和布盖泽姆城堡和堡垒进行的突击袭击
（该时期该城市的名称），造成了人员损失并损坏了
城市和堡垒中的建筑物。
< p>
< a class =" info" href ="＃">将鼠标移到此文本框上
< input type =" text">
< span>仅限本文当您在图像上移动鼠标
时弹出窗口显示。< / span>
< / a>
< / p>
< p>
< a class =" info" href ="＃">将鼠标移到此文本框上
< input type =" text">
< span>此文本也是仅当鼠标移动到
图像时才会出现。< / span>
< / a>
< / p>
< / div>
< / body>
< / html>
Sorry I didn''t read it correctly. What do you think of using hovertext?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Pure css tooltips by santaklauss</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="HAPedit 3.0">
<style type="text/css">
body { width: 100%; text-align: left; }
div#main {margin: 0 25%}
p {line-height: 150%}
a.info {
position: relative;
z-index:24;
background-color:#cccccc;
color:#000000;
text-decoration:none;
}
a.info:hover {z-index:25;background-color: #ff0}
a.info span {display: none}
a.info:hover span {
display:block;
position:absolute;
top:2em;
left:2em;
width:15em;
border:1px solid #0cf;
background-color:yellow;
color:red;
font-size: 1.1em;
font-weight: bold;
text-align: center
}
</style>
</head>
<body>
<div id="main">
<h3>Example code using your image:</h3>
<hr>
1939 September 2 - When Germany attacked Poland, the day was marked by
raids of the German aviation on the city and fortress of Brzesc nad Bugiem
(the city''s name at that period), which caused human losses and damaged
buildings in the city and in the fortress.
<p>
<a class="info" href="#">Move the Mouse over this Text Box
<input type="text">
<span>This text only appears in the popup when you move the mouse
over the image.</span>
</a>
</p>
<p>
<a class="info" href="#">Move the Mouse over this Text Box
<input type="text">
<span>This text also appears ONLY when the mouse moves over the
image.</span>
</a>
</p>
</div>
</body>
</html>
这篇关于文本框和div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
