1 / 20

DDR & jQuery. More Than Just Hover And Drop Down.

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

irish
Download Presentation

DDR & jQuery. More Than Just Hover And Drop Down.

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. DDR & jQuery.More Than Just Hover And Drop Down. Lee Wise / Designer & Developer@10PoundLee

  2. 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

  3. 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

  4. 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

  5. DDR Templates DDR Menu token templates

  6. What’s Needed Manifest (XML) Template (Tokens TXT) Styles (CSS) Scripts (JS)

  7. Where is all this? Container (action menus only) Skin Portal Root DesktopModules/DDRMenu Application Root

  8. Manifest (XML)

  9. 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.

  10. 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.

  11. 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.

  12. 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

  13. 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).

  14. Tokens Template

  15. Tokens Template (Cont)

  16. Options in Skin Object

  17. Options in Manifest

  18. Options in the template

  19. 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

  20. THANKS TO ALL OF OUR GENEROUS SPONSORS!

More Related