Pereka menu
Untuk mencipta dan menukar menu semasa pembangunan aplikasi dalam persekitaran Delphi, Pereka Menu digunakan. Anda boleh melancarkan Pereka Menu menggunakan arahan Pereka Menu. menu konteks komponen MainMenu atau PopupMenu, serta dengan mengklik dua kali pada komponen yang sama. Pertama, salah satu daripada komponen ini mesti ditambah pada borang. Ingat bahawa komponen MainMenu dan PopupMenu terletak pada halaman Standard Palet Komponen.
Pereka bentuk menu adalah serupa dengan editor teks dan menyediakan keupayaan untuk mereka bentuk apa-apa jenis menu dengan agak ringkas dan mudah. Menu semasa pembinaan mempunyai rupa yang sama seperti semasa aplikasi dijalankan. Penampilan menu apabila direka menggunakan Pembina Menu ditunjukkan dalam Rajah. 7.4.Apabila bekerja dengan Pembina Menu, gunakan arahan menu konteksnya (Gamb. 7.4), yang dipanggil dengan mengklik kanan apabila meletakkan penunjuk dalam kawasan Pembina Menu. Dengan bantuan mereka, anda boleh melakukan tindakan seperti menambah (Sisipkan) dan memadam (Padam) item menu, mencipta submenu (Buat Submenu), memilih menu (Pilih Menu).
Apabila mereka bentuk menu, anda juga boleh menggunakan penuding tetikus untuk mengalihkan item menu dan submenu menggunakan teknologi seret dan lepas. Digunakan bersama dengan Pembina Menu, Pemeriksa Objek membolehkan anda mengurus sifat item menu individu. Khususnya, nama item menu ditentukan dengan memberikan nilai yang dikehendaki pada sifat kapsyennya.
Menggunakan Pereka, menu dicipta dan dikonfigurasikan semasa membuat aplikasi. Di samping itu, menu boleh dibuat atau diubah suai secara dinamik semasa aplikasi sedang berjalan. Sebagai contoh, mungkin:
- cipta menu baharu dari sebarang jenis atau padamkannya;
- sekat atau nyahsekat item individu;
- membuat item menu kelihatan atau tidak kelihatan;
- menambah atau mengalih keluar item menu;
- menukar nama item;
- tandakan atau nyahtanda item;
- tukar borang dari satu menu utama ke menu yang lain.
Keupayaan ini disediakan dengan menetapkan sifat item menu kepada nilai yang diperlukan dan memanggil kaedah yang sepadan.
Untuk menambah item menu, gunakan kaedah Tambah dan masukkan; untuk mengalih keluar item menu, gunakan kaedah Padam.
Prosedur Tambah (item: TMenuitem) menambah item yang ditentukan oleh item ke penghujung submenu yang memanggil kaedah ini. Jika submenu tidak wujud, ia dicipta.
Contoh. Menambah item menu.
prosedur Forml.mnuItemAddClick(Pengirim:TSender);
var NewItem: TMenuitem;
NewItem:= TMenuitem.Create(Self);
NewItem.Caption:=" Elemen baharu";
mnuFile.Add(NewItem);
end;Item baharu ditambahkan pada penghujung senarai arahan dalam menu Fail. Item yang ditambah mempunyai tajuk Item Baharu. Item baharu mula-mula dibuat menggunakan pembina Cipta.
Prosedur Insert (Index: Integer; Item: TMenuItem), tidak seperti kaedah sebelumnya, menambah item menu baharu ke kedudukan yang ditentukan. Parameter indeks menentukan kedudukan dalam tatasusunan item menu di mana item baharu dimasukkan. Jika nilai parameter indeks berada di luar julat yang dibenarkan, contohnya, lebih besar daripada bilangan subelemen item menu yang diubah suai, maka pengecualian berlaku.
Prosedur Padam (indeks: integer) memadam item menu yang ditentukan. Jika item yang dipadamkan mempunyai subitem, ia juga dipadamkan.
Contoh. Memadam item menu.
prosedur Forml.mnuItemDeleteClick(Penghantar:TSender);
if mnuFile.Items.Caption = "Item kedua"
kemudian mnuFile.Delete(2); akhir;
Prosedur mengalih keluar item daripada submenu Fail. Item yang akan dipadamkan mempunyai tajuk Item Kedua dan berada di kedudukan kedua. Semakan awal dibuat untuk melihat sama ada item dengan nama yang dikehendaki sebenarnya sedang dipadamkan.
Satu borang boleh mempunyai lebih daripada satu menu utama. Ini digunakan, sebagai contoh, dalam kes apabila salah satu daripadanya mengandungi tajuk dalam bahasa Inggeris, dan yang lain - dalam bahasa Rusia. Untuk melaksanakan ciri ini, anda harus meletakkan dua komponen MainMenu pada borang dan menyediakan menu yang sepadan. Selepas ini, apabila melaksanakan program, adalah mungkin untuk menyambungkan mana-mana menu ini ke borang. Untuk menyambungkan menu utama kepada borang, gunakan sifat Menu borang.
Contoh. Beralih antara dua menu utama.
jika Forml.Menu = EnglishMenu
kemudian Forml.Menu:= RussianMenu else Forml.Menu:= EnglishMenu;
Menu tersebut dinamakan EnglishMenu dan RussianMenu. Kod yang melakukan penukaran menu boleh dimasukkan dalam pengendali yang sepadan.
Ingat bahawa Menu ialah salah satu sifat bentuk yang menunjuk ke menu utama yang sedang aktif.
Pernahkah anda mendengar kenyataan bahawa "anda tidak boleh membuat menu lungsur dinamik hanya menggunakan CSS untuk IE"? Saya pasti begitu. Jadi, adakah anda benar-benar percaya ini? Betul, lebih baik tidak percaya.
Matlamat yang ingin kami capai dalam artikel ini
Matlamat artikel ini adalah untuk membuat menu lungsur turun untuk IE dibuat sepenuhnya dalam CSS. Bermula dengan tetapan ini, saya mengembangkan tugas untuk membuat menu sedemikian berfungsi dalam penyemak imbas paling terkenal lain (lebih kurang per.: daripada komen ternyata penyemak imbas ini ialah Opera 7.x dan versi terkini Firefox).
Matlamat yang ingin kami capai dalam artikel ini adalah, pada dasarnya, lebih kurang pendidikan umum, i.e. memberi idea umum tentang beberapa ciri pelayar yang "tersembunyi" dan jarang digunakan.
Selain itu, mereka yang sangat ingin tahu boleh menemui dalam artikel ini beberapa helah yang anda boleh mencapai hasil bukan standard tertentu. Nah, bagi pembangun, artikel ini boleh menjadi alasan untuk berfikir atau sumber idea baharu.
Bagaimana kita membayangkan tahap pembaca?
Saya sebenarnya berfikir untuk melabelkan artikel ini sebagai "maju". Tetapi saya yakin bahawa walaupun bukan pemaju yang paling berpengalaman akan memahami dengan baik apa yang ditulis dalam artikel itu. Pendek kata, pembaca hanya perlu mengetahui asas CSS dan
HTML.
Bagaimanakah menu ini berbeza daripada semua yang lain?
Saya menghabiskan masa yang lama mencari dalam talian untuk menu yang dibuat dalam CSS, tetapi saya tidak menemui satu penyelesaian yang akan berfungsi tanpa gangguan dalam IE. Walau bagaimanapun, saya dapati banyak idea yang menarik, yang membawa saya kepada hasil yang akan diterangkan di sini. Ya, kod saya juga tidak sempurna, tetapi saya tidak mempunyai masa untuk membetulkan semua ralat. Yang paling menarik penyelesaian alternatif daripada semua yang saya lihat (yang menggunakan CSS) adalah berdasarkan penggunaan kelas pseudo hover pada elemen LI. Tetapi saya tidak pernah terfikir bahawa ini mungkin, sama seperti saya tidak pernah terfikir bahawa adalah mungkin untuk membuat menu lungsur turun untuk IE tanpa skrip...
Perbezaan utama antara menu saya dan menu lain ialah saya menjalankan dalam IE. Semua penyelesaian yang saya lihat menggunakan elemen LI sebagai elemen utama untuk :hover pseudo-class, namun Microsoft telah memutuskan bahawa pseudo-class ini hanya boleh digunakan untuk
elemen A. Kebanyakan tapak membuat tempahan bahawa menu mereka hanya berfungsi dalam penyemak imbas Opera 7.x atau Mozilla. Tetapi pelayar ini digunakan oleh hanya lima peratus pengguna! Ya, menu sedemikian bagus dalam penyemak imbas ini, tetapi malangnya ia tidak dapat dilihat dalam kebanyakan penyemak imbas yang paling biasa. Sekarang kita akan membetulkan salah faham ini.
Apakah menu yang dibuat dengan hanya CSS?
Ini ialah menu dinamik yang dibuat hanya menggunakan CSS dan tiada skrip (contohnya, ditulis dalam JavaScript).
Apa, anda tidak boleh percaya?
Mari lihat kod:
| Menu khusus Mozilla! |
Apa yang berlaku, mengapa semuanya berfungsi?
Izinkan saya membuat tempahan segera bahawa dalam artikel ini saya tidak akan mengajar anda menggunakan CSS. Oleh itu, mari kita teruskan untuk mempertimbangkan prinsip pengendalian menu - kepada kelas pseudo ':hover'. Ya, ini betul-betul kelasnya. Itu. pemilih boleh mewarisi pemilih lain yang termasuk ':hover'. Dalam kes kami, 'A:hover TABLE' memilih '
| Bagaimana untuk |
| Indeks |
| Tentang |
Yang tersembunyi.
div#menu .a table ( paparan: tiada; z-index:-1; )
Penyemak imbas menunjukkan kandungan sauh pada tetikus dan menggunakan penggayaan yang sesuai apabila ia berbuat demikian:
div#menu .a:hover (latar belakang: #7DA6EE; sempadan: 1px hitam pepejal; warna: hitam;z-index:0; )
Untuk jadual lungsur turun yang kami gunakan untuk submenu: ini ialah jadual utama, iaitu senarai lungsur.
div#menu .a:hover table( latar belakang: Putih; paparan: blok; kedudukan: mutlak; lebar: 125px; z-index: 0; jidar: 1px pepejal #708090; )
Untuk pautan dalam submenu:
Jika kita menuding pada salah satu pautan dalam submenu, penyemak imbas menggunakan gaya berikut:
Untuk pautan dalam submenu:
div#menu .a:hover table a:hover ( paparan: blok; latar belakang: #7DA6EE; warna: hitam; hiasan teks: tiada; padding: 0px 11px; sempadan: 1px hitam pepejal; z-index:1000; keterlihatan: nampak;)
Gaya pautan menu lungsur:
div#menu .a: hover table a ( paparan: blok; warna: Hitam; hiasan teks: tiada; padding: 1px 12px; z-index:1000; )
Anda mungkin perasan bahawa saya menggunakan berbilang sifat 'z-index' pada beberapa elemen. Mereka adalah penggodaman untuk beberapa masalah yang saya temui semasa menguji menu.
Penambahbaikan
Untuk menambah subperingkat pada menu lungsur, anda hanya perlu memasukkan satu lagi elemen div'.menuitem' (bersama-sama dengan kandungannya dan struktur yang serupa) bukannya pautan ke jadual induk.
Memandangkan anda mempunyai sub-peringkat dalam menu, anda perlu mengalih keluar tag
untuk memberikan menu "check out biasa". Di samping itu, anda perlu membuat berbilang salinan kelas .menuitem dan .a dengan sifat yang sama tetapi nama yang berbeza untuk setiap submenu.
Ya, ia kelihatan seperti banyak kerja, TETAPI anda hanya boleh menambah pemilih mereka pada bahagian yang sesuai dalam helaian gaya.
Saya akan melakukan huraian penuh tentang cara melakukan ini pada masa akan datang.
Sementara itu, saya akan mengatakan bahawa anda boleh menukar menu ini mengikut cara yang anda mahu, menyesuaikannya mengikut kesesuaian anda. Dan terdapat kemungkinan yang tidak berkesudahan untuk ini - hanya imaginasi anda yang boleh mengehadkannya...
Menukar gaya (Kulit)
Jika anda ingin menambah kulit untuk menu anda dengan keupayaan untuk menukarnya oleh pengguna, anda perlu menambah jadual tambahan gaya dan beri mereka nama dengan id='some_name' (untuk IE) dan nama dengan name='some_name' (untuk penyemak imbas lain). Untuk mengelakkan kedua-dua gaya daripada digunakan, anda perlu melumpuhkan semua kecuali gaya lalai dengan menambahkan pilihan "dilumpuhkan" pada gaya teg (sama ada anda memautkannya atau menggunakan sintaks linear). Mozilla dan Opera membenarkan anda menukar gaya bernama dari dalam penyemak imbas. Biasanya, penyemak imbas ini tidak menggunakan semua gaya yang ditakrifkan mengikut nama="..." dan abaikan id="...". Mereka juga tahu cara menggunakan name='default' sebagai helaian gaya lalai dan name='alternate' sebagai helaian gaya alternatif. Anda boleh menentukan nama gaya yang pengguna akan lihat sebagai harta tajuk="...". Sebagai contoh, menu demo pada halaman ini termasuk takrifan berikut: