在网上参考了些例子,于是我这个sample实现了如标题上的功能。话不多说,上代码:
lishi.html
搜索form#form1 {
height: 93%;
}
p {
width: 99%;
height: 84%;
}
iframe#id_iframe {
width: 99%;
height: 100%;
border: 0 red solid;
}
input{display:block;}
/* 拖拽*/
html, body
{
height:100%;
overflow:hidden;
}
body, div, h2
{
margin:0;
padding:0;
}
body{font:12px/1.5 Tahoma;}
center{padding-top:10px;}
button{cursor:pointer;}
#overlay
{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0);
opacity:0.5;
filter:alpha(opacity=50);
display:none;
}
#win
{
position:absolute;
top:50%;
left:50%;
margin:-104px 0 0 -204px;
width:50%;
height:50%;
background:#fff;
border:4px solid #f90;
display:none;
}
h2
{
font-size:12px;
height:18px;
text-align:right;
background:#FC0;
border-bottom:3px solid #f90;
padding:5px;
cursor:move;
}
h2 span
{
color:#f90;
cursor:pointer;
background:#fff;
border:1px solid #f90;
padding:0 2px;
}
window.οnlοad=function()
{
var oWin=document.getElementById("win");
var oLay=document.getElementById("overlay");
var oBtn=document.getElementsByTagName("button")[0];
var oClose=document.getElementById("close");
var oH2=oWin.getElementsByTagName("h2")[0];
var bDrag=false;
var disX=disY=0;
oBtn.οnclick=function()
{
oLay.style.display="block";
oWin.style.display="block";
}
oClose.οnclick=function()
{
oLay.style.display="none";
oWin.style.display="none"
}
oH2.οnmοusedοwn=function(event)
{
var event=event||window.event;
bDrag=true;
disX=event.clientX-oWin.offsetLeft;
disY=event.clientY-oWin.offsetTop;
};
document.οnmοusemοve=function(event)
{
if(!bDrag) return;
var event=event||window.event;
var iL=event.clientX-disX;
var iT=event.clientY-disY;
var maxL=document.documentElement.clientWidth-oWin.offsetWidth;
var maxT=document.documentElement.clientHeight-oWin.offsetHeight;
iL=iL<0?0:iL;
iL=iL>maxL?maxL:iL;
iT=iT<0?0:iT;
iT=iT>maxT?maxT:iT;
oWin.style.marginTop=oWin.style.marginLeft=0;
oWin.style.left=iL+"px";
oWin.style.top=iT+"px";
};
document.οnmοuseup=function ()
{
bDrag=false;
};
};
input{
display: inline-block;
margin-top: 3%;
}
input#tijiao {
float: right;
margin-right: 9%;
}
input#txt_uname {
text-align: center;
margin-left: 3%;
width: 55%;
}
×
弹出层
上面的代码是为了实现弹出窗口。其效果图;
接下来连接数据库lishi.php:
tr:hover{
background-color: aquamarine;
}
$servername = "服务器名称";
$username = "用户名";
$password = "密码";
$dbname = "数据库名";
?>
if (isset($_GET['uname'])) {
//连上数据库
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
// 设置编码,防止中文乱码
mysqli_query($conn , "set names utf8");
//查找
$sql = "SELECT * FROM 表名字 WHERE 属性名 LIKE '%".$_GET['uname']."%'";//实现模糊查询
//执行
$result = $conn->query($sql);
//输出值
if ($result->num_rows > 0) {
// 输出每行数据
echo '
ID | 名称 | 描述 |
while($row = $result->fetch_assoc()) {
echo "
{$row['id']} "."
{$row['person_name']} "."
{$row['description']} ".// "
{$row['submission_date']} "."
";}echo '
';} else {
echo "没数据";
}
//关闭数据库连接,释放资源
$conn->close();
}
?>
最后,在lishi.html中win里添加表单,并将表单的action属性指向lishi.php。所以lishi.html的body部分更改为:
×
//target指向空白的iframe目的为了实现表单的无刷新提交//target指向空白的iframe目的为了实现表单的无刷新提交
以上就是今天的sample了,效果图:
内容来源于网络如有侵权请私信删除