在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元素：

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

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

如果想和SharePoint一樣也有個感嘆號的標誌，可以在div中嵌入一個span：

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：

1. var calloutDiv = document.getElementById(‘CalloutDiv‘); //獲取callout div
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的例子：

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‘);
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>
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對象之上，具體代碼如下：

1. var calloutAction = new CalloutActionOptions();
2. calloutAction.text = ‘Click here‘;
3. calloutAction.onClickCallback = function(event, action)
4. {
5. alert("This is Callout event1");
6. };
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：

SharePoint2013的Callout（調出菜單）概念相關轉載