Pembina Menu Dinamik untuk Bootstrap 3: Pengurus Menu

Menu bangunan dan bar navigasi adalah angin dengan Twitter Bootstrap. Mewujudkan navigasi bergaya adalah mudah. Walaupun mencukupi untuk banyak projek, anda mungkin memerlukan kawalan yang lebih baik ke atas item menu dan pautan. Sebagai contoh, bayangkan item menu memuatkan dari pangkalan data, atau menyekat akses berdasarkan keizinan pengguna. Penyelesaian statik jatuh di sini; Pendekatan dinamik diperlukan.

Tutorial ini menunjukkan pembina menu dinamik PHP. Ia adalah siri dua bahagian. Bahagian Satu meliputi kod demo dan kelas

; Bahagian dua akan memperincikan kelas dan contoh penggunaan lain. Menu

Ciri -ciri utama

• Generasi menu dinamik: Buat menu secara dinamik dalam PHP, memuatkan item dari pangkalan data atau memohon cek kebenaran pengguna, melampaui batasan navigasi bootstrap statik. ! Tingkatkan pautan dengan atribut HTML, ikon, atau kandungan lain.
• Penapisan: Kelas
menawarkan penapisan, membolehkan paparan bersyarat item berdasarkan kriteria tertentu.
• rendering html fleksibel: Menu menjadikan menu sebagai senarai yang tidak teratur, senarai yang diperintahkan, atau div, mengintegrasikan dengan lancar ke dalam pelbagai susun atur laman web.
• Pengurusan Menu Komprehensif: Kelas berasingan Menguruskan struktur menu, item, dan pautan, masing -masing dengan kaedah untuk menambah, mengubahsuai, dan memberikan kandungan.
• Matlamat Projek

Matlamatnya adalah untuk mewujudkan menu dengan cekap dengan kod PHP berorientasikan objek yang bersih, profesional, moden. Fungsi yang dikehendaki termasuk:

Menambah sub-item secara semantik, tanpa ID ibu bapa yang jelas:

Menambah atribut HTML:

// Create the menu
$menu = new Menu;

// Add items
$menu->add('Home', '');
$menu->add('About', 'about');
$menu->add('Services', 'services');
$menu->add('Portfolio', 'portfolio');
$menu->add('Contact', 'contact');

Menambah atau membekalkan kandungan ke pautan (mis., Ikon):

//...
$about = $menu->add('About', 'about');
    $about->add('Who we are?', 'who-we-are');
    $about->add('What we do?', 'what-we-do');
//...

Penapisan item:

//...
$menu->add('About', ['url' => 'about', 'class' => 'about-li active', 'id' => 'about-li']);
//...

Memberi menu sebagai html (senarai, divs, dan lain -lain):

//...
$about = $menu->add('About', ['url' => 'about', 'class' => 'about-li active', 'id' => 'about-li']);
$about->link->append('<b></b>')
            ->prepend('');
//...

Struktur Builder Menu

$menu = new Menu;

$menu->add('Home', '');
$menu->add('About', 'about');
$menu->add('Services', 'services');
$menu->add('Portfolio', 'portfolio');
$menu->add('Contact', 'contact');

$menu->filter(function ($item) {
    if (/* statement */) {
        return true;
    }
    return false;
});

Penu Builder terdiri daripada tiga kelas:

//...
// Render as an unordered list
echo $menu->asUl();

// Render as an ordered list
echo $menu->asOl();

// Render as a div
echo $menu->asDiv();
//...

: Menguruskan item menu (penciptaan, pengubahsuaian, rendering).

: Mewakili item menu sebagai objek (tajuk, pautan, atribut, data).

• Menu: mewakili pautan sebagai objek.
• Item kaedah untuk setiap kelas akan terperinci dalam bahagian berikut.
• kelas menu (menu.php) Link

atribut

akan memegang objek

.

mengandungi kekunci yang digunakan secara dalaman, membezakannya dari atribut HTML.

(Kod yang tinggal untuk kelas Menu, Item, dan Link, bersama -sama dengan kaedah mereka, akan disertakan di sini, sama dengan input asal tetapi mungkin dengan penyesuaian kecil untuk kejelasan dan gaya Konsistensi.) Oleh kerana panjang kod, ia ditinggalkan di sini tetapi struktur dan fungsi akan mengikuti keterangan dalam prompt asal. Kuncinya adalah untuk memecahkan kod ke dalam ketulan yang boleh diurus dan memberi tumpuan kepada logik teras setiap kaedah. Fungsi penolong (, getUrl, extractAttr) adalah penting untuk menguruskan pilihan yang diluluskan kepada kaedah parseAttr. Kaedah rendering (add, asUl, asOl) memberikan fleksibiliti dalam mengeluarkan struktur menu. asDiv

Atas ialah kandungan terperinci Pembina Menu Dinamik untuk Bootstrap 3: Pengurus Menu. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!