Di artikel sebelumnya, kami menggunakan EasyUi untuk membangun kerangka kerja untuk halaman backend. Klik di sini untuk melihatnya. Di bagian ini, kami terutama menggunakan teknologi easyui untuk hanya mengimplementasikan menu backend. Kami pertama -tama akan membuat fungsi sederhana dan terus memperkaya mereka nanti.
1. Menerapkan menu kiri
Pertama -tama lihat rendering:
Kami dapat mengklik "Operasi Dasar" dan "Operasi Lain" untuk beralih opsi menu. Di opsi spesifik, klik pada koneksi yang berbeda dan akan ditampilkan di sebelah kanan. Mari kita buat menu di sebelah kiri terlebih dahulu.
Ada dua konten utama dari menu di sebelah kiri: "Manajemen Kategori" dan "Manajemen Produk". Kita tahu bahwa di bagian sebelumnya, kerangka halaman latar belakang harus dibangun di aindex.jsp, jadi sekarang kita hanya perlu membuat dua hyperlink ini dan memasukkannya ke div yang sesuai di aindex.jsp. Jadi pertama -tama kami membuat file temp.jsp baru di folder webroot sebagai file pengembangan sementara, karena Anda dapat secara langsung mengukurnya dengan menulis JSP di sini. Setelah efek tersedia, salin konten ke lokasi yang sesuai di AIndex.jsp.
Halaman temp.jsp adalah sebagai berikut:
<%@ page language = "java" import = "java.util.*" pageencoding = "utf-8"%> <! Doctype html public "-// w3c // dtd html 4.01 transisi // en"> <html> <pead> <%@ termasuk file = "/head.jsp." {html> <head> <%@ termasuk file = "/head.jsp." {html> <head> <%@ termasuk File = "/public.jsp." Lebar: 200px; /*Border: 1px solid red;*/} #menu ul {List-style: none; padding: 0px; margin: 0px; } #menu ul li {border-bottom: 1px solid #fff; } #menu ul li a { /*Konversi tag A ke elemen tingkat blok terlebih dahulu untuk mengatur lebar dan jarak dalam* / display: block; Latar Belakang-Color: #00A6AC; Warna: #fff; padding: 5px; Dekorasi Teks: Tidak Ada; } #menu ul li a: hover {latar belakang-warna: #008792; } </tyle> </head> <body> <v id = "menu"> <ul> <li> <a href = "#"> Manajemen Kategori </a> <li> <a href = "#"> Manajemen Produk </a> </ul> </Div> </body> </html>Hanya ada dua tautan di temp.jsp, dienkapsulasi dengan LI dan ditempatkan di div. CSS di atas menetapkan gaya untuk dua tautan ini, dan kemudian kami mengaktifkan Tomcat dan menguji efeknya sebagai berikut:
Setelah membuat dua hyperlink ini, kami akan menyalin UL dari dua hyperlink yang dienkapsulasi ke posisi tampilan konten menu di sebelah kiri di aindex.jsp, dan secara singkat memodifikasinya, sebagai berikut:
Bagian CSS dapat langsung dibawa ke tag kepala aindex.jsp. Lihatlah tag A di atas, yang berisi atribut judul, bukan HREF, karena kami tidak melompat ke halaman baru, karena easyui hanyalah halaman ini, kami ingin meletakkan tampilan yang diklik pada tab tab di sebelah kanan, jadi kami pertama -tama menulis tindakan lompatan di atribut judul dan kemudian ubah nanti. Selanjutnya, kami ingin mengklik manajemen kategori untuk memunculkan fungsi kategori tertentu di tab di sebelah kanan.
2. Menerapkan tab Tab di sebelah kanan
Untuk mewujudkan fungsi mengklik bilah menu kiri untuk memunculkan tab yang tepat, Anda perlu menambahkan kode JS. Gagasan menggunakan easyui adalah: klik pertama pada hyperlink dan dapatkan nama hyperlink, karena judul tab pop-up harus sama dengan nama hyperlink, seperti "manajemen kategori"; Kemudian tentukan apakah tab perubahan nama sudah ada, tampilkan jika ada, buat jika tidak ada, dan menampilkan konten yang akan ditampilkan. Mari kita lihat kode di bagian JS:
<script type = "text/javascript"> $ (function () {$ ("a [title]"). klik (function () {var text = $ (this) .text (); var href = $ (this) .attr ("tt"); // menilai apakah ada tab yang sesuai pada tepat sekarang ($ ("#tt"). $ ("#tt"). Tabs ("Select", Text);} else {// Buat tab baru jika tidak, jika tidak beralih ke tag saat ini $ ("#tt"). Alamat URL, tetapi hanya bagian tubuh // href: 'send_category_query.action'}); </script> Mari kita analisis kode JS ini. Pertama, dapatkan tag A. Perhatikan bahwa tag ini adalah tag A dengan atribut judul, yang merupakan hyperlink "manajemen kategori" di atas, dan kemudian klik, dan ada fungsi lain dalam klik. Apa yang dilakukan fungsi ini? Pertama, dapatkan nama tautan saat ini, yaitu, teks, dan kemudian dapatkan URL melalui atribut judul (karena kami baru saja menulis URL ke atribut judul). Selanjutnya, tentukan apakah ada opsi (tab) untuk nama ini. Jika ada, opsi untuk nama itu akan ditampilkan, dan jika tidak ada, buatlah.
Mari kita lihat pernyataan di IF. Pertama, gunakan "#TT" untuk mendapatkan objek jQuery di sebelah kanan, dan kemudian panggil metode konstruksi tab untuk mendapatkan objek tab. Jika ada, itu akan mengembalikan true, jika tidak, ia akan mengembalikan false. Jadi apa arti dua parameter di tab ()? Pertama -tama, parameter pertama adalah nama metode, dan parameter kedua adalah parameter yang sesuai dari parameter pertama (metode). tab ("ada", teks) berarti memanggil metode keberadaan EasyUi. Parameternya adalah teks, yaitu menentukan apakah tab dengan teks ada. Demikian pula, tab berikut ("Pilih", Teks) berarti memilih tab dengan teks nama yang akan ditampilkan, tab ("Tambah", {}) berarti membuat tab baru, dan beberapa properti dari tab yang baru ditambahkan ditambahkan dalam {}: judul berarti nama, tertutup berarti ada tombol tutup, yaitu, fork di sudut kanan atas, dan konten berarti mendapatkan ke mana dapat mendapatkan. Kemudian, konten halaman dikemas dengan tag <frame>. Halaman ini tidak dapat diakses secara langsung dan diarahkan melalui tindakan. Dapat dilihat dari nama tindakan yang diperkenalkan ke halaman Web-INF/Category/Query.jsp. Jika kita menulis sesuatu dengan santai di tag tubuh pada halaman, lalu klik pada bilah menu di sebelah kiri, konten akan ditampilkan di tab kanan. sebagai berikut:
Akhirnya, masukkan kode di aindex.jsp di sini:
<%@ page language = "java" import = "java.util.*" pageencoding = "utf-8"%> <! Doctype html public "-// w3c // dtd html 4.01 transisi // en"> <html> <pead> <%@ termasuk file = "/head.jsp." {html> <head> <%@ termasuk file = "/head.jsp." {html> <head> <%@ termasuk File = "/public.jsp." Lebar: 60px; /*Border: 1px solid red;*/} #menu ul {List-style: none; padding: 0px; margin: 0px; } #menu ul li {border-bottom: 1px solid #fff; } #menu ul li a { /*Konversi tag A ke elemen tingkat blok terlebih dahulu untuk mengatur lebar dan jarak dalam* / display: block; Latar Belakang-Color: #00A6AC; Warna: #fff; padding: 5px; Dekorasi Teks: Tidak Ada; } #menu ul li a: hover {latar belakang-warna: #008792; } </style> <script type = "text/javascript"> $ (function () {$ ("a [title]"). klik (function () {var text = $ (this) .text (); var href = $ (this) .attr ("title"); // menilai apakah ada tab yang sesuai pada sekarang jika $ ("#"#")." $ ("#tt"). Tabs ("Select", Text);} else {// Buat tab baru jika tidak, jika tidak beralih ke tag saat ini $ ("#tt"). alamat, tetapi hanya bagian tubuh //href:'Send_category_query.action '}); }); </script> </head> <body> <div data-options = "region: 'utara', judul: 'Selamat datang di yigou backend management', split: true" style = "height: 100px;"> </div> <Div Data-options = "region: 'West', judul: Div System Operation ', split: true"> <!-menu SISTEM; Data-options = "IconCls: 'Icon-Save'"> <ul> <li> <a href = "#"> Manajemen Kategori </a> <li> <a href = "#"> Manajemen Produk </a> </ul> </v> <v Data-options = "IconCls: 'Icon-Reload'> <" uLP = "Li"#"Li"#"Li"#"Li"#"Li"#"Li"#"Li"#" <li> <a href = "#"> Manajemen Produk </a> </ul> </div> </div> </div> <div data-options = "region: 'center', judul: 'halaman operasi backend'" style = "padding: 1px; latar belakang: #eee;"> <div id = "tt" data-options = "fiting: fit: fit: #eee;"> <Div id = "tt" data-options = "fit" fit: "; Ditampilkan di masa mendatang (jenis sistem operasi saat ini, nama domain proyek saat ini, konfigurasi terkait perangkat keras atau laporan tampilan </div> </div> </div> </body> </html> Jelas, kode belum diekstraksi, dan CSS dan JS dicampur di halaman JSP yang sama. Tidak masalah, itu akan diekstraksi bersama nanti.
Sejauh ini, kami telah menyelesaikan implementasi menu Easyui. Di sini kami hanya menyelesaikan metode implementasi, dan konten spesifik yang ditampilkan akan ditingkatkan sesuai dengan kebutuhan spesifik.
Alamat unduhan kode sumber dari seluruh proyek: //www.vevb.com/article/86099.htm
Alamat asli: http://blog.csdn.net/eson_15/article/details/51297705
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.