Taga-disenyo ng menu
Upang lumikha at magbago ng mga menu sa panahon ng pagbuo ng application sa kapaligiran ng Delphi, ang Menu Designer ay ginagamit. Maaari mong ilunsad ang Menu Designer gamit ang Menu Designer command. menu ng konteksto ang bahagi ng MainMenu o PopupMenu, gayundin sa pamamagitan ng pag-double click sa parehong mga bahagi. Una, dapat idagdag ang isa sa mga bahaging ito sa form. Alalahanin na ang mga bahagi ng MainMenu at PopupMenu ay matatagpuan sa Standard page ng Component Palette.
Ang taga-disenyo ng menu ay katulad ng isang text editor at nagbibigay ng kakayahang medyo simple at maginhawang magdisenyo ng anumang uri ng menu. Ang menu sa panahon ng konstruksiyon ay may parehong hitsura tulad ng kapag ang application ay tumatakbo. Ang hitsura ng menu kapag idinisenyo gamit ang Menu Builder ay ipinapakita sa Fig. 7.4.Kapag nagtatrabaho kasama ang Tagabuo ng Menu, gamitin ang mga utos ng menu ng konteksto nito (Larawan 7.4), na tinatawag sa pamamagitan ng pag-right-click kapag inilalagay ang pointer sa lugar ng Tagabuo ng Menu. Sa tulong nila, maaari kang magsagawa ng mga aksyon tulad ng pagdaragdag (Ipasok) at pagtanggal (Tanggalin) ng isang item sa menu, paglikha ng isang submenu (Gumawa ng Submenu), pagpili ng isang menu (Piliin ang Menu).
Kapag nagdidisenyo ng menu, maaari mo ring gamitin ang mouse pointer upang ilipat ang mga item sa menu at submenu gamit ang teknolohiyang drag-and-drop. Ginagamit kasabay ng Tagabuo ng Menu, pinapayagan ka ng Object Inspector na pamahalaan ang mga katangian ng mga indibidwal na item sa menu. Sa partikular, ang pangalan ng isang item sa menu ay tinukoy sa pamamagitan ng pagtatalaga ng nais na halaga sa katangian ng caption nito.
Gamit ang Constructor, ang mga menu ay nilikha at na-configure kapag gumagawa ng isang application. Bilang karagdagan, ang mga menu ay maaaring gawin o baguhin nang pabago-bago habang tumatakbo ang application. Halimbawa, posible:
- lumikha ng bagong menu ng anumang uri o tanggalin ito;
- i-block o i-unblock ang mga indibidwal na item;
- gawing nakikita o hindi nakikita ang isang menu item;
- magdagdag o mag-alis ng item sa menu;
- baguhin ang pangalan ng item;
- lagyan ng tsek o alisan ng tsek ang isang item;
- ilipat ang form mula sa isang pangunahing menu patungo sa isa pa.
Ang mga kakayahang ito ay ibinibigay sa pamamagitan ng pagtatakda ng mga katangian ng mga item sa menu sa mga kinakailangang halaga at pagtawag sa mga kaukulang pamamaraan.
Upang magdagdag ng mga item sa menu, gamitin ang mga paraan ng Magdagdag at magpasok upang alisin ang mga item sa menu, gamitin ang paraan ng Tanggalin.
Ang Add (item: TMenuitem) procedure ay nagdaragdag ng elementong tinukoy ng item sa dulo ng submenu na tinatawag na paraang ito. Kung ang submenu ay hindi umiiral, ito ay nilikha.
Halimbawa. Pagdaragdag ng item sa menu.
pamamaraan Forml.mnuItemAddClick(Sender:TSender);
var NewItem: TMenuitem;
NewItem:= TMenuitem.Create(Self);
NewItem.Caption:=" Bagong elemento";
mnuFile.Add(NewItem);
end;Ang isang bagong item ay idinagdag sa dulo ng listahan ng mga command sa menu ng File. Ang idinagdag na item ay may pamagat na Bagong Item. Ang isang bagong item ay unang nilikha gamit ang Lumikha constructor.
Ang Insert (Index: Integer; Item: TMenuItem) na pamamaraan, hindi tulad ng nakaraang pamamaraan, ay nagdaragdag ng bagong item sa menu sa tinukoy na posisyon. Tinutukoy ng index parameter ang posisyon sa hanay ng item ng menu kung saan ipinasok ang bagong item. Kung ang halaga ng parameter ng index ay nasa labas ng pinapayagang hanay, halimbawa, mas malaki kaysa sa bilang ng mga subelement ng item sa menu na binago, pagkatapos ay may mangyayaring pagbubukod.
Ang Delete (index: integer) procedure ay tinatanggal ang tinukoy na menu item. Kung ang item na tinatanggal ay may mga subitem, ang mga ito ay tatanggalin din.
Halimbawa. Pagtanggal ng item sa menu.
pamamaraan Forml.mnuItemDeleteClick(Sender:TSender);
if mnuFile.Items.Caption = "Ikalawang item"
pagkatapos mnuFile.Delete(2); wakas;
Ang pamamaraan ay nag-aalis ng isang item mula sa File submenu. Ang item na tatanggalin ay may pamagat na Pangalawang Item at nasa pangalawang posisyon. Ang isang paunang pagsusuri ay ginawa upang makita kung ang item na may gustong pangalan ay talagang tinatanggal.
Ang isang form ay maaaring magkaroon ng higit sa isang pangunahing menu. Ginagamit ito, halimbawa, sa kaso kung ang isa sa kanila ay naglalaman ng mga heading sa Ingles, at ang isa pa - sa Russian. Upang ipatupad ang tampok na ito, dapat kang maglagay ng dalawang bahagi ng MainMenu sa form at ihanda ang kaukulang mga menu. Pagkatapos nito, kapag isinasagawa ang programa, posibleng ikonekta ang alinman sa mga menu na ito sa form. Upang ikonekta ang pangunahing menu sa form, gamitin ang Menu property ng form.
Halimbawa. Lumipat sa pagitan ng dalawang pangunahing menu.
kung Forml.Menu = EnglishMenu
tapos Forml.Menu:= RussianMenu else Forml.Menu:= EnglishMenu;
Ang mga menu ay pinangalanang EnglishMenu at RussianMenu. Ang code na nagsasagawa ng paglipat ng menu ay maaaring isama sa kaukulang handler.
Alalahanin na ang Menu ay isa sa mga katangian ng form na tumuturo sa pangunahing menu na kasalukuyang aktibo.
Narinig mo na ba ang pahayag na "hindi ka makakagawa ng isang dynamic na dropdown na menu gamit lamang ang CSS sa IE"? Sigurado ako. Kaya, naniniwala ka ba talaga dito? Tama, mas mabuting huwag kang maniwala.
Ang layunin na nais naming makamit sa artikulong ito
Ang layunin ng artikulong ito ay gumawa ng dropdown na menu para sa IE na ganap na ginawa sa CSS. Simula sa setting na ito, pinalawak ko ang gawain upang gumana ang naturang menu sa iba pang pinakasikat na browser (approx. per.: mula sa mga komento ay lumalabas na ang mga browser na ito ay Opera 7.x at pinakabagong bersyon Firefox).
Ang layunin na gusto naming makamit sa artikulong ito ay, sa prinsipyo, higit pa o hindi gaanong pangkalahatang pang-edukasyon, i.e. magbigay pangkalahatang ideya tungkol sa ilang "nakatago" at bihirang ginagamit na mga tampok ng mga browser.
Gayundin, ang mga lalo na mausisa ay makakahanap sa artikulong ito ng ilang mga trick kung saan maaari mong makamit ang ilang hindi karaniwang mga resulta. Well, para sa mga developer, ang artikulong ito ay maaaring maging isang dahilan para sa pag-iisip o isang mapagkukunan ng mga bagong ideya.
Paano natin maiisip ang antas ng mambabasa?
Talagang iniisip ko ang paglalagay ng label sa artikulong ito bilang "advanced". Ngunit sigurado ako na kahit na hindi ang pinaka may karanasan na mga developer ay mauunawaan nang mabuti kung ano ang nakasulat sa artikulo. Sa madaling salita, dapat lang na alam ng mambabasa ang mga pangunahing kaalaman ng CSS at
HTML.
Paano naiiba ang menu na ito sa lahat ng iba pa?
Matagal akong naghahanap online para sa mga menu na ginawa sa CSS, ngunit wala akong nakitang solusyon na gagana nang walang glitches sa IE. Gayunpaman, marami akong nahanap mga kawili-wiling ideya, na humantong sa akin sa resulta na ilalarawan dito. Oo, ang aking code ay hindi rin perpekto, ngunit wala akong oras upang ayusin ang lahat ng mga error. Ang pinaka-interesante alternatibong solusyon sa lahat ng mga nakita ko (na gumagamit ng CSS) ay batay sa paggamit ng hover pseudo-class sa mga elemento ng LI. Ngunit hindi ko naisip na posible ito, tulad ng hindi ko naisip na posible ring gumawa ng drop-down na menu para sa IE nang walang mga script...
Ang pangunahing pagkakaiba sa pagitan ng minahan at iba pang mga menu ay ang minahan ay tumatakbo sa IE. Ang lahat ng mga solusyon na nakita ko ay gumagamit ng elemento ng LI bilang pangunahing elemento para sa :hover pseudo-class, gayunpaman napagpasyahan ng Microsoft na ang pseudo-class na ito ay magagamit lamang para sa
elemento A. Karamihan sa mga site ay gumagawa ng disclaimer na ang kanilang mga menu ay gumagana lamang sa mga browser ng Opera 7.x o Mozilla. Ngunit ang mga browser na ito ay ginagamit lamang ng limang porsyento ng mga user! Oo, ang mga naturang menu ay mabuti sa mga browser na ito, ngunit sa kasamaang-palad ay hindi sila makikita sa karamihan ng mga pinakakaraniwang browser. Ngayon ay itatama natin ang hindi pagkakaunawaan.
Ano ang isang menu na ginawa gamit lamang ang CSS?
Ito ay isang dynamic na menu, na nilikha gamit lamang ang CSS, at walang mga script (halimbawa, nakasulat sa JavaScript) ang ginagamit.
Ano, hindi ka makapaniwala?
Tingnan natin ang code:
| Ang partikular na menu ng Mozilla! |
Ano ang nangyayari, bakit gumagana ang lahat?
Hayaan mo akong magpareserba kaagad na sa artikulong ito ay hindi kita tuturuan gamit ang CSS. Samakatuwid, agad tayong magpatuloy upang isaalang-alang ang prinsipyo ng pagpapatakbo ng menu - sa pseudo-class na ':hover'. Oo, ito talaga ang klase. Yung. ang isang tagapili ay maaaring magmana ng isa pang tagapili na may kasamang ':hover'. Sa aming kaso, pinipili ng 'A:hover TABLE' ang '
| Paano |
| Index |
| Tungkol sa |
Na nakatago.
div#menu .a table ( display: none; z-index:-1; )
Ipinapakita ng browser ang mga nilalaman ng anchor sa mouseover at inilalapat ang naaangkop na estilo kapag ginawa nito:
div#menu .a:hover ( background: #7DA6EE; border: 1px solid black; color: black;z-index:0; )
Para sa dropdown table na ginagamit namin para sa submenu: ito ang key table, na siyang dropdown list.
div#menu .a:hover table( background: White; display: block; position: absolute; width: 125px; z-index: 0; border: 1px solid #708090; )
Para sa mga link sa loob ng submenu:
Kung mag-hover kami sa isa sa mga link sa submenu, ilalapat ng browser ang sumusunod na istilo:
Para sa mga link sa loob ng submenu:
div#menu .a:hover table a:hover ( display: block; background: #7DA6EE; color: black; text-decoration: none; padding: 0px 11px; border: 1px solid black; z-index:1000; visibility: nakikita)
Estilo ng link ng dropdown na menu:
div#menu .a:hover table a ( display: block; color: Black; text-decoration: none; padding: 1px 12px; z-index:1000; )
Maaaring napansin mo na gumamit ako ng maramihang katangian ng 'z-index' sa ilang elemento. Ang mga ito ay mga hack para sa ilang mga problema na nakita ko noong sinusubukan ang menu.
Mga pagpapabuti
Upang magdagdag ng mga sublevel sa drop-down na menu, kailangan mo lang magpasok ng isa pa elemento ng div'.menuitem' (kasama ang mga nilalaman nito at katulad na istraktura) sa halip na isang link sa parent table.
Ngayon na mayroon kang mga sub-level sa menu, kakailanganin mong alisin ang mga tag
para bigyan ang menu ng "normal check out". Bilang karagdagan dito, kakailanganin mong gumawa ng maraming kopya ng .menuitem at .a na mga klase na may parehong mga katangian ngunit magkaibang mga pangalan para sa bawat submenu.
Oo, mukhang maraming trabaho, PERO maaari mo lang idagdag ang kanilang mga tagapili sa naaangkop na seksyon ng style sheet.
Gagawa ako ng buong paglalarawan kung paano ito gagawin sa susunod.
Pansamantala, sasabihin ko na maaari mong baguhin ang menu na ito sa paraang gusto mo, iakma ito upang umangkop sa iyo. At mayroong walang katapusang mga posibilidad para dito - ang iyong imahinasyon lamang ang maaaring limitahan ang mga ito...
Pagpapalit ng mga istilo (Mga Balat)
Kung gusto mong magdagdag ng mga skin para sa iyong menu na may kakayahang baguhin ang mga ito ng user, kakailanganin mong magdagdag karagdagang mga talahanayan style at bigyan sila ng mga pangalan na may id='some_name' (para sa IE) at mga pangalan na may name='some_name' (para sa iba pang mga browser). Upang maiwasang mailapat ang parehong estilo, kailangan mong i-disable ang lahat maliban sa mga default na istilo sa pamamagitan ng pagdaragdag ng opsyong "naka-disable" sa istilo ng tag (i-link mo man ito o gumamit ng linear syntax). Hinahayaan ka ng Mozilla at Opera na lumipat ng mga pinangalanang istilo mula sa browser. Karaniwan, hindi inilalapat ng mga browser na ito ang lahat ng mga istilo na tinutukoy ng pangalan="..." at huwag pansinin ang id="...". Alam din nila kung paano gamitin ang name='default' bilang default na style sheet at name='alternate' bilang alternatibong style sheet. Maaari mong tukuyin ang isang pangalan ng istilo na makikita ng user bilang title="..." property. Halimbawa, ang demo na menu sa pahinang ito ay kinabibilangan ng mga sumusunod na kahulugan: