The template emulates emulates MSDN Library look. To open submenus click on menu items. The appearence of this template is determined by the following parameters:
- Toggle-mode support. - Icons for expand and collapse buttons - Animation effect for subitems - Only one item can be expanded at the same time, var tcloseExpanded=1; - Menu has a static position and is placed within the table cell
Key features:
- 3-state icons for each item - Items with icons - Filters and Transitional effects - Status string shows item labels - Movable and floatable menu - Vertical orientation of the Tree Menu - different speed for an animation for submenus - Submenus automatically scrolls
Good navigation system is an important part of web site success. If people can't find their way around the site, they will rapidly give up looking and go, never to return. So, it's very significant that your website has a neat, fast, and gratifying to the eye navigation. Don't permit your web site visitors to get lost. Try Javascript/DHTML Tree!
Q: A couple days ago I purchased the multi-website license of JavaScript Tree Menu/Tree/Tabs/Popup Window/Calendar for US$149.00
I am having a very hard time getting the popup window to do just a basic function.
All I want is to have a link that I click on the page and the dhtml menu windows pop up.
As it is, the page automatically opens the popup window on loading.
I'm not a Javascript programmer which is why I purchased your product as it seemed I could pick a couple basic values in the GUI and it would create the script and code for me.
It would be REALLY handy if you had a couple of examples of how to create the following:
- Open the popup window upon the page loading
- Open the popup window when the user clicks a link
- Open the popup window when the user mouses over a link
- Close the popup window when the user mouses out
The help section doesn't even provide a menu item for the popup window.
Finding support for it on your site is difficult and what I can find is better suited for someone with Javascript knowledge.
Is there any way you can provide me the code to do this?
Thanks very much for your time and assistance.
A: We have such example on our website: > - Open the popup dhtml menu windows upon the page loading To open the popup window upon the page loading you should set thefollowing parameter: openAfter=0 deluxePopupWindow.attachToEvent(win,'openAfter=0,,,,,') You can find this parameter in Deluxe Tuner. See on-load.zip example. > - Open the popup window when the user clicks a link Create the popup window in Deluxe Tuner and save it as html. UseonClick event for a link.
See how you should write your link: <a class="sampleLink" title="Click to open sample" href="javascript:;" onclick="deluxePopupWindow.open('win', '<DIV style=\'PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; COLOR: #d33a3a; PADDING-TOP: 10px; TEXT-ALIGN: center\'><B>Sample content</B></DIV><DIV style=\'font: 13px;text-align: center; color:#666666; \'><EM>This is a simple HTML code for content. Here you may also set link to content page or ID of some element.</EM>', 'Safari Style', 'width=250,height=100,resizable,scrollbars,minimizable,fullscreen,middle,right,fade-effect,opacity=1,floatable=yes', 'windows_safari')"><b>this link</b></a> opens a medium-sized dhtml floating window. where (see on-click.js file) 'win' - is winID '<DIV style=\'PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; COLOR: #d33a3a; PADDING-TOP: 10px; TEXT-ALIGN:center\'> <B>Sample content</B></DIV><DIV style=\'font: 13px;text-align: center; color:#666666; \'><EM>This is a simple HTML code for content. Here you may also set link to content page or ID of some element.</EM>' - content of your popup window 'Safari Style' - window title 'width=250,height=100,resizable,scrollbars,minimizable,fullscreen,middle,right,fade-effect,opacity=1,floatable=yes' - parameters of the popup window'windows_safari' - window skin
Notice that you shouldn't set openAfter parameter in on-click.jsfile: deluxePopupWindow.attachToEvent(win,',,,,,')
> - Open the popup window when the user mouses over a link > - Close the popup window when the user mouses out
You should create such popup in the same way as in the previous point,but use onMouseOver/onMouseOut events.
<a class="sampleLink" title="Click to open sample" href="javascript:;" onMouseOver="deluxePopupWindow.open('win', '<DIV style=\'PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; COLOR: #d33a3a; PADDING-TOP: 10px; TEXT-ALIGN: center\'><B>Sample content</B></DIV><DIV style=\'font: 13px;text-align: center; color:#666666; \'><EM>This is a simple HTML code for content. Here you may also set link to content page or ID of some element.</EM>', 'Safari Style', 'width=250,height=100,resizable,scrollbars,minimizable,fullscreen,middle,right,fade-effect,opacity=1,floatable=yes', 'windows_safari')"><b>this link</b></a> opens a medium-sized dhtml floating window.
<a class="sampleLink" title="Click to open sample" href="javascript:;" onMouseOut="deluxePopupWindow.open('win', '<DIV style=\'PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; COLOR: #d33a3a; PADDING-TOP: 10px; TEXT-ALIGN: center\'><B>Sample content</B></DIV><DIV style=\'font: 13px;text-align: center; color:#666666; \'><EM>This is a simple HTML code for content. Here you may also set link to content page or ID of some element.</EM>', 'Safari Style', 'width=250,height=100,resizable,scrollbars,minimizable,fullscreen,bottom,left,fade-effect,opacity=1,floatable=yes', 'windows_safari')"><b>Open popup window</b></a>
Q: I am using the dhtml-tabs code. I have 2 tabs that I use for a basic form and an advanced form. The advanced form is on the second tab. When I submit, I get results. When I click the back button, the selected tab is the first one, and not the second. Is there a way to configure the tabs to be persistent or sticky. Such that clicking on the back button will result on being on the second tab, which was the last dynamic drop menu tab before going to a new page?
A: You can try to use the following dynamic drop menu function:
dtabs_itemClick(0,1)
To open your second tab.
Q: I have a javascript menu codes that I change dynamically with dm_ext_changeItem.
When I converted it to a popup window, dm_ext_changeItem does not seem to work. Is this a bug?
A: See in the popup menu you should write submenuInd+1:
The TreeView will display file and folder paths, and the DataTable will display individual log lines. Clicking on a file or folder in the Tree will cause the DataTable to filter out all but that path. (Click here for the working demo.) .... This is something that we rely on quite a bit in our product, and I believe it is just the most awesome display of YUI's awesomeness. We add context menus to both the tree and the table for extra fun functionality
The YUI DataTable Control also supports resizing of the column headers (I left this out of this example, but you can read about an approach for doing this here). If you like this style of GridView, you can do the following to incorporate it .... Very good, but if you want a good grid go to http://extjs.com/ in left menu click on Grids and Trees y watch the demo. regards. Frank. Posted by: Naveen on November 26, 2007 12:00 AM. Simply Great any plans to implement style to
However, I'm trying to make it so that I can dynamically add/remove items based on the contents of the node that's clicked when the user activates the context menu. Unfortunately, nothing I've tried is working with YUI version 2.81. ... menu on few types of dynamically loaded nodes (unlike the example to make context menu work on the entire tree) along with the requirement of changing the items of context menu on the fly. Can anyone from YUI team help us with this?
I believe the node is highlighting properly internally, it's just not changing to blue as in the single node highlighting example here: http://developer.yahoo.com/yui/examples ... light.html ... In fact, I turned off all other style sheets so only treeview.css is loaded. In my tree click handler I call oArgs.node.highlight(); that doesn't work. Calling oArgs.node.focus() does, however, change the background of the node to a light blue (as expected)
I did not post about a code sample for integrating ContextMenu with TreeView.牋. However, to answer the latter question... ... (function()...{ var init = function() ...{ //build a TreeView instance with one node: ... This will create a one-node TreeView instance which, when you right-click on the node, pops up a context menu. Regards, Eric. 但这意味着,一个树有多少个节点,就需要构建多少个ContextMenu。 后来才发现ContextMenu构造时,trigger是允许传入数组的。
Here I'd like to point out some of my likes, some annoyances, some features I'd like to see, and a weird little bug I came across. First off, here's a sample of what a mockup looks like for a fictional, non-sense product: Balsamiq Mockup screenshot .... highlight locked items on right-click menu hover…wow, cool idea. Not sure how easy it is to implement, but I'll add it to my TODO. * smaller fonts in tree – great catch and easy to do, I'll add that soon
As shown in the example immediately above, when the user hovers their mouse over a sample point, we quickly shoot off a tiny XHR call to get a subset of the details. If they want more, they can click the View Details link in the mouse over window to get more ... The site flow dictates that we render the full sampling details in a tree view to the right of the map. For our purposes we selected the Yahoo! YUI tree view for reasons that will become apparent in just a moment
If we click on the second avatar image ( ul li a img ), the event bubbles up the DOM tree to the a link with the classname "profile" , and the callback method handleClick() is called. Regardless of the technique used, it receives the same ... Yes, you're right, “delegate” was introduced in YUI 3.0 beta and has been backported into YUI 2.8. Here is the full info: http://developer.yahoo.com/yui/event/#delegate. Comment by Caridy Patino — November 14, 2009 #. This is great
You are right Marco does some awesome stuff at work too. I think just Eric referred to his pixel post theme because it's something that he did in his own time. We refer to other people who build commercial products all the time on the .... It looks like including utilities.js breaks other YUI components/widgets, including menu and treeview. Comment by Andrew Crawford — December 9, 2009 #. Andrew — not sure of the context for your question, but it sounds like one to ask on
For me its probably the best Javascript based Tree component next to the YUI Tree and some Mootools implementations. The jsTree offers many new features, from which we currently use three: Drag & Drop of nodes, here its used for moving pages around in the tree; Context menu, so users can right click and choose the desired option from the context menu (toolbar is still there); Easy tree reloading, we use it for language switching. If you want to test this component,
Something like the Yui tree sorting would be ideal, but would involve making the YUI JavaScript library compatible with Drupal (I think the Ext.js jQuery extension does this) and forcing users to download a separate copy of it to drop in .... The best tree manipulation UI I have seen lately is the tree example over at ext: http://extjs.com/deploy/ext/examples/tree/reorder.html. Whenever I needed to make a choice about the UI for Quick Admin Menu, I pretty much just copied
... then drill into each country, region, and city. Of course, once I started building it, the natural design was to support any hierarchy of data. As an example, it can display a tree like this: (Click the screenshot to play with this example.) .... Your widget really comes at the right moment 'cause I've been looking for this kind of solution working with YUI2, but I did'nt find anything so far except some functions with jquery treetable. I'm so grateful, thanks!! :-)
With respect to YUI 2.x, we have the 2.6.0 release coming up (planned for next month) with big work on DataTable, Menu, RTE, and more, and with a new Carousel Control. We will soon publish preliminary plans for 2.7, including increasing community contributions; community members are right now working on enhancements to TreeView, a forms component, and more, and we are working to make it easier for folks to contribute new work to the library. The core of YUI 2.x should
Yes, u r right. But, I need to use the connection manager to send asynchronous requests when a certain node of the tree is clicked and get the data to be displayed from the google server. So, for example, how can I send the label of the
first of all i have to say, great work you have done with this context menu. But i wondering is it to use for example for items in a tree? and for this i guess it is nessesary to have the possibility to ad some attributes. For examples ids… is there a way to to this? ...... Menu to a div (for example) then only when I right click on the text within the div do i see my menu. When I right click on the blank space within the div then it doesn't show
If I do that I end up with a lot of elements on the left side and none on the right. On the other hand, you can see that in available tree views. Hmmm… How about making this one configurable?? Do you believe it would be an overkill? ..... I 'm working with someone who feels strongly that there is the potential for confusion on the part of a visitor if a click doesn't take them to a new page, so I need to create a sort of summary page when a top level menu item is clicked
Double click on a task and you will see the use of the NativeWindow API as a new Window is launched to allow for editing of the tasks data. Highlight some text from anywhere in your system and drag it into the Custom DataGrid and you will ... For example, each element in the tree or grid has context menus that allow you to do things that you would expect (delete, open, etc). Also, the menu system includes the same functionality that you find within the application but may
Call Tree with Context Menu. You can sort on any of the columns by clicking the corresponding column headers or by selecting the column from the 'Sort By' menu items in the right-click context menu. The available columns are: ... This is a very handy feature when you start to get into serious JS development, and the only reason I use FF when writing complex JS... ie extending YUI code. 2. in the "html" tab > element > "Attributes" tab... instead of displaying [object
But a single click on the calendar icon next to the select menus summons up the Calendar Control, and another click selects your date, giving you the same result with one-third as many clicks. ... We are starting to use the YUI to improve our user interaction. The first step in this has been to extend to TreeView widget to create a directory browser style interface. Overall, its been a pleasant process, as much as that can be said about a javascript component
It works in conjunction with the user agent (browsers). For example, taking the tree view control, ARIA can be implemented to describe the layout of the tree, and the relationship of the nodes. (See Mozilla's tree example here. ... yui-dt- col-0 yui-dt-liner” id=yui-dt0-th0-liner>yui-dt-label>yui-dt-sortable title=”Click to sort ascending” href=”http://developer.yahoo.com/yui/examples/datatable/yui-dt0-sort0-ascending”>id
As shown in the example immediately above, when the user hovers their mouse over a sample point, we quickly shoot off a tiny XHR call to get a subset of the details. If they want more, they can click the View Details link in the mouse over ... The site flow dictates that we render the full sampling details in a tree view to the right of the map. For our purposes we selected the Yahoo! YUI tree view for reasons that will become apparent in just a moment. GAINSTreeView
A Quick Example of a Custom Event: Imagine a HTML page that has a dynamic content area that is updated by an AJAX method (using, for example, the YUI Connection Manager). Imagine that other components in the page need to know when new .... The process is simple: after the creation of the behaviors layers — and right after the subscribers are ready — every event will reach its corresponding behavior layer depending on the event type ( click , mouseover , etc) carrying its
executeQuery(query); %> test .... Click on the Search by Location link under My URLs in the My Content Server menu. You should see your JSP page appear in the main content pane on the right, as shown below. Enter some search terms and press the Search button. Here I searched for -33.8122, 151.1755,
So you can see there is an item node, and under there there's are links, or descriptions —so we can pull out different pieces of data that we want to work with, and given that kind of TreeView structure we can now drill down into the .... But you can also instantiate a subclass of menu that will look more like an application on a desktop. And in the green box there, we've actually got a context menu subclass, so that you can right click and have a set of options appear
<
>
See Also
How To Create Javascript Submenu Drop Down JS Menu provides 500+ web buttons, 100 submenu designs, 50 ready-made samples A RightClick Menus Using Javascript. How To Create A Submenu Inside A Menu In Java
Treeview - garterblue.com Treeview. This extension help you to the treeview menu. 2step to make the treeview of YUI. Select files on the Files Panel. Right-click and select "create YUI default"
Css Submenus. WebMenu Creator Css Submenus. Help your web site visitor find the information with ease with Vista Buttons! Tutorial Buttons Badges
ExtJs air native menu | CodeWeblog.com Adobe AIR rightclickmenu and system tray (Tray) features and implementation Using jQuery to achieve the unlimited class with a cache treemenu
Dynamic Drop Down Menu - Samples - Deluxe-Tree.com Improve your website navigation with Deluxe Tree! 9. Rightclick "Deluxe Tree/Product Info/What's New" item to capture user rightclick event. Informational menu functions:
Drag Drop Tree Javascript Template Drag Drop Tree Javascript Expandable Menu Bar In Html. Help visitors find what they search for on your web site! Try Deluxe Menu!
YUI 2: Index of Library Examples as to how various interaction patterns can be enabled in the web browser via YUI. templates to put a 180px narrow column on the right side. Preset Template 5, 240px right
Travis Roth's Weblog " Accessibility For example, the YUItree view component. is not 100% accessible, as it is not conveying Sample HTML from the YUI table example as generated by IE <!BEGIN SOURCE CODE FOR
Travis Roth's Weblog " Accessibility For example, the YUItree view component. is not 100% accessible, as it is not conveying Sample HTML from the YUI table example as generated by IE <!BEGIN SOURCE CODE FOR
Javascript Context Menu Template Javascript Context Menu Html Code Navigation Menu. Keep your Web site fast and well-structured with De Luxe DHTML Menu!
ydn-javascript : Message: Announcing YUI 2.5.2 ydn-javascript: Yahoo! User Interface Library Group Menu no longer blocks the display of the browser's default context menu when right clicking on a MenuItem
How To Create A Css Floating Menu How To Create A Css Floating Menu. Don't allow your website visitors to get lost! open Theme editor right-click "Tools/Theme editor" in the Main menu. Theme editor helps
Drag Drop Tree Javascript Template Drag Drop Tree Javascript Expandable Menu Bar In Html. Help visitors find what they search for on your web site! Try Deluxe Menu!
Javascript Context Menu Template Javascript Context Menu Html Code Navigation Menu. Keep your Web site fast and well-structured with De Luxe DHTML Menu!
Menu Js SampleMenu Js Examples. Make your web site clean and accessible with Web Page Menu!
Transitions Effects - DownloadJavascripts.com Checkout for Transitions Effects category at DOWNLOADJAVASCRIPTS.com. A comprehensive resource of: DHTML, JAVASCRIPTS, AJAX, JQUERY, YUI, WEB 2.0 etc.