Bootstrap 4.0 fomenu es tab-ok

Bootstrap 4.0 fomenu es tab-ok
2018-10-10T22:37:09+02:00
2018-10-21T23:34:25+02:00
2022-10-15T21:41:06+02:00
hermit
Sziasztok,

bootstrap 4.0-ban lehet, es ha igen hogyan olyat csinalni, hogy a kulonbozo (al)menuk kulonbozo tab-okon jelenjenek meg (eddig megvan), de a kezdooldal betoltesekor csak a fomenut toltse be, es minden almenu kivalasztasakor frissitse a mogotte levo tartalmat?
Jelenleg ugy mukodik, hogy indulaskor betolti az osszes include-olt almenut tartalmazo fajlt is, viszont ha tortenik egy adatbazisba iras es a listazo menure megyek, akkor ezt az utolso rekordot meg nem mutatja, hiszem mar elotte lekerdezte a mysql-t, csak az oldalfrissites utan latszik.

Kosz!
Mutasd a teljes hozzászólást!
Az oldal tartalmának változ(ta)ása egy ajax-os megoldás esetében nem függ attól, hogy bootstrap-os az oldalad. Kell lenni egy blokknak a BODY-ban, melybe az ID-azonosító alapján az ajax-válasz után megjelenik a különböző menüpontokhoz tartozó tartalom. Maga a menü a befogadó fájl része állandóan, a menülinkek-re történő tartalomváltás pedig több megoldású is lehet (lásd pl. itt). Az ajax-al hívott *.php fájlban pedig a megjelenítendő html kódot akár DB-ből is veheted...
Természetesen mindezeknek utána kell nézni és kódolgatni, próbálgatni, tanulni kell ahhoz, hogy megold...
Megj: Ha az első linkemen végigpróbálod az összes menüt és figyeled a behívott fájlt, látni fogod, hogy lesz olyan melynek php a kiterjesztése...
Mutasd a teljes hozzászólást!

  • A problémádnak a "...a kulonbozo (al)menuk kulonbozo tab-okon jelenjenek meg..." részén kívül kb. semmi köze nincs a bootstrap-hez.
    Mutasd a teljes hozzászólást!
  • Szia,

    kosz a valaszt, igy oldottam meg. A menunek van egy id-ja:
    ---
    <a class='dropdown-item' href='' data-toggle='tab' id='menu1'>
    <a class='dropdown-item' href='' data-toggle='tab' id='menu2'>
    ---

    ha raklikkelek valamelyikre, akkor az id alapjan a jquery  betolti a tab-content-be a megfelelo fajlt:
    ---
    $(document).ready(function(){   
        $('.dropdown-item').click(function(){
            if (this.id=='menu1') $('.tab-content').hide().fadeIn("slow").load('menu_1.php');
            if (this.id=='menu2') $('.tab-content').hide().fadeIn("slow").load('menu_2.php');
        });
    })
    ---

    1 dolog nem mukodik meg megfeleloen: a formazas (datatables). Ha bejon a tartalom, neha latszik hogy a beoltes utan formazza csak meg a tartalmat. A css fajlok minden menu-s fajl head-jeben vannak. Ezt hogyan lehet jol megcsinalni?
    Mutasd a teljes hozzászólást!
  • Máskor kód beillesztésére használd a "Forráskód" ikont (</>).

    A css fajlok minden menu-s fajl head-jeben vannak.

    Ez véletlenül nem azt jelenti, hogy ezeknek a fájloknak (menu_1.php, menu_2.php) van <head> részük is? Ha igen az nem éppen ildomos... Ráadásul nem látom, hogy hol van az ajax-os tartalom-frissítés.
    Viszont nem ártana egy link, hogy a felvetett "problémá(i)dra" konkrét megoldást lehessen adni.
    Megj: Remélem végigolvastad a korábban adott linkem mindegyik lehetőségét és az azokhoz tartozó demo-kat is...
    Mutasd a teljes hozzászólást!
  • Oke, maskor azt fogom hasznalni.

    Eredetileg nem volt header-juk a menu-s fajloknak, probabol tettem bele, de ugy sem lett jo. :-/
    Ha ajax-szal toltenem be a menu-s fajlokat, az mennyivel lenne jobb mint a jquery load-os megoldas?

    Feltettem ide a peldat. A 2. fomenu 2. listajanal latszik jol, hogy "Show" ill. a "Search" kesve jelenik csak meg. Erre keresem megoldast.

    Ill. meg1 dologra: a fomenuknel azt szeretnem, hogy ha az egerrel folejuk allok, akkor jelenjen meg az almenu. Ezt igy meg is tudtam oldani:

    .dropdown:hover>.dropdown-menu{ display: block; }
     
    viszont ha kivalasztok egy almenut, akkor betolti ugyan, de ugyanugy kint maradnak a lenyitott almenuk is. Ez is latszik a peldaban.
    Ha pedig ez mukodik, akkor a fomenure klikkelve nem tortenjen semmi.
    Mutasd a teljes hozzászólást!
  • Kicsit "pontosítani" kellen az oldalad kódját, majd utána visszatérni a felsorolt kérdéseidre...

    <!-- ???????? <!doctype html> <html lang="hu"> --> <!--<meta charset="utf-8"> ???????? --> <head> <meta charset="utf-8"> <link href="http://www.hermit.nhely.hu/styles.css" type="text/css" rel="stylesheet" media="screen"> <!--</head> ???????? --> <link rel="stylesheet" href="http://www.hermit.nhely.hu/css/bootstrap.css"> <style> body { padding-top: 1em; } </style> </head> <!-- <body> ???????? --> <div class="container-fluid"> <nav class="navbar navbar-expand-md navbar-light bg-faded"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse justify-content-md-center" id="nav-content"> <ul class="navbar-nav nav nav-tabs" id="clothing-nav" role="tablist"> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" id="Preview" href="#" role="button" aria-haspopup="true" aria-expanded="false">1. fomenu</a> <div class="dropdown-menu" aria-labelledby="Preview"> <a class='dropdown-item' href='' data-target='#1011' role='tab' data-toggle='tab' id='1011-tab'>1. almenu</a> <a class='dropdown-item' href='' data-target='#1012' role='tab' data-toggle='tab' id='1012-tab'>2. almenu</a> </div> </li> <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" id="Preview" href="#" role="button" aria-haspopup="true" aria-expanded="false">2. fomenu</a> <div class="dropdown-menu" aria-labelledby="Preview"> <a class='dropdown-item' href='' data-toggle='tab' id='2031-tab'>1. lista</a> <a class='dropdown-item' href='' data-toggle='tab' id='2045-tab'>2. lista</a> </div> </li> </ul> </div> </nav> <div class="tab-content"><div role="tabpanel" class="tab-pane fade" id="2031"></div> <div role="tabpanel" class="tab-pane fade"></div> </div> </div> <SCRIPT type="text/javascript" src="http://www.hermit.nhely.hu/jquery/jquery-1.11.1.min.js"></SCRIPT> <script src="http://www.hermit.nhely.hu/js/popper.min.js"></script> <script src="http://www.hermit.nhely.hu/js/bootstrap.min.js"></script> <SCRIPT type="text/javascript" src="http://www.hermit.nhely.hu/jquery/jquery-3.3.1.min.js"></SCRIPT> <link rel="stylesheet" type="text/css" href="http://www.hermit.nhely.hu/jquery/css/style.css" media="screen"/> <script type="text/javascript" language="javascript" src="http://www.hermit.nhely.hu/jquery/jquery.dataTables.min.js"></script> <script type="text/javascript" language="javascript" src="http://www.hermit.nhely.hu/js/dataTables.bootstrap4.min.js"></script> <script> $(document).ready(function(){ $('.dropdown-item').click(function(){ if (this.id=='2031-tab') $('.tab-content').hide().fadeIn("slow").load('menu_2031.php'); if (this.id=='2045-tab') $('.tab-content').load('menu_2045.php'); }); }) $(document).ready(function(){ $('.nav-link').click(function(){ if (this.id=='9999') $('.tab-content').hide().fadeIn("slow").load('menu_9999.php'); }); }) </script> <!-- </body> ???????? --> <!-- </html> ???????? -->
    Mutasd a teljes hozzászólást!

  • Pontositottam
    Mutasd a teljes hozzászólást!
  • Miért töltesz be két eltérő verziójú jq LIB-et?
    Ha a "tab-content" elemben van kettő "tabpanel" elem, akkor a betöltött fájl miért a szülő elembe kerül betöltésre?
    A betöltött tartlamak pedig attól függenek, hogy mi van a hívott *.php fájlban (sql lekérdezés, stb).
    Összeségében ebben a helyzetben a tőled kapott infók alapján a feltett kérdéseidnek nem sok érthető része van.
    Bár az is lehet, hogy a következő tippelt megoldást szeretnéd elérni... Ha nem

    <div class="container-fluid"> <nav class="navbar navbar-expand-md navbar-light bg-faded"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse justify-content-md-center" id="nav-content"> <ul class="navbar-nav nav nav-tabs" id="clothing-nav" role="tablist"> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" id="Preview" href="#" role="button" aria-haspopup="true" aria-expanded="false">1. fomenu</a> <div class="dropdown-menu" aria-labelledby="Preview"> <a class='dropdown-item' href='' data-target='#1011' role='tab' data-toggle='tab' id='1011-tab'>1. almenu</a> <a class='dropdown-item' href='' data-target='#1012' role='tab' data-toggle='tab' id='1012-tab'>2. almenu</a> </div> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" id="Preview" href="#" role="button" aria-haspopup="true" aria-expanded="false">2. fomenu</a> <div class="dropdown-menu" aria-labelledby="Preview"> <a class='dropdown-item' href='' data-toggle='tab' id='2031-tab'>1. lista 2031</a> <a class='dropdown-item' href='' data-toggle='tab' id='2045-tab'>2. lista 2045</a> </div> </li> </ul> </div> </nav> <div class="tab-content" style="min-height:100px;background:pink;display:block;">Alma <div role="tabpanel" id="2031_tabpanel" style="min-height:50px;background-color:gray;display:block;">szürke</div> <div role="tabpanel" id="2045_tabpanel" style="min-height:50px;background-color:blue;display:block;">kék</div> </div> </div> <SCRIPT type="text/javascript" src="http://www.hermit.nhely.hu/jquery/jquery-3.3.1.min.js"></SCRIPT> <script src="http://www.hermit.nhely.hu/js/popper.min.js"></script> <script src="http://www.hermit.nhely.hu/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="http://www.hermit.nhely.hu/jquery/css/style.css" media="screen"/> <script type="text/javascript" language="javascript" src="http://www.hermit.nhely.hu/jquery/jquery.dataTables.min.js"></script> <script type="text/javascript" language="javascript" src="http://www.hermit.nhely.hu/js/dataTables.bootstrap4.min.js"></script> <script> $(document).ready(function(){ $('.dropdown-item').click(function(){ if (this.id=='2031-tab') $('.tab-content #2031_tabpanel').hide().fadeIn("slow").load('menu_2031.php'); if (this.id=='2045-tab') $('.tab-content #2045_tabpanel').hide().fadeIn("slow").load('menu_2045.php'); }); $('.nav-link').click(function(){ if (this.id != '9999'){ $('.tab-content #2031_tabpanel').hide().fadeIn("slow").load('menu_9999.php'); $('.tab-content #2045_tabpanel').hide().fadeIn("slow").load('menu_9999.php'); } }); }) </script>
    Mutasd a teljes hozzászólást!
  • Kétszer ment el,
    Mutasd a teljes hozzászólást!
  • A ket kulonbozo jq veletlenul maradt benne.
    Igen, ez (is) igaz, a tab-content-et benne hagytam, a menus (tabpanel) reszeket kivettem. Feltoltottem a modositott verziot.

    Igazabol az elso kerdesemre a valaszt megadtad mar az 1. hsz.-odban, igy azt fogadom el megoldaskent. Koszonom a segitseget!

    ui.: megneztem a datatables-t, a formazas, a show es a search mezok a demo oldalakon is kesve jelennek meg...
    Mutasd a teljes hozzászólást!
Tetszett amit olvastál? Szeretnél a jövőben is értesülni a hasonló érdekességekről?
abcd