dnnPreview jQuery Plugin

Return to previous page

  • 4/7/2015
  • 1130 Views

Comments

1130 Views

dnnPreview jQuery Plugin

Last updated 6 years ago

Comments

Common

(Enter the content of this article below)

Advanced

 
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
Contents
No sections defined

DNN Digest is our monthly email newsletter. It highlights news and content from around the DNN ecosystem, such as new modules and themes, messages from leadership, blog posts and notable tweets. Keep your finger on the pulse of the ecosystem by subscribing.  


Copyright 2017 by DNN Corp Terms of Use Privacy
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out