在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打开方式(一)的更多相关文章

  1. SharePoint 2013 弹窗效果之本地HTML打开方式(二)

    上一篇我们主要讲述如何通过showModalDialog方法进行弹出窗体,同时弹出信息定义在新的页面(Application Page),使用 SP.UI.$create_DialogOptions( ...

  2. SharePoint 2013 页面访问,Url中间多一段"_layouts/15/start.aspx#"

    问题描述: 我想访问如下页面 http://Host/_layouts/15/ManageFeatures.aspx 点击以后页面地址没有错,但是中间多了一段“_layouts/15/start.as ...

  3. SharePoint 2013 页面访问,Url中间多一段&quot;_layouts/15/start.aspx#&quot;

    问题描述: 我想访问如下页面 http://Host/_layouts/15/ManageFeatures.aspx 点击以后页面地址没有错,但是中间多了一段"_layouts/15/sta ...

  4. SharePoint 2013开发入门探索(一)- 自定义列表

    在SharePoint 2013中创建自定义列表的方式有很多,在网站内容页面添加应用程序就可以创建(站点内容-〉 您的应用程序),也可以通过SharePoint Designer 2013创建,而本文 ...

  5. SharePoint 2013 工作流平台的选项不可用

    问题描述 当我想创建一个SharePoint 2013 工作流的时候,打开SharePoint 2013 Designer(一下简称SPD),发现没有SharePoint 2013 工作流的选项.原来 ...

  6. BEGINNING SHAREPOINT&#174; 2013 DEVELOPMENT 第1章节--SharePoint 2013 介绍 处理开发者需求

    BEGINNING SHAREPOINT® 2013 DEVELOPMENT 第1章节--SharePoint 2013 介绍 处理开发者需求         SharePoint本质上是一个平台.你 ...

  7. SharePoint 2013 入门教程

    以下文章是自己在学习SharePoint的过程中,不断积累和总结的博文,现在总结一个目录,分享给大家.这个博客也是自己从SharePoint入门,到一个SharePoint开发的成长记录,里面记录的都 ...

  8. SharePoint 2013 入门教程--系列文章

    转:http://www.cnblogs.com/jianyus/p/3381415.html 以下文章是自己在学习SharePoint的过程中,不断积累和总结的博文,现在总结一个目录,分享给大家.这 ...

  9. SharePoint 2013 入门教程 [不断更新~]

    以下文章是自己在学习SharePoint的过程中,不断积累和总结的博文,现在总结一个目录,分享给大家.这个博客也是自己从SharePoint入门,到一个SharePoint开发的成长记录,里面记录的都 ...

随机推荐

  1. DevExpress LookUpEdit 下拉框基本操作

    <span style="font-size:14px;"> ArrayList list = new ArrayList(); //遍历皮肤,放到列表中 foreac ...

  2. UML 的基本组成

    UML 是由UML构造块.规则.通用机制三部分组成的.而UML构造块由建模元素(事物).关系和图组成. 建模元素 建模元素是对模型中最具有代表性的成分的抽象.一般情况下,将建模元素分为结构元素.行为元 ...

  3. 使用FileSystemWatcher监视文件变化

    本文转载:http://www.cnblogs.com/zanxiaofeng/archive/2011/01/08/1930583.html FileSystemWatcher基础 属性: Path ...

  4. Qt 学习之路:QStringListModel

    上一章我们已经了解到有关 list.table 和 tree 三个最常用的视图类的便捷类的使用.前面也提到过,由于这些类仅仅是提供方便,功能.实现自然不如真正的 model/view 强大.从本章起, ...

  5. 前端工具之WebPack解密--使用

    接上一篇的内容继续来说,背景篇的内容主要是介绍web前端工具的出现的原因和当前主要JavaScript模块化编程的几种规范!这篇内容主要介绍webpack的初级使用! 注意:目前webpack分为两个 ...

  6. CentOS安装memcached及配置php的memcache扩展

    遇到的问题: 这个问题主要是linux服务器安装memcached服务后,phpinfo信息没有memcache扩展,所以主要是给php安装memcache扩展,教程中是安装memcache扩展,我认 ...

  7. Echarts使用随笔(2)-Echarts中mapType and data

    本文出处:http://blog.csdn.net/chenxiaodan_danny/article/details/39081071  series : [                {   ...

  8. 【转】iOS开发6:UIActionSheet与UIAlertView

    原文: http://my.oschina.net/plumsoft/blog/42763 iOS程序中的Action Sheet就像Windows中的 “确定-取消”对话框一样,用于强制用户进行选择 ...

  9. 使用OC开发phonegp 组件

    使用OC开发phonegp 组件 1. 使用oc 对phonegp中的组件近些开发,首先具体的pgonegp跟nativecode之间的一些优劣就不说了,开发phonegp 对应的组件主要就是使用na ...

  10. Spring中@Autowired注解与自动装配

    1 使用配置文件的方法来完成自动装配我们编写spring 框架的代码时候.一直遵循是这样一个规则:所有在spring中注入的bean 都建议定义成私有的域变量.并且要配套写上 get 和 set方法. ...