📄 icons.html
字号:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>DynarchMenu: menu actions</title> <style type="text/css"> @import url("../src/skin-modern.css"); body { background-color: #ccc; }</style> <script type="text/javascript"> // WARNING: the following should be a path relative to site, like "/hmenu/" // here it is set relative to the current page only, which is not recommended // for production usage; it's useful in this case though to make the demo work // correctly on local systems. _dynarch_menu_url = "../src/"; </script> <script type="text/javascript" src="../src/hmenu.js"></script> </head> <body onload="DynarchMenu.setup('menu');"> <p> The code in this page shows you various ways you can use to include icons in menu items. Again, remember, since our menu is defined as plain HTML code, then you'd need no extra JS knowledge in order to include an icon—you just need to know how to use the IMG tag, which you do, right? ;-) </p> <ul id="menu"> <li> <a href="http://dynarch.com" title="Open dynarch.com website (in a new window)" target="_blank"> <img src="../icons/dynarch-14.png" alt="" /> </a> </li> <li></li> <li> <img src="../icons/magnifier.gif" alt="" /> _File <ul> <li> <img src="../icons/save.gif" alt="" /> <a href="javascript:alert('We do not save anything; this is just an example.')"> _Save </a> </li> </ul> </li> </ul> <p> So, if you look through the page source, the golden rule to follow is simple: just include an <IMG> tag that displays the icon, as you would in ordinary HTML. For horizontal menu items (top-level) put this link into the <A> tag. For the vertical menus items, make sure the <IMG> tag is outside the link—we are using this in order to provide proper alignment of menu icons. </p> <p> You can safely include PNG icons with variable transparency, as long as you also put this line at the end of your document, before the end of the <body> tag: </p> <pre><script type=<span class="string">"text/javascript"</span> src=<span class="string">"/path/to/hmenu/src/PieNG.js"</span>></script></pre> <p> So, the idea is to have this script loaded as the last thing in page; it will take care of patching all IMG tags to work properly with Internet Explorer 5.5 or later (no need for such patches for browsers such as Mozilla, Opera, Safari, Konqueror, and maybe others, as they can display PNG-s correctly out-of-the-box; as usual, from all lot, only IE needs special treatment). </p> <script type="text/javascript" src="../src/PieNG.js"></script> </body></html><!---->⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -