SharePoint2013的Callout（调出菜单）概念相关转载

Posted 2020-10-13 gamewyd

在SharePoint 2013中创建并使用Callout

在SharePoint 2013中引入了一个新的客户端框架：Callouts，即当用户点击或者悬浮鼠标的时候，弹出窗口，例如：

或者：

第一个弹出窗是解释说明，第二个包含一些后续的操作。

首先看如何实现第一个解释说明callout。SharePoint提供了一个对象CalloutManager来创建自己的callout，这个对象是在C:\Program Files\Common Files\microsoft shared\Web Server Extensions\15\TEMPLATE\LAYOUTS\Callout.js文件中定义的，使用方法很简单：

首先要定义一个div元素：

 

[javascript] view plain copy print?

1. <div id="CalloutDiv" style="width:100px">Callout</div>  

<div id="CalloutDiv" style="width:100px">Callout</div>

 

如果想和SharePoint一样也有个感叹号的标志，可以在div中嵌入一个span：

 

[javascript] view plain copy print?

1. <div id="CalloutDiv" style="width:100px">  
2.     Callout <span id="ms-pageDescriptionImage"> </span>  
3. </div>  

<div id="CalloutDiv" style="width:100px">
    Callout <span id="ms-pageDescriptionImage"> </span>
</div>

然后就可以使用CalloutManager创建callout：

 

 

[javascript] view plain copy print?

1. var calloutDiv = document.getElementById(‘CalloutDiv‘);   //获取callout div  
2.   
3. var calloutOptions = new CalloutOptions();      //创建一个CalloutOption，用来指定一些参数  
4. calloutOptions.ID = ‘MyCallout‘;                //指定callout的ID  
5. calloutOptions.launchPoint = calloutDiv;        //绑定callout到CalloutDiv上  
6. calloutOptions.content = ‘This is Callout Test Description‘;    //指定callout的内容  
7. calloutOptions.title = ‘This is Callout Test Title‘;            //指定callout的标题  
8. var callout = CalloutManager.createNew(calloutOptions);         //创建callout  

var calloutDiv = document.getElementById(‘CalloutDiv‘);   //获取callout div

var calloutOptions = new CalloutOptions();      //创建一个CalloutOption，用来指定一些参数
calloutOptions.ID = ‘MyCallout‘;                //指定callout的ID
calloutOptions.launchPoint = calloutDiv;        //绑定callout到CalloutDiv上
calloutOptions.content = ‘This is Callout Test Description‘;    //指定callout的内容
calloutOptions.title = ‘This is Callout Test Title‘;            //指定callout的标题
var callout = CalloutManager.createNew(calloutOptions);         //创建callout

以下是在Application Page中使用CalloutManager的例子：

 

 

[javascript] view plain copy print?

1. <asp:Content ID="PageHead" ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">  
2.     <script type="text/javascript">  
3.         SP.SOD.executeFunc(‘callout.js‘, ‘CreateMyCallOut‘, function () {  
4.             var calloutElement = document.getElementById(‘CalloutDiv‘);  
5.   
6.             var calloutOptions = new CalloutOptions();  
7.             calloutOptions.ID = ‘MyCallout‘;  
8.             calloutOptions.launchPoint = calloutElement;  
9.             calloutOptions.content = ‘This is Callout Test Description‘;  
10.             calloutOptions.title = ‘This is Callout Test Title‘;  
11.             var callout = CalloutManager.createNew(calloutOptions);  
12.         });  
13.     </script>  
14. </asp:Content>  
15.   
16. <asp:Content ID="Main" ContentPlaceHolderID="PlaceHolderMain" runat="server">  
17.     <div id="CalloutDiv" style="width:100px">Callout  <span id="ms-pageDescriptionImage"> </span></div>  
18. </asp:Content>  

<asp:Content ID="PageHead" ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
    <script type="text/javascript">
        SP.SOD.executeFunc(‘callout.js‘, ‘CreateMyCallOut‘, function () {
            var calloutElement = document.getElementById(‘CalloutDiv‘);

            var calloutOptions = new CalloutOptions();
            calloutOptions.ID = ‘MyCallout‘;
            calloutOptions.launchPoint = calloutElement;
            calloutOptions.content = ‘This is Callout Test Description‘;
            calloutOptions.title = ‘This is Callout Test Title‘;
            var callout = CalloutManager.createNew(calloutOptions);
        });
    </script>
</asp:Content>

<asp:Content ID="Main" ContentPlaceHolderID="PlaceHolderMain" runat="server">
    <div id="CalloutDiv" style="width:100px">Callout  <span id="ms-pageDescriptionImage"> </span></div>
</asp:Content>

注意需要使用SP.SOD.executeFunc方法，确保callout.js在执行代码之前加载。

 

再看如何实现第二种带有操作的callout。方法也很简单，首次构造一个CalloutActionOptions，指定操作的名字和点击事件，然后使用CalloutActionOptions创建一个CalloutAction，并将其添加到之前创建的callout对象之上，具体代码如下：

 

[javascript] view plain copy print?

1. var calloutAction = new CalloutActionOptions();  
2.            calloutAction.text = ‘Click here‘;  
3.            calloutAction.onClickCallback = function(event, action)  
4.            {  
5.                alert("This is Callout event1");  
6.            };  
7.   
8.            var action = new CalloutAction(calloutAction);  
9.            callout.addAction(action);  

 var calloutAction = new CalloutActionOptions();
            calloutAction.text = ‘Click here‘;
            calloutAction.onClickCallback = function(event, action)
            {
                alert("This is Callout event1");
            };

            var action = new CalloutAction(calloutAction);
            callout.addAction(action);

运行之后的结果：

 

点击CLICK HERE就会弹出alert：