is there a way to handle menuEvents like the ones used in submenus but in top level menus that doesent have sub menus?
and use a function like:
private function menuHandler(event:MenuEvent):void {
if (event.item.#data != "top") {
Alert.show("Label: " + event.item.#label + "\n" +
"Data: " + event.item.#data, "Clicked menu item");
}
}
to Handle the clicks?
You need to understand how to raise (or dispatch) your own events when someone clicks on one of your menu items
I suggest taking a look through this to get an idea about how to manage events in Flex.
The basics of what you need, will be to listen for MouseEvent.CLICK events on your button and then redispatching them as custom menu events (possibly containing data about which one has been clicked)
You may also want to take a look at the TabBar component as this probably contains all the functionality you may want for a menu bar.
Related
I need to add a notification content that will slide from the right when a button in the header is pressed. The header is a boxview with buttons inside.
This is what I am trying to achieve:
This is what I have now(button does nothing):
I don't think Xamarin.Forms supports two Master pages (Drawers) but what you could do is add a view inside your page with it's TranslationX set to the Width of the screen, then add a ToolbarItem that, when pressed, Translates the X of the view to 0, and when pressed again, translates the view to the screen's width again. The only drawback is that this view would be below the AppBar (not like your picture that the notification panel is in front of the AppBar and the StatusBar).
The code would be something like this:
The notifications panel part:
// I think 260 is a good width (but I didn't test), experiment and see
var notificationsPanel = new StackLayout { WidthRequest = 260 };
// Needed because we don't know the Width yet
SizeChanged += (sender, e) =>
{
if(Width > 0)
notificationsPanel.TranslationX = Width;
}
The Width property is the Width of the page.
The ToolbarItem part:
if(notificationsPanel.TranslationX > 0)
notificationsPanel.TranslateTo(Width - notificationsPanel.Width);
else
notificationsPanel.TranslateTo(Width); // Here the Width will already be set
The Content of the Page:
Content = new Grid
{
Children =
{
actualContent,
notificationsPanel
}
}
Hope it helps!
EDIT
An easier idea would be to create your page without the Notifications Panel and use this library: Rg.Plugins.Popup to add the NotificationsPanel as a Popup instead of as a view inside the page.
This library has a wiki page here: Wiki. You can create a XAML page for your Popup and add a ToolbarItem on the "Root" page that, when clicked, calls a simple method that checks if a Popup is showing, if it's not, add it, if it is, remove it (a toggle-like method). Something like this:
if (PopupNavigation.PopupStack.Count > 0)
PopupNavigation.PopAsync();
else
PopupNavigation.PushAsync(new NotificationsPanel());
If you don't know how to add a ToolbarItem, it's something like this:
ToolbarItems.Add(new ToolbarItem
{
Text = "Notifications",
Icon = "notifications-icon.png" // change this based on your image requirements, Xamarin.Forms has more than one way to store images
Command = new Command(() =>
{
if (PopupNavigation.PopupStack.Count > 0)
PopupNavigation.PopAsync();
else
PopupNavigation.PushAsync(new NotificationsPanel());
})
});
If you want to know more about images with Xamarin.Forms: Working with Images
That's it. If you want you can add animations (to make the NotificationsPanel come from the right side of the screen) and in the NotificationsPanel PopupPage, remember to make the view aligned to the right and with a WidthRequest smaller than the screen's Width.
Hope it helps!
Is there a way to have two or more open panes on an AJAX accordion control? The page will default to both panes open and user can close pane if desired.
According to the AJAX Control Toolkit description page:
The Accordion is a web control that allows you to provide multiple
panes and display them one at a time
So, no is the answer to your question. You could use Collapsible Panels, which is what the Accordion control is made up of. You can have multiple instances of those visible at one time.
Use the repeater control.
Inside repeater, use accordion.
I want opposite functionality, found out this while fixing someone's code.
First, you need to use this script:
function ToggleAccordionPane(paneno) {
$find('MyAccordion_AccordionExtender')._changeSelectedIndex(-1);
if( $find('MyAccordion_AccordionExtender').get_Pane(paneno).content.style.display == "block") {
$find('MyAccordion_AccordionExtender').get_Pane(paneno).content.style.display = "none";
$find('MyAccordion_AccordionExtender')._changeSelectedIndex(paneno);
}
else {
$find('MyAccordion_AccordionExtender').get_Pane(paneno).content.style.display = "block";
}
return false;
}
Then, modify first header like this:
<Header>1. Accordion</Header>
For second and third pane:
<Header>2. AutoSize</Header>
<Header><a href="" class="accordionLink" onclick="ToggleAccordionPane(2);" >3. Control or Extender</a></Header>
Source:
http://www.c-sharpcorner.com/uploadfile/Zhenia/keeping-multiple-panes-open-in-accordion-web-control/
I am working with a coolite tabpanel. I want to handle the tab change event from client side.
listeners: {
'tabchange': function(tabPanel, tab){
// Ignore tab1 since it is a separate tab panel and we're managing history for it also.
// We'll use its handler instead in that case so we don't get duplicate nav events for sub tabs.
if(tab.id != 'tab1'){
Ext.History.add(tabPanel.id + tokenDelimiter + tab.id);
}
}
}
I am developing an web application. In this i provided a functionality means "autocomplete textbox". In this control, I need to show up 4 columns whenever user press keys in textbox, i need to collect these keys and send it to the service which will give us result as xml. then i convert xml to dataset and binded with datagird. for this i used jquery. after the result displayed ( i mean the result in datagrid which is placed in div), then i need to hide the div when the user clicks outside of the div or press escape key...
for this i used onblur event. but, when i click on the result then, i could not fire the click event for the div..
here is my jquery events...
function showList() {
if(document.getElementById("txt1").value.length > 3) {
$("#divList").hide("slow");
$("#divLoading").show();
$.ajax({
type : "POST",
url : "ajaxServerPage.aspx?streetname=" + document.getElementById("txt1").value,
success : function(responseText) {
$("#divLoading").hide();
$("#divList").show();
$('#divList').html(responseText);
//add button click events for buttons which are placed in table
$("#dataGridStreet .rowStyle").click(function(e) {
//Open_ModifyPopup($(this).attr("id"));
clickedRow($(this));
});
} // function(responseText)
});
}
}
How should I do this?
Thanks
Why reinvent the wheel: How about using a plugin to do it for you?
I'm working on an own combobox control for ASP.Net which should behave like a selectbox, I'm using a textbox, a button and a div as a selectbox replacement. It works fine and looks like this Image:
My problem now is the Selectbox close behaviour: when clicking anywhere outside the opened selectbox it should close.
So I need something like an onClick event for the whole page which should only fire when my div is open. Any suggest how to do that?
Add a click event handler to document. In the event handler, examine its target (or srcElement in IE) property to check that it isn't your open div or any of its descendants.
Set a click event handler on the document that "closes" the pseudo-combobox. In addition, set a click event handler on the pseudo-combobox's container (the div, in this case) which cancels bubbling of the event. Then any clicks in the div will bubble up only as far as the div before being halted, while clicks anywhere else will bubble all the way up to the document.
This is a much easier option than mucking around traversing the DOM from the event's target upwards to work out where the click came from.
EDIT: if you are setting the div's style to display: none; (or something similar) to hide it, then it doesn't matter if you leave the event handler on the document - hiding it when it's already hidden will have no effect. If you want to be very tidy, then add the event listeners when the div is shown, and remove them when it is hidden; but there's probably no need to bother.
document.onclick = function() {
if(clickedOutsideElement('divTest'))
alert('Outside the element!');
else
alert('Inside the element!');
}
function clickedOutsideElement(elemId) {
var theElem = getEventTarget(window.event);
while(theElem = theElem.offsetParent) {
if(theElem.id == elemId)
return false;
}
return true;
}
function getEventTarget(evt) {
var targ = (evt.target) ? evt.target : evt.srcElement;
if(targ && targ.nodeType == 3)
targ = targ.parentNode;
return targ;
}
Put a transparent div that covers whole the page and lies under your dropdown. At that div's click event hiğde your dropdown.