前端点击图片将跳出显示框显示图片

该写法是在easy UI框架下所用！
主要的功能就是点击详情时候跳出一个显示框将服务器中的PDF文件显示出来.
后台数据库中存储的是已经上传了的文件路径！如果去掉<th>中的formatter:detail前端将
显示只是文件路径，例如：http://127.0.0.1:8080/PFSSmes/uploadFile/changeInfoPDF/bad_0001_20161001083020_20161013100118.pdf

详细的操作代码如下.

1-调用JS方法时候的写法！！！！！！
<th data-options="field:'detailFilePath',width:165,align:'center',formatter:detail">详情</th>

2-点击详情时候跳出的显示框！
<div id="detailDlg" closed="true" class="easyui-dialog"
data-options="iconCls:'icon-save',title: 'pdf详情',"
style="width: 800px; height: 600px; padding: 10px">
<div id='pdfFile' style="width: 100%; height: 100%;"></div>
</div>

3-JS方法详细代码
<script type="text/javascript">
function detail(detailFilePath) {
return "<a href='javascript:;'><img width='8px' src='../../static/images/icons_menu/detail.png' οnclick='clickSettings(\""
+ detailFilePath + "\")'/></a>";
}
function clickSettings(detailFilePath) {
PDFObject.embed(detailFilePath, "#pdfFile");
$('#detailDlg').dialog('open');
}

</script>

效果如下：1-主页显示的情况，

2-当点击单行的详情时，将跳出显示框。

前端点击图片将跳出显示框显示图片相关推荐

jquery粘贴按钮_实现前端点击按钮自动复制剪贴板功能
[目录] 明确需求 html分析代码实现 css分析 js分析代码实现只要是文本,长按选中就可以复制,但是需求来了挡也挡不住: 明确需求为了提升用户体验,点击[复制]按钮就自动复制到剪贴板,那 ...
php在文本框显示图片,多张图片上传后在页面上可以显示图片，在文本框显示地址怎么解决啊...
下边这个代码是我改的,试了下只能实现其中一个功能,如何可以实现多张图片上传后在页面上可以显示图片,在文本框显示地址呢. K('#J_selectImage').click(function() { e ...
前端点击按钮打印Excel
前端点击按钮打印Excel 实现思路太长不看版后端spire.xls将excel转为html,前端打印iframe 具体说明前端只能打印html文档已有的dom节点,无法直接打印Excel,那么 ...
前端点击移动生成小爱心
前端点击移动生成小爱心我之前看见一个博客,鼠标点击的时候会有不同颜色的小爱心出现,我就心血来潮试着写了一下,并且加了鼠标移动也会产生小爱心,放在这里目的是以后万一我要用方便找,写的不好请海涵. &l ...
如何点击按钮弹出弹框显示几秒_layer消息框显示在鼠标旁边
layer因为操作简单,界面美观,是开发消息弹窗的不二选择.一般我们都会让消息框采用浮动效果显示在屏幕正中间,但是如果我们的需求是弹框显示在鼠标点击位置的左下角,而且是随滚动条移动的,就像bootst ...
前端点击图片的某个区域进行映射
导航栏一:点击图片然后进行映射进行你想要的操作二:如何知道你点击位置图片的XY坐标? 一:点击图片然后进行映射进行你想要的操作比如现在UI同事给了你一张图[如下],让你在点击这个图的每一个行星的 ...
前端点击图片，图片放大
需要依赖js <script src="/js/photoswipe.min.js"></script><script src="/js/p ...
如何点击按钮弹出弹框显示几秒_产品反馈设计：如何与用户有效沟通？
正如两人聊天,一人滔滔不绝,另一人沉默寡言,即便有再大的热情,也会被这份冷淡给浇灭,有来有往才会越聊越起劲,越聊越有兴致,才能顺利进行下去.即便是作为一个倾听者,你也需要不时点头示意.双眼交错.嗯啊. ...
【前端点击穿透】pointer-events属性详解
什么是pointer-events? pointer-events 属性是一个指针属性,是用于控制在什么条件下特定的图形元素可以成为指针事件的目标. This CSS property,when se ...

前端点击图片将跳出显示框显示图片

前端点击图片将跳出显示框显示图片相关推荐

最新文章

热门文章