这次要做两个例子,第一个是类似预览的。
效果,会弹出一个窗口,右上角x号关闭。
先把程序贴出来,后续作补充。
css代码如下
table { font-size:12px; border:1px solid #dedede; margin:0 auto; }
table tr td { border: 1px solid #B1CDE3; background: #fff; font-size:12px; padding: 3px 3px 3px 8px; color: #4f6b72; }
table tr .title { text-align:left; }
.window{ width:480px; background-color:#d0def0; position:absolute; padding:2px; margin:5px; display:none; }
.window .close { position:absolute; right:0px; top:0px; width:40px; height:20px; text-align:center; color:red; font-weight:bold; cursor:pointer; }
提取数据,我就不多说了,通过数据库
$list = $dbObj2->getAll($sql);
接下来就是程序端和前端显示,php,html混编的,大家一看都知道。
<div>在售商品列表</div>
<div class="container">
<table>
<tr>
<th>名称</th>
<th colspan="2">生成详情页</th>
<th>编辑宝贝</th>
<th>状态</th>
<th>预览</th>
<th>创建时间</th>
<th>列表刷新时间</th>
<th>图片生成时间</th>
</tr>
<?php
foreach( $list as $k => $v )
{
switch($v['status'])
{
case 0 :
$str = "未生成";
break;
case 1 :
$str = "已生成";
break;
case 2 :
$str = "已删除";
break;
}
/**
* 关于预览,如果数据库存的有图,那么预览,如果没有预览不可实现。jquery。
*/
?>
<tr>
<td class="title"><?php echo $v['title']; ?></td>
<td><a href="javascript:create_picture('<?php echo $v['gid']; ?>')">仅图片生成</a></td>
<td><a href="create_pic2.php?gid=<?php echo $v['gid'];?>" target="_blank">生成图文</a></td>
<td><a href="#" target="_blank">编辑宝贝</a></td>
<td><?php echo $str; ?></td>
<td><a href="javascript:view('<?php echo $v['gid']; ?>')">预览</a></td>
<td><?php echo timeFormat($v['create_time']); ?></td>
<td><?php echo timeFormat($v['update_time']); ?></td>
<td><?php echo timeFormat($v['create_pic_time']); ?></td>
</tr>
<?php
}
?>
</table>
</div>
<div class="window" id="center"><div class="post"></div><div class="close">关闭</div></div>
主要是这一句。
<td><a href="javascript:view('<?php echo $v['gid']; ?>')">预览</a></td>
以下是相关的javascript
function view(index){
$.get("view.php",{ gid:index },function(data){
$(".window .post").html(data);
popCenterWindow();
})
}
var windowHeight;
var windowWidth;
var popWidth;
var popHeight;
function popCenterWindow(){
var windowHeight=$(window).height();
var windowWidth=$(window).width();
var popHeight=$(".window").height();
var popWidth=$(".window").width();
var popY=(windowHeight-popHeight)/2;
var popX=(windowWidth-popWidth)/2;
//alert(popY);
$("#center").css("top",popY).css("left",popX).slideToggle("slow");
closeWindow();
}
function closeWindow(){
$(".window .close").click(function(){
$(this).parent().hide("slow");
})
}
其实这一段js也很容易理解,获取,定位,淡入淡出。关闭窗口。
最后的php代码view.php,
$gid = isset($_GET['gid'])? $_GET['gid'] : exit("paramer error");//商品id
$dbObj = new Db('goods_info');
$sql = "SELECT picture FROM goods_info WHERE gid='".$gid."'";
$picture = $dbObj->getOne($sql);
if(isset($picture['picture']))
{
$handle = fopen("cache/pic/".$gid.".jpg","w");//打开文件准备写入
fwrite($handle,$picture['picture']);//写入,这里的$picture['picture']就是从数据库中取出来的图片二进制。
fclose($handle);
?>
<div style="text-align:center;"><img height="824" src="cache/pic/<?php echo $gid; ?>.jpg"></div>
<?php
}
else
{
echo ("没有图片或者图片备份");
}
这段代码是不是有点眼熟,呵呵,就是之前的图片2进制的存取,ok,这就是为之前的2进制图片,生成预览。
ok这第一个就放到这里了。后续第二个其实和这个差不多。
最后编辑:(2014年3月13日16:54:18)