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.
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,
noSelectionMessage: 'Please select a preview option.',
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.
<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">
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