200 likes | 416 Views
DDR & jQuery. More Than Just Hover And Drop Down. Lee Wise / Designer & Developer @10PoundLee. 10 Pound Gorilla Genius Team. DNN Geniuses Since 2003 | Official DNNCon Sponsor. Everything DNN Skins Modules Development Consulting Internet Marketing Web Development Graphic Design
E N D
DDR & jQuery.More Than Just Hover And Drop Down. Lee Wise / Designer & Developer@10PoundLee
10 Pound Gorilla Genius Team DNN Geniuses Since 2003 | Official DNNCon Sponsor • Everything DNN • Skins • Modules • Development • Consulting • Internet Marketing • Web Development • Graphic Design • SEO • Social Media Marketing • Adwords • Online Marketing • Email Marketing
What’s so great about DDR? Simple upgrade for standard SolPartMenu and DNNMenu. Helps with SEO Works on mobile and accessible browsers. Allows server-side alteration or replacement of the menu structure. Can display a subset of pages, e.g. top-level only, children of current page, etc Can be used as either a module or a skin object. Can be templated to produce any HTML you want. Automatically detects and uses Apollo, Ealo and Adequation page localization
Why are templates so great? Create it exactly how you need It can always be unique & different Use many jQuery plug-ins, even if they aren’t originally for DNN and DDR Menu
DDR Templates DDR Menu token templates
What’s Needed Manifest (XML) Template (Tokens TXT) Styles (CSS) Scripts (JS)
Where is all this? Container (action menus only) Skin Portal Root DesktopModules/DDRMenu Application Root
Scripts & Styles This defines the paths of JavaScripts file to import. • This defines the paths of CSS files to import. • If your menu is to be used with a specific skin, it is recommended that combine and minify your styles & scripts into single files and include them in the skin.
Scripts & Styles (Cont) [MANIFEST]/filename: In the folder containing the menu manifest(e.g. ~/Portals/0/skins/MySkin/MyTemplate/filename) [SKIN]/filename: In the current skin folder(e.g. ~/Portals/0/skins/MySkin/filename) [DDRMENU]/filename: In the DDRMenu folder(i.e. ~/DesktopModules/DDRMenu/filename) [PORTAL]/filename: In the portal root(e.g. ~/Portals/0/filename) [DNN]/filename: In the DNN application root(i.e. ~/filename) ~/filename: In the DNN application root.
Client Options Client options are name/value pairs that can be passed as a JSON object to jQuery plug-ins and most other JavaScript menus. They are given to the template as an argument called Options that can then be passed on to the client-side code.
Tokens NODE - A page ID - The page ID TEXT - The page name (i.e. what should normally be displayed in the menu) TITLE - The full page title URL - The page URL ENABLED - Whether the page is enabled SELECTED - Whether the page is selected BREADCRUMB - Whether the page is in the current breadcrumb SEPARATOR - Whether the node is a separator ICON - The URL of the page icon LARGEIMAGE - The URL of the large page icon (DNN 6 only) FIRST - Whether the page is the first in its level LAST - Whether the page is the last in its level ONLY - Whether the page is the only one in its level DEPTH - The depth of the current page in the menu structure (starting at 0)KEYWORDS - The keywords defined for the current page DESCRIPTION - The description of the current page
Token Directives [=TOKEN]Simply outputs the value of the given token. [?TOKEN]...[/?]Only output if the token is defined. This will generally be used as [?NODE]...[/?] to output a section if there are any child nodes, or as [?SELECTED]...[/?] etc to output something only if the current node is selected. You can also use [?!TOKEN]...[/?] (output if token is not defined) and [?TOKEN]...[?ELSE]...[/?]. [*TOKEN]...[/*]Outputs the contents for each occurrence of the given token. In practice this means [*NODE]...[/*] to produce output for each menu node at the current level. [*>TOKEN-MODE]Outputs the contents of a sub-template for each occurrence of the given token. The optional MODE parameter allows you to specify more than one sub-template for a given token. For example, you might define [>NODE-TOP] for top-level menu nodes and [>NODE-SUB] for sub-menus. [>TOKEN-MODE]...[/>]Defines a sub-template (called using the above directive).
Resources http://www.dnnsoftware.com/wiki/Page/DDRMenu-user-guide http://www.dnnsoftware.com/wiki/Page/DDRMenu-token-templates http://www.dnnsoftware.com/wiki/Page/DDRMenu-reference-guide