This article is for a specific plugin. Please be sure to read the Introduction and Overview to jQuery Plugins which provides an introduction to the plugins.

dnnPreview

This plugin is more specialized than the others – in that it encapsulates specific functionality for previewing skins and containers. It could however be used by a third party to preview skins or containers, so it is included here.

It operates on an html block that could consist of a dropdown for a skin, one for a container, and a preview link. It will handle parsing the drop down and building the appropriate URL to open in a new window to show to the user.
This is used in four places: module settings, page settings, site settings and host settings. The first two open the preview on the current page – whereas the second two open the preview on the home page.

Available Options and their Defaults

baseUrl: window.location.protocol + "//" + window.location.host + window.location.pathname,

linkSelector: 'a.dnnSecondaryAction',

skinSelector: '',

containerSelector: '',

noSelectionMessage: 'Please select a preview option.',

alertOkText: 'Ok',

alertCloseText: 'close'

Usage Example

This example demonstrates using the plugin to preview a container. If you wanted to preview a skin as well, you would populate the "skinSelector" setting as well when initializing the plugin, making sure the selector resolves to the appropriate element which contains the skin values.

HTML:

<div class="dnnFormItem dnnContainerPreview">

  <dnn:label id="plModuleContainer" runat="server" controlname="ctlModuleContainer" />

  <asp:DropDownList ID="moduleContainerCombo" runat="server" DataTextField="Key" DataValueField="Value" />

  <a href="#" class="dnnSecondaryAction">

    <%=LocalizeString("ContainerPreview")%></a>

</div>

JavaScript:

$('.dnnContainerPreview').dnnPreview({

  containerSelector: 'select',

  baseUrl: '<%= DotNetNuke.Common.Globals.NavigateURL(this.TabId) %>',

  noSelectionMessage: '<%= LocalizeString("PreviewNoSelectionMessage.Text") %>',

  alertCloseText: '<%= Localization.GetString("Close.Text", Localization.SharedResourceFile)%>',

  alertOkText: '<%= Localization.GetString("Ok.Text", Localization.SharedResourceFile)%>'

});

Other jQuery Plugins

• dnnAlert - displays a notice in a modal dialog (uses jQuery UI)
• dnnConfirm - displays an "are you sure?" confirmation in a modal dialog (uses jQuery UI)
• dnnPanels - displays content areas in regions that are expandable and collapsible
• dnnExpandAll - works with panels to expand or collapse all regions
• dnnTabs - Displays content areas in a tabbed format (uses jQuery UI)
• dnnTooltip - Provides help/info tooltip functionality