SharePoint2013的Callout(調出菜單)概念相關轉載
阿新 • • 發佈:2017-11-02
包含 ref highlight ont href ack 菜單 nts ica
在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?
- <div id="CalloutDiv" style="width:100px">Callout</div>
<div id="CalloutDiv" style="width:100px">Callout</div>
如果想和SharePoint一樣也有個感嘆號的標誌,可以在div中嵌入一個span:
[javascript] view plain copy print?
- <div id="CalloutDiv" style="width:100px">
- Callout <span id="ms-pageDescriptionImage"> </span>
- </div>
<div id="CalloutDiv" style="width:100px"> Callout <span id="ms-pageDescriptionImage"> </span> </div>
然後就可以使用CalloutManager創建callout:
[javascript] view plain copy print?
- 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
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?
- <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>
<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?
- 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);
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(調出菜單)概念相關轉載