SharePoint 2013 弹窗效果之URL打开方式(一)
在SharePoint中想做一个弹出效果其实很简单,仅仅在js中使用SharePoint Modal Dialog, 以下做一个简单的例子:很多情况下我们会通过linkButton弹出一个详细页面,那么下面我们将以这样的场景作为例子。
场景: 在结果集里将鼠标停留在"Impact on Product Type" 列,并选中你所需要查看的信息,它将会弹出窗体并显示与impact on product type相关的信息
首先我们看一下最终的效果图 (这里我选中第二条数据,在"Impact on Product Type"列下点击65000Transaction Management Software)
接下来,我们将设计该弹出功能:
1. 在Web Part中添加SharePoint的SPGridView控件(你也可以直接使用ASP里的LinkButton控件),在SPGridView里添加LinkButton控件,对于如何使用SPGridView控件这里就不多说了
因为是在点击Link时将弹出窗体,所以在asp:LinkButton控件需要添加点击事件(OnClientClick='<%#"javascript:openCommentsDialog(\"" + SPEncode.HtmlEncode(Eval("ImapctOnProductGuid") as string) + "\"); return false;" %>'),其中SPEncode.HtmlEncode(Eval("ImapctOnProductGuid") as string)是参数
- <asp:TemplateField HeaderText="Impact on Product Type">
- <ItemTemplate>
- <asp:LinkButton ID="impactProductLinkButton" runat="server" Text='<%# Bind("ImpactOnProduct") %>'
- OnClientClick='<%# "javascript:openCommentsDialog(\"" + SPEncode.HtmlEncode(Eval("ImapctOnProductGuid") as string) + "\"); return false;" %>'></asp:LinkButton>
- </ItemTemplate>
- </asp:TemplateField>
2. 在客户端Javascript对象模型中的SP.UI.ModalDialog类提供了对话框框架的定义。
其中urlStr变量用于存放详细页面的路径及传递参数到详细页面,如果传递参数的数据量比较大,请不要使用该方法,请参考下一篇文章弹窗效果(二)
- function openCommentsDialog(name) {
- var options = SP.UI.$create_DialogOptions();
- var localUrl = window.location;
- var urlStr = localUrl.protocol + "//" + localUrl.host + "/_layouts/15/ImpactOnProductTypeDetial.aspx?impactOnProductGuid=" + name;
- options.url = urlStr; // 定向详细页面的URL
- options.height = 500; // 定义窗体的高度
- options.width = 500; // 定义窗体的高度
- SP.UI.ModalDialog.showModalDialog(options);
- }
3. 在详细页面中我们需要接收参数并通过参数绑定数据, 由于详细页面因个人需求不同,这里将不做任何讲解。
有些朋友会问如何将详细页面中指定的值返回到父页面呢?这一问题我们将在下一篇文章弹窗效果(三)中讲解.
SharePoint 2013 弹窗效果之URL打开方式(一)的更多相关文章
- SharePoint 2013 弹窗效果之本地HTML打开方式(二)
上一篇我们主要讲述如何通过showModalDialog方法进行弹出窗体,同时弹出信息定义在新的页面(Application Page),使用 SP.UI.$create_DialogOptions( ...
- SharePoint 2013 页面访问,Url中间多一段"_layouts/15/start.aspx#"
问题描述: 我想访问如下页面 http://Host/_layouts/15/ManageFeatures.aspx 点击以后页面地址没有错,但是中间多了一段“_layouts/15/start.as ...
- SharePoint 2013 页面访问,Url中间多一段"_layouts/15/start.aspx#"
问题描述: 我想访问如下页面 http://Host/_layouts/15/ManageFeatures.aspx 点击以后页面地址没有错,但是中间多了一段"_layouts/15/sta ...
- SharePoint 2013开发入门探索(一)- 自定义列表
在SharePoint 2013中创建自定义列表的方式有很多,在网站内容页面添加应用程序就可以创建(站点内容-〉 您的应用程序),也可以通过SharePoint Designer 2013创建,而本文 ...
- SharePoint 2013 工作流平台的选项不可用
问题描述 当我想创建一个SharePoint 2013 工作流的时候,打开SharePoint 2013 Designer(一下简称SPD),发现没有SharePoint 2013 工作流的选项.原来 ...
- BEGINNING SHAREPOINT® 2013 DEVELOPMENT 第1章节--SharePoint 2013 介绍 处理开发者需求
BEGINNING SHAREPOINT® 2013 DEVELOPMENT 第1章节--SharePoint 2013 介绍 处理开发者需求 SharePoint本质上是一个平台.你 ...
- SharePoint 2013 入门教程
以下文章是自己在学习SharePoint的过程中,不断积累和总结的博文,现在总结一个目录,分享给大家.这个博客也是自己从SharePoint入门,到一个SharePoint开发的成长记录,里面记录的都 ...
- SharePoint 2013 入门教程--系列文章
转:http://www.cnblogs.com/jianyus/p/3381415.html 以下文章是自己在学习SharePoint的过程中,不断积累和总结的博文,现在总结一个目录,分享给大家.这 ...
- SharePoint 2013 入门教程 [不断更新~]
以下文章是自己在学习SharePoint的过程中,不断积累和总结的博文,现在总结一个目录,分享给大家.这个博客也是自己从SharePoint入门,到一个SharePoint开发的成长记录,里面记录的都 ...
随机推荐
- 从奥鹏一个答案提取页面 看jquery知识点
http://oldlearn.open.com.cn/OEMSExercise/HomeworkReview.aspx?HomeworkId=9c034488-0a3d-4b9d-a6cc-e42 ...
- json字符串、json对象、数组 三者之间的转换
json字符串转化成json对象 // jquery的方法 var jsonObj = $.parseJSON(jsonStr) //js 的方法 var jsonObj = JSON.parse(j ...
- cocos2d-x创建精灵动画
创建动画一般过程: 1.创建精灵框架缓存,并向其中添加相应的动画文件(plist),最后,通过动画集缓存生产动画 CCSpriteFrameCache *cache = CCSpriteFrameCa ...
- DirectShow VS2013 控制台下捕捉摄像头而且显示
须要lib库文件 strmiids.lib,下载地址:http://download.csdn.net/detail/dopamy_busymonkey/8872687 放在解决方式中项目的根文件夹中 ...
- Kruskal算法模拟讲解
Kruskal 算法是一个求最小生成树的算法,即求最小的开销等 算法可以这样,要求得最小生成树,那么n个节点只能包括n-1条边 所以我们应该转换为寻找这最短的n-1条边,因此,可以先对所有的 边进行从 ...
- eclipse 常见问题及解决
1. Target runtime Apache Tomcat v6.0 is not defined.错误解决方法 原文:http://blog.csdn.net/xw13106209/articl ...
- 自己写的Dapper通用数据访问层
using Microsoft.Practices.EnterpriseLibrary.Data; using Microsoft.Practices.EnterpriseLibrary.Data.O ...
- css 权威指南笔记( 五)结构和层叠之三种样式来源
CSS中的样式一共有三种来源:创作人员.读者和用户代理,来源的不同会影响到样式的层叠方式 首先,创作人员(author's+style)样式应该是我们最熟悉的,如果你是一个前端开发者,那么你写的那些样 ...
- Python数据类型(元组、列表、字符串、字典)
元组tuple:不可修改的数据类型 ABC = ('a', 1, x, 'today') 列表list:可修改的数据类型 ABC = ['a', 1, x, 'today'] 字符串set: ABC ...
- mvc form
当点击提交按钮后,想在Controll里取到Form里的数据. 必须在控件上设置name属性 例如<input type='text',name='userId'/>, 在controll ...