SharePoint 2010 Pop-Up Dialogs SharePoint 2010 弹出对话框

SharePoint 2010 Pop-Up Dialogs SharePoint 2010 弹出对话框

        SharePoint 2010 使得往你的站点加入对话框内容变得出乎意料的简单。

内置的功能同意你从站点不论什么地方抽取内容，然后显示在模态对话框中。出如今页面的前端。当它涉及到现代Web技术的时候，这就是非常标准的东东啦，可是易用性是真正使SharePoint对话框变得如此引人的主要原因。本文中，我们将探讨SharePoint 2010 平台带来的对话框功能。而且我们会发现自己定义内容的新方法。来给你的SharePoint门户带来独特的新奇外观体验。

SharePoint 2010 中的对话框

        虽然（可能）你已经选择不去理解SharePoint 2010 中的对话框，他们也已经在整个SharePoint平台上应用了，比方页面、列表和库。比如，每一次你创建新页面。你将看到页面上出现的对话框。差点儿就是这样子的。

        当你创建和编辑列表项目时，你将看到类似的对话框，以及在站点集中创建的不论什么文档库中也是如此。这些弹出窗口和视图时SharePoint 2010 平台总体的一部分。

工作原理

        SharePoint 2010 对话框很的简单。它们基本上是一个JavaScript弹出对话框，当中包括一个iframe从站点其它地方请求内容。这个内容能够是SharePoint内部不论什么东东，甚至是公布页面或者你自己创建的自己定义应用程序页面。

        假设你以前在SharePoint 2010中创建自己的母版页，当你尝试着应用你的新母版页到站点时，面对两个选项。你可能已经迷惑了。

SharePoint 2010 在站点模板页和系统母版页之间分离了你的母版页授权。

基本上。你的站点模板页应用到页面、列表和库中。而系统母版页应用到其它地方（设置、权限、管理及对话框等）。当你在SharePoint 2010 中调用弹出对话框时。内容被请求并使用系统母版页显示。假设你想開始自己定义你的对话框在SharePoint 2010中出现的方式，首先你要设置自己定义的母版页格式也作为系统母版页起作用。

系统母版页

        假设你想最优化母版页来使用对话框。最重要的事就是设计在对话框时图中哪些页面元素应该隐藏掉。假设你打开微软的v4.master文件。你可能注意到class="s4-notdlg"出如今文件里非常多地方。这个s4-notdlg类名应该应用到你想要在对话框视图中隐藏的东东上面。这意味着标题、页脚、导航、側边栏等等。基本上，你会想要加入这个CSS类到全部的东东上。除了你设计的主要内容区域。

当对话框显示时，不论什么具有s4-notdlg CSS类的东东都会被自己主动隐藏（缩减）掉。

使用样式

        你的设计非常可能有一个固定的宽度，或者至少有个最小显示宽度。对话框非常小，所以宽度和大小格式不一定在对话框视图中完美呈现。

幸运的是，不论什么时候你的母版页被用来显示对话框内容，html元素获得特殊的CSS类名ms-dialog。你能够使用它覆盖不论什么之前设置的样式，使得它在普通和对话框视图中正确显示。比如，你可能有一个div元素（ID为wrapper）在你的设计中。在附加的CSS文件里，你能够给这个元素加入样式（当它出如今普通和对话框时图中时）

#wrapper {
  width: 960px;
  margin: auto;
}
html.ms-dialog #wrapper {
  width: 100%;
}

上面这个样例中。wraper元素将切换为自己主动宽度。出如今SharePoint 2010 对话框中。

你可能不得不使用这个技术处理列、背景色以及其它出如今对话框中的设计元素。

使用这个功能

既然你的母版页最优化为了对话框使用，如今是时候从你的SharePoint站点中抽取一些内容出来了。创建一个Popup链接很easy。在不论什么页面或者内容编辑器WebPart中，创建一个链接请求一个对话框页面：

<a href="javascript:OpenPopUpPage('/path/to/content.aspx');">Show Me the Pop-Up!</a>

