Processwire Module: MarkupSimpleNavigation: Unterschied zwischen den Versionen

Aus Wikizone
Wechseln zu: Navigation, Suche
Zeile 7: Zeile 7:
 
// needs Plugin MarkupSimpleNavigation
 
// needs Plugin MarkupSimpleNavigation
 
// use $treeMenu = $modules->get("MarkupSimpleNavigation");
 
// use $treeMenu = $modules->get("MarkupSimpleNavigation");
// load module in _init.php or here...
+
// load module in _init.php or heren like...
 
$treeMenu = $modules->get("MarkupSimpleNavigation");
 
$treeMenu = $modules->get("MarkupSimpleNavigation");
 
$options = array(
 
$options = array(
Zeile 17: Zeile 17:
 
     'max_levels' => null,
 
     'max_levels' => null,
 
     'firstlast' => false,
 
     'firstlast' => false,
     'collapsed' => false,
+
     'collapsed' => true,
 
     'show_root' => true,
 
     'show_root' => true,
 
     'selector' => '',
 
     'selector' => '',

Version vom 25. April 2017, 06:34 Uhr

MarkupSimpleNavigation

Bekanntestes Navigation Modul http://modules.processwire.com/modules/markup-simple-navigation/

Quickstart

nav-simpleTreeMenu.inc

<?php namespace ProcessWire;
// needs Plugin MarkupSimpleNavigation
// use $treeMenu = $modules->get("MarkupSimpleNavigation");
// load module in _init.php or heren like...
$treeMenu = $modules->get("MarkupSimpleNavigation");
$options = array(
    'parent_class' => 'parent',
    'current_class' => 'current',
    'has_children_class' => 'has_children',
    'levels' => true,
    'levels_prefix' => 'level-',
    'max_levels' => null,
    'firstlast' => false,
    'collapsed' => true,
    'show_root' => true,
    'selector' => '',
    'selector_field' => 'nav_selector',
    'outer_tpl' => '<ul class="sf-menu">||</ul>',
    'inner_tpl' => '<ul>||</ul>',
    'list_tpl' => '<li%s>||</li>',
    'list_field_class' => '',
    'item_tpl' => '<a href="{url}">{title}</a>',
    'item_current_tpl' => '<a href="{url}">{title}</a>',
    'xtemplates' => '',
    'xitem_tpl' => '<a href="{url}">{title}</a>',
    'xitem_current_tpl' => '<span>{title}</span>',
    'date_format' => 'd.m.Y',
    'code_formatting' => false,
    'debug' => false
);
?>

<!-- navbar 1st level-->
<div class="nav">
  <nav>
<?php

echo $treeMenu->render($options);

?>
  </nav>
</div>

Nur einen Level rendern

Top root menu

// default root is "/"
echo $treeMenu->render(array("max_levels" => 1));

Submenu

$root = $page->rootParent; // top root parent of current page
echo $treeMenu->render(array("max_levels" => 1), null, $root);

Funktionen und Anwendung

render($options, $page, $rootPage)
  • $options, is an array of options
  • $page, is a page object for the current page
  • $rootPage, is a page object for the root of the menu

Default options

$options = array(
    'parent_class' => 'parent',
    'current_class' => 'current',
    'has_children_class' => 'has_children',
    'levels' => true,
    'levels_prefix' => 'level-',
    'max_levels' => null,
    'firstlast' => false,
    'collapsed' => false,
    'show_root' => false,
    'selector' => '',
    'selector_field' => 'nav_selector',
    'outer_tpl' => '<ul>||</ul>',
    'inner_tpl' => '<ul>||</ul>',
    'list_tpl' => '<li%s>||</li>',
    'list_field_class' => '',
    'item_tpl' => '<a href="{url}">{title}</a>',
    'item_current_tpl' => '<a href="{url}">{title}</a>',
    'xtemplates' => '',
    'xitem_tpl' => '<a href="{url}">{title}</a>',
    'xitem_current_tpl' => '<span>{title}</span>',
    'date_format' => 'Y/m/d',
    'code_formatting' => false,
    'debug' => false
);
echo $treeMenu->render($options);

Same with comments

$options = array(
    'parent_class' => 'parent',
    // overwrite class name for current parent levels

    'current_class' => 'current',
    // overwrite current class

    'has_children_class' => 'has_children',
    // overwrite class name for entries with children

    'levels' => true,
    // wether to output "level-1, level-2, ..." as css class in links

    'levels_prefix' => 'level-',
    // prefix string that will be used for level class

    'max_levels' => null,
    // set the max level rendered

    'firstlast' => false,
    // puts last,first class to link items

    'collapsed' => false,
    // if you want to auto-collapse the tree you set this to true

    'show_root' => false,
    // set this to true if you want to rootPage to get prepended to the menu

    'selector' => '',
    // define custom PW selector, you may sanitize values from user input

    'selector_field' => 'nav_selector',
    // string (default 'nav_selector') define custom PW selector by using a property or field on a page. Use this setting if you want to overwrite the default nav_selector

    'outer_tpl' => '<ul>||</ul>',
    // template string for the outer most wrapper. || will contain entries

    'inner_tpl' => '<ul>||</ul>',
    // template string for inner wrappers. || will contain entries

    'list_tpl' => '<li%s>||</li>',
    // template string for the items. || will contain entries, %s will replaced with class="..." string

    'list_field_class' => '', // string (default '') add custom classes to each list_tpl using tags like {field} i.e. {template} p_{id}

    'item_tpl' => '<a href="{url}">{title}</a>',
    // template string for the inner items. Use {anyfield} and {url}, i.e. {headline|title}, if field is of type image it will return url to image (first image if multiple)

    'item_current_tpl' => '<a href="{url}">{title}</a>',
    // template string for the active inner items.

    'xtemplates' => '',
    // specify one or more templates separated with a pipe | to use the xitem_tpl and xitem_current_tpl markup

    'xitem_tpl' => '<a href="{url}">{title}</a>',
    // same as 'item_tpl' but for xtemplates pages, can be used to define placeholders

    'xitem_current_tpl' => '<span>{title}</span>',
    // same as 'item_current_tpl' but for xtemplates pages

    'date_format' => 'Y/m/d',
    // default date formatting for Datetime fields and native created/modified

    'code_formatting' => false,
    // enable or disable code indentations and newslines in markup output

    'debug' => false,
    // show some inline information about rendertime and selectors used as html comments

);
echo $treeMenu->render($options);