WZP Seiten Navigation V1.5

  • Hallo, leider ist das Widget auf 10 Einträge begrenzt, wie kann ich dies erhöhen? Ich habe ein Newssystem gebaut und jede Seite ist ein Jahr, da ich von 2011 bis 2023 schon mehr als 10 Seiten benötige, wäre das toll, wenn es umsetzbar wäre. Dankeschön.

    • Offizieller Beitrag

    Mal sehen ob ich es in naher Zukunft schaffe das Widget zu modernisieren und zu erweitern.


    Du kannst das Widget aber auch erweitern.


    1.

    In der widget.json folgendes erweitern:



    2.

    in der 10-Links.html dieses erweitern:

    Code
    <a <$= system.partial('zplink-expanded.html', 'link1') $>><$= article.value("linktext1") $></a>
    <a <$= system.partial('zplink-expanded.html', 'link2') $>><$= article.value("linktext2") $></a>
    <a <$= system.partial('zplink-expanded.html', 'link3') $>><$= article.value("linktext3") $></a>
    <a <$= system.partial('zplink-expanded.html', 'link4') $>><$= article.value("linktext4") $></a>
    <a <$= system.partial('zplink-expanded.html', 'link5') $>><$= article.value("linktext5") $></a>
    <a <$= system.partial('zplink-expanded.html', 'link6') $>><$= article.value("linktext6") $></a>
    <a <$= system.partial('zplink-expanded.html', 'link7') $>><$= article.value("linktext7") $></a>
    <a <$= system.partial('zplink-expanded.html', 'link8') $>><$= article.value("linktext8") $></a>
    <a <$= system.partial('zplink-expanded.html', 'link9') $>><$= article.value("linktext9") $></a>
    <a <$= system.partial('zplink-expanded.html', 'link10') $>><$= article.value("linktext10") $></a>



    3.

    Extras > Entwickler > Änderungen übernehmen



    In der Gruppe Verweise 6-10 sollte nun ein Scrollbalken erscheinen mit welchem zu die zusätzlichen Links erreichen kannst.

  • Hallo Mario habe leider doch noch ein Problem entdeckt, wenn ich das Menü öffne, steht jetzt 1 bis 10 und dann beginnt das Menü wieder bei 1, also ich kann die Links nicht darstellen im eigentlichen Menü :( Kannst du mir da helfen? Dankeschön.

    • Offizieller Beitrag

    Hallo Mario habe leider doch noch ein Problem entdeckt, wenn ich das Menü öffne, steht jetzt 1 bis 10 und dann beginnt das Menü wieder bei 1, also ich kann die Links nicht darstellen im eigentlichen Menü :( Kannst du mir da helfen? Dankeschön.

    Dazu müsste ich die deine Änderungen sehen. So kann ich auch nur raten.

  • {
    "settings": {
    "category": "html",
    "defaults": {},
    "dialogHeightValue": 450,
    "dialogWidthValue": 370,
    "mainCategory": "other",
    "showCssInputFields": true,
    "showHeadline": false,
    "uiName": "WZP Seiten-Navigation V1.5",
    "useDialogHeight": true,
    "useDialogWidth": true,
    "userCanResizeDialog": false
    },
    "fields": [
    {
    "displayName": "Button",
    "name": "button",
    "popupHeightInPixel": 150,
    "type": "group",
    "defaultValue": "",
    "fields": [
    {
    "displayName": "Text",
    "name": "text-button",
    "type": "text-singleline",
    "defaultValue": "MENÜ"
    },
    {
    "displayName": "Textfarbe",
    "name": "farbe-text-button",
    "type": "color-selection",
    "defaultValue": "#ffffff"
    },
    {
    "displayName": "Hintergrundfarbe Button",
    "name": "hg-farbe-button",
    "type": "color-selection",
    "defaultValue": "#333333"
    },
    {
    "displayName": "Position von Oben px",
    "maximumValue": 2000,
    "name": "pos-button",
    "type": "text-singleline-updown",
    "defaultValue": "150"
    }
    ]
    },
    {
    "displayName": "Fenster",
    "name": "fenster",
    "popupHeightInPixel": 250,
    "type": "group",
    "defaultValue": "",
    "fields": [
    {
    "displayName": "Hintergrundfarbe",
    "name": "fenster-hg-farbe",
    "type": "color-selection",
    "defaultValue": "#f2f2f2"
    },
    {
    "displayName": "Linkfarbe",
    "name": "fenster-link-farbe",
    "type": "color-selection",
    "defaultValue": "#333333"
    },
    {
    "displayName": "Linkfarbe-Hover",
    "name": "fenster-link-farbe-hover",
    "type": "color-selection",
    "defaultValue": "#000000"
    },
    {
    "displayName": "Rahmenfarbe",
    "name": "fenster-border",
    "type": "color-selection",
    "defaultValue": "#333333"
    },
    {
    "displayName": "Fensterbreite px",
    "name": "fenster-breite",
    "type": "text-singleline-updown",
    "defaultValue": "250"
    },
    {
    "displayName": "Textgröße px",
    "name": "fenster-textgroesse",
    "type": "text-singleline-updown",
    "defaultValue": "25"
    },
    {
    "displayName": "Geschwindigkeit ms",
    "name": "geschw",
    "type": "text-singleline-updown",
    "userInfoText": "Die Geschwindigkeit in der das Fenster ausfährt in Millisekunden.",
    "defaultValue": "250"
    }
    ]
    },
    {
    "displayName": "Verweise 1-5",
    "name": "verweise1-5",
    "popupHeightInPixel": 390,
    "type": "group",
    "defaultValue": "",
    "fields": [
    {
    "displayName": "Verweis 1",
    "name": "link1",
    "type": "url-selection",
    "defaultValue": "https://www.zella.de/widget/"
    },
    {
    "displayName": "Linktext 1",
    "name": "linktext1",
    "type": "text-singleline",
    "defaultValue": "Link 1"
    },
    {
    "displayName": "Verweis 2",
    "name": "link2",
    "type": "url-selection",
    "defaultValue": "https://www.zella.de/widget/"
    },
    {
    "displayName": "Linktext 2",
    "name": "linktext2",
    "type": "text-singleline",
    "defaultValue": "Link 2"
    },
    {
    "displayName": "Verweis 3",
    "name": "link3",
    "type": "url-selection",
    "defaultValue": "https://www.zella.de/widget/"
    },
    {
    "displayName": "Linktext 3",
    "name": "linktext3",
    "type": "text-singleline",
    "defaultValue": "Link 3"
    },
    {
    "displayName": "Verweis 4",
    "name": "link4",
    "type": "url-selection",
    "defaultValue": "https://www.zella.de/widget/"
    },
    {
    "displayName": "Linktext 4",
    "name": "linktext4",
    "type": "text-singleline",
    "defaultValue": "Link 4"
    },
    {
    "displayName": "Verweis 5",
    "name": "link5",
    "type": "url-selection",
    "defaultValue": "https://www.zella.de/widget/"
    },
    {
    "displayName": "Linktext 5",
    "name": "linktext5",
    "type": "text-singleline",
    "defaultValue": "Link 5"
    }
    ]
    },
    {
    "displayName": "Verweise 6-10",
    "name": "verweise6-10",
    "popupHeightInPixel": 390,
    "type": "group",
    "defaultValue": "",
    "fields": [
    {
    "displayName": "Verweis 6",
    "name": "link6",
    "type": "url-selection",
    "defaultValue": "https://www.zella.de/widget/"
    },
    {
    "displayName": "Linktext 6",
    "name": "linktext6",
    "type": "text-singleline",
    "defaultValue": "Link 6"
    },
    {
    "displayName": "Verweis 7",
    "name": "link7",
    "type": "url-selection",
    "defaultValue": "https://www.zella.de/widget/"
    },
    {
    "displayName": "Linktext 7",
    "name": "linktext7",
    "type": "text-singleline",
    "defaultValue": "Link 7"
    },
    {
    "displayName": "Verweis 8",
    "name": "link8",
    "type": "url-selection",
    "defaultValue": "https://www.zella.de/widget/"
    },
    {
    "displayName": "Linktext 8",
    "name": "linktext8",
    "type": "text-singleline",
    "defaultValue": "Link 8"
    },
    {
    "displayName": "Verweis 9",
    "name": "link9",
    "type": "url-selection",
    "defaultValue": "https://www.zella.de/widget/"
    },
    {
    "displayName": "Linktext 9",
    "name": "linktext9",
    "type": "text-singleline",
    "defaultValue": "Link 9"
    },
    {
    "displayName": "Verweis 10",
    "name": "link10",
    "type": "url-selection",
    "defaultValue": "https://www.zella.de/widget/"
    },
    {
    "displayName": "Linktext 10",
    "name": "linktext10",
    "type": "text-singleline",
    "defaultValue": "Link 10"
    }
    ]
    },
    {
    "displayName": "Verweise 11-15",
    "name": "verweise11-15",
    "popupHeightInPixel": 390,
    "type": "group",
    "defaultValue": "",
    "fields": [
    {
    "displayName": "Verweis 11",
    "name": "link11",
    "type": "url-selection",
    "defaultValue": "https://www.zella.de/widget/"
    },
    {
    "displayName": "Linktext 11",
    "name": "linktext11",
    "type": "text-singleline",
    "defaultValue": "Link 11"
    },
    {
    "displayName": "Verweis 12",
    "name": "link12",
    "type": "url-selection",
    "defaultValue": "https://www.zella.de/widget/"
    },
    {
    "displayName": "Linktext 12",
    "name": "linktext12",
    "type": "text-singleline",
    "defaultValue": "Link 12"
    },
    {
    "displayName": "Verweis 13",
    "name": "link13",
    "type": "url-selection",
    "defaultValue": "https://www.zella.de/widget/"
    },
    {
    "displayName": "Linktext 13",
    "name": "linktext8",
    "type": "text-singleline",
    "defaultValue": "Link 13"
    },
    {
    "displayName": "Verweis 14",
    "name": "link14",
    "type": "url-selection",
    "defaultValue": "https://www.zella.de/widget/"
    },
    {
    "displayName": "Linktext 14",
    "name": "linktext14",
    "type": "text-singleline",
    "defaultValue": "Link 14"
    },
    {
    "displayName": "Verweis 15",
    "name": "link15",
    "type": "url-selection",
    "defaultValue": "https://www.zella.de/widget/"
    },
    {
    "displayName": "Linktext 15",
    "name": "linktext15",
    "type": "text-singleline",
    "defaultValue": "Link 15"
    }
    ]
    },
    {
    "displayName": "Anzahl Verweise",
    "name": "verweise-anzahl",
    "type": "itemtemplate-selection",
    "width": 135,
    "defaultValue": ""
    },
    {
    "displayName": "Mobile",
    "name": "mobile",
    "popupHeightInPixel": 230,
    "type": "group",
    "defaultValue": "",
    "fields": [
    {
    "displayName": "Button drehen ab px",
    "maximumValue": 3000,
    "name": "button-drehen",
    "type": "text-singleline-updown",
    "userInfoText": "Ist die Fensterbreite unter diesem Wert wird der Button gedreht damit er nicht den Inhalt der Seite verdeckt.",
    "defaultValue": "890"
    },
    {
    "displayName": "Button Position von Oben px",
    "name": "mobile-pos-button",
    "type": "text-singleline-updown",
    "userInfoText": "Hier kann ab der oben angegebenen Breite des Browserfensters der Button für Mobile Geräte anders positioniert werden.",
    "defaultValue": "80"
    },
    {
    "displayName": "linie1",
    "name": "line1",
    "type": "line",
    "defaultValue": ""
    },
    {
    "displayName": "Fenster ab px höhe",
    "name": "fenster-ab-px",
    "type": "text-singleline-updown",
    "userInfoText": "Wird diese Höhe des Browserfensters unterschritten greifen die unteren Werte.\r\nSomit kann man einen Scrollbalken bei kleineren Bildschirmen vermeiden.\r\n",
    "defaultValue": "720"
    },
    {
    "displayName": "Innenabstand Oben",
    "name": "mobile-abstand-oben",
    "type": "text-singleline-updown",
    "defaultValue": "13"
    },
    {
    "displayName": "Schriftgröße",
    "name": "mobile-schriftgroesse",
    "type": "text-singleline-updown",
    "defaultValue": "16"
    }
    ]
    },
    {
    "height": 3,
    "name": "signatur",
    "text": "


    \r\n\r\nWidget Zeta Producer
    \r\n Support\r\n
    ",
    "type": "infotext",
    "defaultValue": ""
    }
    ],
    "assets": [
    {
    "fileName": "seiten-navi.css",
    "mode": "Bundle",
    "order": 50
    }
    ],
    "itemTemplates": [
    {
    "fileName": "10-Links.html"
    },
    {
    "fileName": "9-Links.html"
    },
    {
    "fileName": "8-Links.html"
    },
    {
    "fileName": "7-Links.html"
    },
    {
    "fileName": "6-Links.html"
    },
    {
    "fileName": "5-Links.html"
    },
    {
    "fileName": "4-Links.html"
    },
    {
    "fileName": "3-Links.html"
    }
    ]
    }

  • 10-Links.HTML


    <$

    var cssClass = article.cssClass || ""; var inlineCss = article.inlineCss || "";


    if ( cssClass ) {cssClass = "sidenav " + cssClass;}

    else {cssClass = "sidenav";}

    if ( inlineCss ) {inlineCss = ' style="' + inlineCss + '"';}


    var FeHgCol = article.value("fenster-hg-farbe","");

    var FeBordCol = article.value("fenster-border","");

    var GeschwMS = article.value("geschw","");


    var cssselector = '' + '.sidenav ';

    var headstyle = "";


    if ( FeHgCol !== "" ){headstyle += cssselector + "{background-color: " + FeHgCol + " !important;}\n";}

    if ( FeBordCol !== "" ){headstyle += cssselector + "{border-left: 1px solid " + FeBordCol + " !important;}\n";}

    if ( GeschwMS !== "" ){headstyle += cssselector + "{transition: " + GeschwMS + "ms !important;}\n";}


    system.addHtmlHeadElement("<st" + "yle>\n" + headstyle + "\n</st" + "yle>");

    $>

    <$

    var cssClass = article.cssClass || ""; var inlineCss = article.inlineCss || "";


    if ( cssClass ) {cssClass = "sidenav a " + cssClass;}

    else {cssClass = "sidenav a";}

    if ( inlineCss ) {inlineCss = ' style="' + inlineCss + '"';}


    var FeTextGr = article.value("fenster-textgroesse","");

    var FeLinkCol = article.value("fenster-link-farbe","");


    var cssselector = '' + '.sidenav a ';

    var headstyle = "";


    if ( FeTextGr !== "" ){headstyle += cssselector + "{font-size: " + FeTextGr + "px !important;}\n";}

    if ( FeLinkCol !== "" ){headstyle += cssselector + "{color: " + FeLinkCol + " !important;}\n";}


    system.addHtmlHeadElement("<st" + "yle>\n" + headstyle + "\n</st" + "yle>");

    $>

    <$

    var cssClass = article.cssClass || ""; var inlineCss = article.inlineCss || "";


    if ( cssClass ) {cssClass = "sidenav a:hover " + cssClass;}

    else {cssClass = "sidenav a:hover";}

    if ( inlineCss ) {inlineCss = ' style="' + inlineCss + '"';}


    var FeLinkColHov = article.value("fenster-link-farbe-hover","");


    var cssselector = '' + '.sidenav a:hover ';

    var headstyle = "";


    if ( FeLinkColHov !== "" ){headstyle += cssselector + "{color: " + FeLinkColHov + " !important;}\n";}


    system.addHtmlHeadElement("<st" + "yle>\n" + headstyle + "\n</st" + "yle>");

    $>

    <$

    var cssClass = article.cssClass || ""; var inlineCss = article.inlineCss || "";


    if ( cssClass ) {cssClass = "button-sidenav " + cssClass;}

    else {cssClass = "button-sidenav";}

    if ( inlineCss ) {inlineCss = ' style="' + inlineCss + '"';}


    var ButCol = article.value("farbe-text-button","");

    var ButHgCol = article.value("hg-farbe-button","");

    var ButTop = article.value("pos-button","");


    var cssselector = '' + '#button-sidenav ';

    var headstyle = "";


    if ( ButCol !== "" ){headstyle += cssselector + "{color: " + ButCol + " !important;}\n";}

    if ( ButHgCol !== "" ){headstyle += cssselector + "{background-color: " + ButHgCol + " !important;}\n";}

    if ( ButTop !== "" ){headstyle += cssselector + "{top: " + ButTop + "px !important;}\n";}


    system.addHtmlHeadElement("<st" + "yle>\n" + headstyle + "\n</st" + "yle>");

    $>

    <$

    var Breakpoint = article.value("button-drehen","");

    var MobPosBut = article.value("mobile-pos-button","");

    var headstyle = '@media (max-width: ' + Breakpoint + 'px) {';

    headstyle += '#button-sidenav {';


    headstyle += 'writing-mode:' + 'vertical-rl;';

    headstyle += 'right:' + '-14px;';

    headstyle += 'padding:' + '5px 18px 5px 4px;';

    headstyle += 'top: ' + MobPosBut + 'px !important;';

    headstyle += 'margin-top:' + '70px;';

    headstyle += '}';

    headstyle += '}';

    system.addHtmlHeadElement("<st" + "yle>\n" + headstyle + "\n</st" + "yle>");

    $>

    <$

    var Breakpoint = article.value("button-drehen","");

    var headstyle = '@media (max-width: ' + Breakpoint + 'px) {';

    headstyle += '#button-sidenav:hover {';


    headstyle += 'right:' + '-4px;';

    headstyle += '}';

    headstyle += '}';

    system.addHtmlHeadElement("<st" + "yle>\n" + headstyle + "\n</st" + "yle>");

    $>

    <$

    var FeMobPx = article.value("fenster-ab-px","");

    var AbstO = article.value("mobile-abstand-oben","");

    var headstyle = '@media (max-height: ' + FeMobPx + 'px) {';

    headstyle += '.sidenav {';


    headstyle += 'padding-top: ' + AbstO + 'px !important;';

    headstyle += '}';

    headstyle += '}';

    system.addHtmlHeadElement("<st" + "yle>\n" + headstyle + "\n</st" + "yle>");

    $>

    <$

    var FeMobPx = article.value("fenster-ab-px","");

    var MobSize = article.value("mobile-schriftgroesse","");

    var headstyle = '@media (max-height: ' + FeMobPx + 'px) {';

    headstyle += '.sidenav a {';


    headstyle += 'font-size: ' + MobSize + 'px !important;';

    headstyle += '}';

    headstyle += '}';

    system.addHtmlHeadElement("<st" + "yle>\n" + headstyle + "\n</st" + "yle>");

    $>


    <!--

    ***********************************************************************************

    * Widget ZP / Widgets fuer Zeta Producer

    * <$= article.widgetName $>

    * Mario Gross / widget-zp.de

    ***********************************************************************************

    -->


    <$=system.partial("article-begin.html")$>


    <div id="mySidenav" class="sidenav">

    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>


    <a <$= system.partial('zplink-expanded.html', 'link1') $>><$= article.value("linktext1") $></a>

    <a <$= system.partial('zplink-expanded.html', 'link2') $>><$= article.value("linktext2") $></a>

    <a <$= system.partial('zplink-expanded.html', 'link3') $>><$= article.value("linktext3") $></a>

    <a <$= system.partial('zplink-expanded.html', 'link4') $>><$= article.value("linktext4") $></a>

    <a <$= system.partial('zplink-expanded.html', 'link5') $>><$= article.value("linktext5") $></a>

    <a <$= system.partial('zplink-expanded.html', 'link6') $>><$= article.value("linktext6") $></a>

    <a <$= system.partial('zplink-expanded.html', 'link7') $>><$= article.value("linktext7") $></a>

    <a <$= system.partial('zplink-expanded.html', 'link8') $>><$= article.value("linktext8") $></a>

    <a <$= system.partial('zplink-expanded.html', 'link9') $>><$= article.value("linktext9") $></a>

    <a <$= system.partial('zplink-expanded.html', 'link10') $>><$= article.value("linktext10") $></a>

    <a <$= system.partial('zplink-expanded.html', 'link11') $>><$= article.value("linktext11") $></a>

    <a <$= system.partial('zplink-expanded.html', 'link12') $>><$= article.value("linktext12") $></a>

    <a <$= system.partial('zplink-expanded.html', 'link13') $>><$= article.value("linktext13") $></a>

    <a <$= system.partial('zplink-expanded.html', 'link14') $>><$= article.value("linktext14") $></a>

    <a <$= system.partial('zplink-expanded.html', 'link15') $>><$= article.value("linktext15") $></a>

    </div>


    <div id="button-sidenav" onclick="openNav()">

    <span>☰ <$= article.value("text-button") $></span>

    </div>


    <script>

    function openNav() {

    document.getElementById("mySidenav").style.width = "<$= article.value("fenster-breite") $>px";

    }

    function closeNav() {

    document.getElementById("mySidenav").style.width = "0";

    }

    </script>


    <!--############ ANFANG HINWEISFENSTER FUER LIVEVORSCHAU -->

    <$ if ( system.preview ) { $>


    <!-- Preview-Code nur für internen Vorschau -->

    <div style="background-color:#d7daee; padding:15px; border-radius: 10px; box-shadow: inset 0px 0px 20px rgba(0, 51, 255, 0.99);">

    <img src="https://www.zella.de/widget/bilder/wzp.png" style="float:left; margin-right:33px;">

    <p style="font-size: 1.2em; font-weight: bold; color:#0371df">Seiten-Navigation</p>

    <p style="color:#0371df">Hier k&#246;nnen Sie das Widget &#246;ffnen oder l&#246;schen. Dieser Hinweis wird nur in der internen Vorschau angezeigt.</p>

    </div>


    <$ } else { $>

    <$ } $>

    <!--########## ENDE HINWEISFENSTER FUER LIVEVORSCHAU -->

    <$=system.partial("article-end.html")$>