你能够使用OpenPopUpPage函数以对话框模式查看不论什么内容。也有一个更加灵活的函数OpenWebPage，同意你指定对话框宽度和高度。

使用这些函数配合自己定义系统母版页，你在SharePoint中对话框显示的东东就变得限制越来越来越少。

渐进增强

我非常关心可訪问性，并且我真的不喜欢有人要求我在链接元素中加入javascript:。

没有JavaScript的用户不能訪问这个链接。

更重要的是，像Google或Bing的搜索引擎不能跟踪你网站内的内容关联。这可能是个非常大的问题。并且因此。我也不会推荐你在SharePoint 网站中对话框里使用以上的方法。

        一个更好的方法涉及到一个在渐进增强方面的练习。渐进增强要求你给用户创建解决方式时，要在浏览器中启用尽可能少的功能。这意味着创建简单的HTML链接指向真正的网页内容。

通过创建简单的HTML链接，你能够保证每一个人（包含搜索引擎）能够辨认和使用你网站中的链接。对于其它用户。如启用JavaScript的用户。你能够使用弹出对话框来更快的显示内容，增强他们的体验。

        这在SharePoint 2010中很easy，仅仅是由于我们自己定义的母版页已经被格式化来显示正常和对话框时图的内容了。我们能够轻松引导用户到内容的普通视图。而且为网站中启用脚本的用户覆盖那个功能。

SharePoint和弹出框整合

        在真正的渐进增强样式中。我已经创建了一个简单的jQuery函数，将网站中不论什么普通链接转化为弹出对话框链接，仅仅是通过关联一个CSS类。

加入这个功能到你的SharePoint 2010 网站中：

1. 确保jQuery script library被附加到母版页或页面布局中。

2. 加入以下jQuery函数到附加的JavaScript文件里：

(function($){
  $.fn.sharePop = function(){
    if(typeof OpenPopUpPage == 'function'){
      return this.each(function(i){
        if($(this).attr('href') != null){
          $(this).click(function(e){
            e.preventDefault();
            OpenPopUpPage($(this).attr('href'));
          });
        }
      });
    }
    else{
      return false;
    }
  };
})(jQuery);

3. 加入一个独特的CSS类名到要显示对话框视图的链接：

<a href="/path/to/content.aspx" class="dialog-pop">View Content</a>

4. 执行脚本（加入到附加的JavaScript文件里）：

$(document).ready(function(){
	$('.dialog-pop').sharePop();
});

我的脚本将覆盖这些链接的默认功能，强制它们显示SharePoint 2010 对话框视图。那些没有使用JavaScript的用户也能够訪问到内容（使用普通视图）。

对话框样式

最后一个要考虑的事情就是对话框的样式了。对话框HTML给你了很多CSS类，同意你全然自己定义对话框窗体的外观，而且甚至是后面阴影区域的外观。以下图片显示了SharePoint对话框的HTML。而且我也高光了一些重要的CSS类，你会用到它们改变窗体的外观的。

        使用这些类，你能够创建对话框一个独特的外观。这里是一个黑色主题对话框的样例。

.ms-dlgOverlay {
  background-color: #333;
}
.ms-dlgContent {
  border: 0;
}
.ms-dlgBorder {
  border: 1px solid #333;
}
.ms-dlgTitle {
  background-color: #333;
}
.ms-dlgTitleText {
  display: block;
  font-weight: bold;
  font-size: 13px;
  padding: 7px;
}

加入CSS到附加的CSS样式表后，我们获得一个全然自己定义的对话框外观。伴随着自己定义内容出如今对话框内部。

        SharePoint 2010 对话框还带来了很多元素。让全部这些融合在一起须要练习和决心。

假设你能做一次，你将发现这些自己定义对话框是加入到你SharePoint 2010 设计中的一个简单、高速、惊人的工具。

        原文链接：http://kyleschaeffer.com/sharepoint/sharepoint-2010-pop-up-dialogs/