Search completed in 1.55 seconds.
ARIA: listbox role - Accessibility
the
listbox role is used for lists from which a user may select one or more items which are static and, unlike html <select> elements, may contain images.
... description the
listbox role is used to identify an element that creates a list from which a user may select one or more static items, similar to the html <select> element.
... unlike <select>, a
listbox can contain images.
...And 34 more matches
listbox - Archive of obsolete content
a
listbox may contain multiple columns.
... there are numerous methods which allow the items in the
listbox to be retrieved and modified.
...a
listbox is expected to contain listitem elements.
...And 10 more matches
richlistbox - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] this element is used to create a list of listitems (richlistitems), similar to a
listbox, but is designed to be used when the items do not contain simple text content.
...ds additemtoselection, appenditem, clearselection, ensureelementisvisible, ensureindexisvisible, getindexoffirstvisiblerow, getindexofitem, getitematindex, getnumberofvisiblerows, getrowcount, getselecteditem, insertitemat, invertselection, movebyoffset, removeitemat, removeitemfromselection, scrolltoindex, selectall, selectitem, selectitemrange, timedselect, toggleitemselection examples <rich
listbox> <richlistitem> <description>a xul description!</description> </richlistitem> <richlistitem> <button label="a xul button"/> </richlistitem> </rich
listbox> the rich
listbox element contains multiple richlistitem elements, which can contain any content.
...(default in
listbox and rich
listbox.) multiple multiple rows may be selected at once.
...And 3 more matches
listBoxObject - Archive of obsolete content
« xul reference
listboxobject type: nsi
listboxobject the nsi
listboxobject behind the list box.
...most of the features of the list box are already available directly in the
listbox, so you will rarely have need to use this box object directly.
Index - Archive of obsolete content
1473
listboxobject xul properties, xul reference no summary!
... 1474
listbox.currentindex xul properties, xul reference no summary!
... 1772 manipulating lists tutorials, xul, xul_tutorial the xul
listbox provides a number of specialized methods.
...And 11 more matches
Index - Archive of obsolete content
742
listboxobject xul properties, xul reference no summary!
... 743
listbox.currentindex xul properties, xul reference no summary!
... 1041 manipulating lists tutorials, xul, xul_tutorial the xul
listbox provides a number of specialized methods.
...And 11 more matches
Manipulating Lists - Archive of obsolete content
« previousnext » the xul
listbox provides a number of specialized methods.
... list manipulation the
listbox element provides numerous methods to retrieve and manipulate its items.
... although
listboxes may be manipulated using the standard dom functions as well, it is recommended that the specialized
listbox functions be used instead when possible.
...And 9 more matches
List Controls - Archive of obsolete content
xul provides two types of elements to create lists, a
listbox element to create multi-row list boxes, and a menulist element to create drop-down list boxes.
...the simplest list box uses the
listbox element for the box itself, and the listitem element for each item.
...example 1 : source view <
listbox> <listitem label="butter pecan" /> <listitem label="chocolate chip" /> <listitem label="raspberry ripple" /> <listitem label="squash swirl" /> </
listbox> like with the html option element, you can assign a value for each item using the value attribute.
...And 8 more matches
Commands - Archive of obsolete content
you might use this to have a
listbox respond to cut, copy and paste operations, for instance.
... example: controller implementation let's assume that we want to implement a
listbox that handles the delete command.
... when the user selects delete from the menu, the
listbox deletes the selected row.
...And 6 more matches
Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
problems can easily happen merely by having two
listboxes visible at the same time, because selected
listbox items use the system highlight color, even when the
listbox itself is not focused.
...to fix this for standard
listboxes, use owner drawn list items, so that you can change the highlight color when an item doesn't have focus.
... for
listboxes that are not focused, use a different highlight color, to give the appearance that the
listbox is no longer focused -- a lighter color for unfocused lists will also make the
listbox state more visually obvious and thus more usable for everyone.
...And 4 more matches
Trees - Archive of obsolete content
in some ways, a tree has some similarities with the
listbox.
...the tree also supports nested rows, whereas the
listbox does not.
... however,
listboxes may contain any type of content, whereas trees may only contain text and images.
...And 3 more matches
XUL controls - Archive of obsolete content
label reference <
listbox> the
listbox is used to select an item from a list of labelled items.
... <
listbox> <listitem label="chocolate"/> <listitem label="jelly beans"/> </
listbox> more information about the
listbox element.
...
listbox reference related elements: listcell listcols listcol listhead listheader listitem <menulist> a menulist (or combobox) is used to create a control with a drop down to select a value.
...And 3 more matches
How to enable locale switching in a XULRunner application - Archive of obsolete content
i chose a
listbox with a button.
...sample chrome/chrome.manifest content localeswitchdemo content/ locale localeswitchdemo de-de locale/de-de/ locale localeswitchdemo en-gb locale/en-gb/ locale localeswitchdemo fr-fr locale/fr-fr/ how are you going to populate the xul
listbox?
...here is a code snippet showing how this is done: the definition of the xul control: <
listbox id="locale-
listbox"> <!-- generated list items go in here --> </
listbox> <button label="&switchlocale.button;" oncommand="changelocale()"/> the javascript code to populate the control: try { // query available and selected locales var chromeregservice = components.classes["@mozilla.org/chrome/chrome-registry;1"].getservice(); var xulchromereg = chromeregservice.queryinterface(components.interfaces.nsixulchromereg...
...And 3 more matches
SQLite Templates - Archive of obsolete content
this simple example shows how to display a
listbox containing the values in one column in a database table.
... <
listbox datasources="profile:userdata.sqlite" ref="*" querytype="storage"> <template> <query> select name from myfriends </query> <action> <listitem uri="?" label="?name"/> </action> </template> </
listbox> the query returns the list of values from the 'name' column in the table 'myfriends'.
...the effect is a
listbox containing the names from the database.
...And 2 more matches
XUL Changes for Firefox 1.5 - Archive of obsolete content
<rich
listbox> and <richlistitem> the <rich
listbox> and <richlistitem> elements are used for creating lists containing arbitrary content.
... this element works similarly to the <
listbox> which is designed primarily for lists of textual items.
... the <rich
listbox> supports much of the same api as the <
listbox> and single items, created with the <richlistitem> element may be selected.
...And 2 more matches
listitem - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a single row in a
listbox.
... attributes accesskey, checked, command, crop, current, disabled, image, label, preference, selected, tabindex, type, value properties accesskey, accessible, checked, control, crop, current, disabled, image, label, selected, tabindex, value style classes listitem-iconic examples <
listbox id="thelist"> <listitem label="ruby"/> <listitem label="emerald"/> <listitem label="sapphire" selected="true"/> <listitem label="diamond"/> </
listbox> attributes accesskey type: character this should be set to a character that is used as a shortcut key.
...to change the currently selected item in a
listbox, use the
listbox property selecteditem.
...And 2 more matches
Sorting Results - Archive of obsolete content
<
listbox datasources="people2.xml" ref="*" querytype="xml" sort="?name" sortdirection="ascending"> <template> <query expr="*/*"/> <action> <listitem uri="?" label="?name"/> </action> </template> </
listbox> it will often be the case that multiple items have the same value, especially for larger amounts of data.
...changing the sort to change the sorting for a template's generated contents, you can either change the sort related attributes and rebuild the template, or you can call the sort method of the sort service: var
listbox = document.getelementbyid("a
listbox"); var sortservice = components.classes["@mozilla.org/xul/xul-sort-service;1"].
... getservice(components.interfaces.nsixulsortservice); sortservice.sort(
listbox, "?gender", "descending"); this code will sort a
listbox by title in a descending order.
... the arguments to the sort method specify the root node (the
listbox), the sort key and the sort direction.
XML Templates - Archive of obsolete content
an example: <
listbox datasources="people.xml" ref="*" querytype="xml"> <template> ...
... </template> <
listbox> the url in the datasources attribute may be a relative url or an absolute url.
...here is an example: <
listbox datasources="people.xml" ref="*" querytype="xml"> <template> <query expr="person"/> <action> <listitem uri="?" label="?name"/> </action> </template> </
listbox> the expr attribute is a very simple xpath expression which simply retrieves the person elements from within the datasource.
... <people id="famouspeople" xmlns=""> <person name="napoleon bonaparte" gender="male"/> <person name="cleopatra" gender="female"/> <person name="julius caesar" gender="male"/> <person name="ferdinand magellan" gender="male"/> <person name="laura secord" gender="female"/> </people> <
listbox datasources="#famouspeople" ref="*" querytype="xml"> <template> <query expr="person"/> <action> <listitem uri="?" label="?name"/> </action> </template> </
listbox> here, an anchor reference, starting with a number sign (#) is used for the datasources attribute.
Things I've tried to do with XUL - Archive of obsolete content
xbl in
listboxes using xbl bindings in
listboxes is not easy because there is a big bug there: if you create from js an element you want to bind, and if it is hidden when the
listbox is first rendered, the
listbox does not create a frame for it, and the xbl doesn't get attached...
... multi-column
listboxes when adding items to multi-column
listboxes, you can't use the appenditem api: // auto-create and attach 1st cell var row = my
listbox.appenditem( label, value ); // create and attach 2nd cell var cell = document.createelement('listcell'); cell.setattribute('label', label2 ); cell.setattribute('value', value2 ); row.appendchild( cell ); // etc // ...
...instead, you must build up your own listitem full of listcells, and then add that listitem to the
listbox, using generic dom calls: var row = document.createelement('listitem'); // create and attach 1st cell var cell = document.createelement('listcell'); cell.setattribute('label', label ); cell.setattribute('value', value ); row.appendchild( cell ); // create and attach 2nd cell cell = document.createelement('listcell'); cell.setattribute('label', label2 ); cell.setattribute('value', value2 ); row.appendchild( cell ); // etc // ...
... // attach row my
listbox.appendchild( row ); ...
Accessibility/XUL Accessibility Reference - Archive of obsolete content
image <image src="images/img.xbm" tooltiptext='<!--image label-->'/> key see keyboard shortcut tutorial keyset see keyboard shortcut tutorial
listbox <label control='listid'><!--label text--></label> <
listbox id="listid"> <listitem value="val" label="<!--item text-->"/> </
listbox> <label control='listid2' value='<!--list label-->' /> <
listbox rows="5" id='listid2'> <listcols> <listcol/> <listcol/> <listcol/> </listcols> <listhead> <listheader label="name" /> <listheader label="sex" /> <listheader ...
...label="color" /> </listhead> <listitem> <label value="<!--pearl-->" /> <label value="<!--female-->" /> <label value="<!--gray-->" /> </listitem> </
listbox> i don't seem to be able to find a straightforward way to read the header labels in jaws.
... items are read per line as in "pearl female gray" listitem see
listbox menuitem see menulist and menubar menubar <menubar hidden="false"> <menu label="file" accesskey="f"> <menupopup> <menuitem label="new" accesskey="n" key="file-new-key"/> </menupopup> </menu> </menubar> menulist <label value="<!--label text-->" control="comboid" /> <menulist id="comboid"> <menupopup> <menuitem label="<!--option1-->" /> <menuitem label="<!--option2-->" selected="true" /> <menuitem label="<!--option3-->" /> </menupopup> </menulist> menupopup see menulist and menubar popup see popupset popupset be careful regarding keyboard access of popups.
...ccessibility issues yet: arrowscrollbox bbox box grippy hbox menuseparator overlay page script spacer splitter stringbundle stringbundleset vbox window elements not processed yet: action binding bindings broadcaster broadcasterset conditions content dialog dialogheader editor listcell member observes preference preferences prefpane prefwindow resizer rich
listbox richlistitem resizer rule scrollbar scrollbox scrollcorner separator template textnode titlebar toolbar toolbarbutton toolbargrippy toolbaritem toolbarpalette toolbarseparator toolbarset toolbarspacer toolbarspring toolbox tooltip treeseparator triple wizard wizardpage cases to revisit: ...
nsIAccessibleRole
it is used for xul:
listbox, html:select@size, role="list".
... role_option 117 an option in a
listbox.
... role_rich_option 118 a rich option in a
listbox, it can have other widgets as children.
... role_
listbox 119 a list of options.
Additional Template Attributes - Archive of obsolete content
<
listbox datasources="template-guide-photos5.rdf" ref="http://www.xulplanet.com/rdf/myphotos" template="phototemplate"/> ...
...the
listbox here does not have any children, although it may do.
...the generated content is always inserted into the root node, in this example the
listbox, not inside the template.
XUL Questions and Answers - Archive of obsolete content
the following is the code they wrote: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="test-window" title="check list test" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul"> <
listbox rows="4"> <listhead> <listheader label="multi-column"/> </listhead> <listcols> <listcol flex="1"/> </listcols> <listitem> <listcell type="checkbox" value="1" label="vghkvghk"/> </listitem> <listitem> <listcell type="checkbox" value="2" label="vghjkvk" checked="true"/> </listitem> <listitem> <listcell type="checkbox" value="3" label="hukfzgjcfj" disabled...
...="true"/> </listitem> </
listbox> <
listbox rows="4"> <listhead> <listheader label="single-column"/> </listhead> <listitem type="checkbox" value="1" label="vghkvghk"/> <listitem type="checkbox" value="2" label="vghjkvk" checked="true"/> <listitem type="checkbox" value="3" label="hukfzgjcfj" disabled="true"/> </
listbox> </window> list box handlers can only check for listitems not listcells.
...others, like <
listbox>, cannot be so tied, but one can always write a script that updates preferences explicitly, via nsiprefbranch interface.
listcol - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a column in a
listbox.
... examples example <!-- a two column
listbox with one column flexible --> <
listbox> <listhead> <listheader label="first"/> <listheader label="last"/> </listhead> <listcols> <listcol flex="1"/> <listcol/> </listcols> <listitem> <listcell label="buck"/> <listcell label="rogers"/> </listitem> <listitem> <listcell label="john"/> <listcell label="painter"/> </listitem> </
listbox> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minhei...
...des(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements
listbox, listcell, listcols, listhead, listheader, listitem ...
listcols - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a container for the columns of a
listbox, each of which are created with the listcol element.
... example <!-- creates a two column
listbox --> <
listbox> <listcols> <listcol flex="1"/> <listcol flex="1"/> </listcols> <listitem> <listcell label="buck"/> <listcell label="rogers"/> </listitem> <listitem> <listcell label="john"/> <listcell label="painter"/> </listitem> </
listbox> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, ori...
...des(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements
listbox, listcell, listcol, listhead, listheader, listitem ...
listheader - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a header for a single column in a
listbox.
... attributes disabled properties acesssibletype examples <
listbox> <listhead> <listheader label="name"/> <listheader label="occupation"/> </listhead> <listitem> <listcell label="george"/> <listcell label="house painter"/> </listitem> <listitem> <listcell label="mary ellen"/> <listcell label="candle maker"/> </listitem> <listitem> <listcell label="roger"/> <listcell label="swashbuckler"/> </listitem> </
listbox> attributes disabled type: boolean indicates whether the element is disabled or not.
...des(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements
listbox, listcell, listcol, listcols, listhead, listitem ...
XForms Select1 Element - Archive of obsolete content
representations the xforms select1 element can be represented by the following widgets for the specified appearance attribute values: combobox - default representation (xhtml/xul)
listbox - used when appearance = 'compact' (xhtml/xul) radio group - used when appearance = 'full' (xhtml/xul) combobox displaying a combobox is the default representation (xhtml/xul).
...loses focus), otherwise it is updated upon item selection
listbox the select1 is represented as
listbox (xhtml/xul).
... characteristics analogous widgets are <html:select size="5"/> and <xul:
listbox/> visual grouping by choices element isn't implemented selection="open" attribute isn't supported if incremental attribute value is false, the bound node is updated when the select control is blurred (i.e.
How to build custom form controls - Learn web development
in our example, we will use the
listbox role.
...because we use a <ul> element, we want to make sure the
listbox role of our control will supersede the list role of the <ul> element.
... to support the
listbox role, we just have to update our html like this: <!-- we add the role="
listbox" attribute to our top element --> <div class="select" role="
listbox"> <span class="value">cherry</span> <!-- we also add the role="presentation" to the ul element --> <ul class="optlist" role="presentation"> <!-- and we add the role="option" attribute to all the li elements --> <li role="option" class="option">cherry</li> <li role="option" class="option">lemon</li> <li role="option" class="option">banana</li> <li role="option" class="option">strawberry</li> ...
ARIA Test Cases - Accessibility
sults: at firefox ie opera safari jaws 9 - - n/a n/a jaws 10 - - - - voiceover (leopard) n/a n/a - fail window-eyes - - - - nvda - n/a - - zoom (leopard) pass n/a pass pass zoomtext - - - - orca - - - -
listbox and option dojo nightly build single select
listbox using aria-activedescendant
listbox in an iframe -- this is an important case as it's an example of how a mashup widget can be built (the widget source simply comes from another url, and is tied in using an iframe) yui "carousel"
listbox -- a more advanced test case expected at behavior: (mz) screen reader should announce the label an...
...d role of the
listbox when it gains focus.
... markup used: role="
listbox", "option" (listitem should only be used with list, which is for static document structures, could someone please make sure our examples follow this rule) aria-activedescendant notes: results: at firefox ie opera safari jaws 9 - - n/a n/a jaws 10 - - - - voiceover (leopard) n/a n/a - fail window-eyes...
appearance (-moz-appearance, -webkit-appearance) - CSS: Cascading Style Sheets
le level 4 values */ appearance: none; appearance: auto; appearance: menulist-button; appearance: textfield; /* "compat-auto" values, which have the same effect as 'auto' */ appearance: button; appearance: searchfield; appearance: textarea; appearance: push-button; appearance: slider-horizontal; appearance: checkbox; appearance: radio; appearance: square-button; appearance: menulist; appearance:
listbox; appearance: meter; appearance: progress-bar; /* partial list of available values in gecko */ -moz-appearance: scrollbarbutton-up; -moz-appearance: button-bevel; /* partial list of available values in webkit/blink (as well as gecko and edge) */ -webkit-appearance: media-mute-button; -webkit-appearance: caret; values standard keywords value demo browser description ...
...
listbox div { color: black; height:20px; -moz-appearance:
listbox; -webkit-appearance:
listbox; } <div>lorem</div> firefox chrome safari edge menulist div { color: black; -moz-appearance: menulist; -webkit-appearance: menulist; } <div>lorem</div> firefox chrome safari edge meter div{ color: black; -w...
... formal definition initial valueautoapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax none | auto | button | textfield | menulist-button | <compat-auto>where <compat-auto> = searchfield | textarea | push-button | slider-horizontal | checkbox | radio | square-button | menulist |
listbox | meter | progress-bar examples the following would make an element look like a menulist button: .exampleone { appearance: menulist-button; } see also this jsfiddle for an example showing how you might use appearance: none to apply custom styling to radio buttons and checkboxes.
Deprecated and defunct markup - Archive of obsolete content
--neil 03 march 2011 <bulletinboard> (made to support left/top styles, but <stack> can now do as well) <gripper> (inside of <scrollbar><thumb>; not to be used by itself) <
listboxbody> (internal use only; part of xbl for <
listbox>) <menubutton> (experiment in combining buttons and menus; use <button type> instead) <nativescrollbar> (displayed a native scrollbar; had been for mac only with native themes on) <outliner> (former name for <tree>; <
listbox> had been "<tree>") <popup> (use menupopup) <package> (no longer present but in older documentation) <scro...
...ment --neil 03 march 2011 <treecaption> (old/experimental and unsupported xul tags) <treecolgroup> (former name for <treecols> <treecolpicker> (internal use only; part of xbl for <tree>) <treefoot> (old/experimental and unsupported xul tags) <treeindentation> (old/experimental and unsupported xul tags) was a part of the old <tree> that predated <outliner> that was not converted to <
listbox>--neil 03 march 2011 <treeicon> (old/experimental and unsupported xul tags) <treerows> (internal use only; part of xbl for <tree>) attributes @debug="true" provided struts and springs around boxes to facilitate identification of flex issues but does not seem to work now you need a special debug_layout build --neil 03 march 2011 references xul element reference by neal deakin ra...
insertItemAt - Archive of obsolete content
note: you cannot insert an item to an index that does not exist, eg: trying to insert an item at the end with element.getrowcount() + 1 example <!-- this example inserts at the selected item or appends, then selects the newly created item --> <script language="javascript"> function insertitemtolist(){ var my
listbox = document.getelementbyid('my
listbox'); // create a date to get some labels and values var somedate = new date(); if(my
listbox.selectedindex == -1){ // no item was selected in list so append to the end my
listbox.appenditem( somedate.tolocaletimestring(), somedate.gettime() ); var newindex = my
listbox.getrowcount() -1 }else{ // item was selected s...
...o insert at the selected item var newindex = my
listbox.selectedindex; my
listbox.insertitemat(newindex, somedate.tolocaletimestring(), somedate.gettime()); } // select the newly created item my
listbox.selectedindex = newindex; } </script> <button label="insert item at selected" oncommand="insertitemtolist()"/> <
listbox id="my
listbox"> <listitem label="foo"/> </
listbox> see also appenditem() removeitemat() ...
removeItemAt - Archive of obsolete content
<script language="javascript"> function removeselecteditem(){ var my
listbox = document.getelementbyid('my
listbox'); if(my
listbox.selectedindex == -1){ return; // no item selected so return }else{ my
listbox.removeitemat(my
listbox.selectedindex); } } function removeallitems(){ var my
listbox = document.getelementbyid('my
listbox'); var count = my
listbox.itemcount; while(count-- > 0){ my
listbox.removeitemat(0); } } </script> <button label="remove selected item" oncommand="removeselecteditem()"/> <button label="remove all items" oncommand="remove...
...allitems()"/> <
listbox id="my
listbox"> <listitem label="alpha"/> <listitem label="beta"/> <listitem label="oscar"/> <listitem label="foxtrot"/> </
listbox> see also removeallitems() insertitemat() ...
Multiple Queries - Archive of obsolete content
the following is the basic structure of a template with multiple queries: <
listbox datasources="..." ref="..."> <queryset> <query> ...
... </rule> </queryset> </
listbox> each queryset holds a query and its set of rules.
Namespaces - Archive of obsolete content
for example using the following xml document containing a list of people: <people xmlns="www.example.com/people"> <person name="napoleon bonaparte" gender="male"/> <person name="cleopatra" gender="female"/> <person name="julius caesar" gender="male"/> <person name="ferdinand magellan" gender="male"/> <person name="laura secord" gender="female"/> </people> <
listbox datasources="people.xml" ref="*" querytype="xml"> <template xmlns:ns="www.example.com/people"> <query expr="ns:person"/> <action> <listitem uri="?" label="?ns:name"/> </action> </template> </
listbox> once added to the template element the namespaces can then be referenced inside temple rule elements too, this works both in rdf and xml templates.
... <
listbox datasources="people.xml" ref="*" querytype="xml"> <template xmlns:ns="www.example.com/people"> <query expr="ns:person"/> <rule ns:gender="male"> <label uri="?" label="?ns:name"/> </action> </template> </
listbox> ...
XUL Reference - Archive of obsolete content
e « alphabetical list of all xul elements action arrowscrollbox assign bbox binding bindings box broadcaster broadcasterset button browser checkbox caption clicktoscroll colorpicker column columns commandset command conditions content datepicker deck description dialog dialogheader dropmarker editor grid grippy groupbox hbox iframe image key keyset label
listbox listcell listcol listcols listhead listheader listitem member menu menubar menuitem menulist menupopup menuseparator notification notificationbox observes overlay page panel param popupset preference preferences prefpane prefwindow progressmeter query queryset radio radiogroup resizer rich
listbox richlistitem row rows rule scale script scrollbar scrollbox ...
...grippy toolbaritem toolbarpalette toolbarseparator toolbarset toolbarspacer toolbarspring toolbox tabbox tabs tab tabpanels tabpanel groupbox caption separator spacer button checkbox colorpicker datepicker menulist progressmeter radio radiogroup scale splitter textbox textbox (firefox autocomplete) textbox (mozilla autocomplete) timepicker description label image
listbox listitem listcell listcol listcols listhead listheader rich
listbox richlistitem tree treecell treechildren treecol treecols treeitem treerow treeseparator box hbox vbox bbox deck stack grid columns column rows row scrollbox action assign binding bindings conditions content member param query queryset rule template textnode triple where script commandse...
listcell - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a single cell of a
listbox.
... tips if you need to right-align a cell's contents, you can do so like this: cell = document.createelement("listcell"); cell.setattribute("label", "this is the cell's label"); cell.setattribute("style", "text-align:right"); related elements
listbox, listcol, listcols, listhead, listheader, listitem ...
listhead - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a header row of a
listbox.
...des(), insertbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements
listbox, listcell, listcol, listcols, listheader, listitem ...
XForms Select Element - Archive of obsolete content
representations the xforms select element can be represented by the following widgets for the specified appearance attribute values: list - default representation (xhtml/xul) check group- used when appearance = 'full' (xhtml/xul) list displaying a
listbox is the default representation (xhtml/xul).
... characteristics analogous widgets are <html:select size="5" multiple="true"/> and <xul:
listbox seltype="multiple"/> visual grouping by choices element isn't implemented if incremental attribute value is false, the bound node is updated when the select control is blurred (i.e.
Mozilla XForms User Interface - Archive of obsolete content
it can have the following representations:
listbox - default representation checkbox group - used when appearance = 'full' select1 combobox control.
...it can have the following representations: combobox - default representation
listbox - used when appearance = 'compact' radio group - used when appearance = 'full' additional elements these elements may be used as child elements to the form controls described above.
WAI-ARIA basics - Learn web development
<nav>), or go beyond html5 semantics to provide signposts to different functional areas, e.g search, tabgroup, tab,
listbox, etc.
...in these situations, aria can help to provide what's missing with a combination of roles like button,
listbox, or tabgroup, and properties like aria-required or aria-posinset to provide further clues as to functionality.
The Firefox codebase: CSS Guidelines
in general, the following colors are used: -moz-field: textbox or field background colors, also used as the background color of
listboxes or trees.
... -moz-fieldtext: textbox or field text colors, also used as the text color of
listboxes or trees.
XForms Accessibility
it can have the following representations:
listbox checkboxes group select1 allows the user to choose a single value from a list of pre-defined values (see the spec, the docs).
... it can have the following representations: combobox
listbox radio group additional elements these elements may be used as child elements to the form controls described above.
Recommended Drag Types - Web APIs
the following example shows how to create an area for receiving dropped files: <
listbox ondragenter="return checkdrag(event)" ondragover="return checkdrag(event)" ondrop="dodrop(event)"/> <script> function checkdrag(event) { return event.datatransfer.types.contains("application/x-moz-file"); } function dodrop(event) { var file = event.datatransfer.mozgetdataat("application/x-moz-file", 0); if (file instanceof components.interfaces.nsifile) { event.curre...
...during the drop event, the data associated with the file type is retrieved, and the filename of the file is added to the
listbox.
ARIA: textbox role - Accessibility
for example, in a combobox, focus may remain on the textbox while the value of aria-activedescendant on the textbox element refers to a descendant of a popup
listbox that is controlled by the textbox.this attribute must be updated programmatically as the focus changes.
... focus event handler and aria-activedescendent attribute if you are implementing a composite widget, such as a combobox composed of a text box and a
listbox, you need to manage the aria-activedescendent attribute using a handler.
WAI-ARIA Roles - Accessibility
it is normally used in conjunction with the listitem role, which is used to identify a list item contained inside the list.aria:
listbox rolethe
listbox role is used for lists from which a user may select one or more items which are static and, unlike html <select> elements, may contain images.aria: listitem rolethe aria listitem role can be used to identify an item inside a list of items.
... alertdialog banner combobox command columnheader (estelle) complementary composite definition directory feed gridcell (eric e) group input landmark link - old page
listbox log - old page marquee math menu menubar menuitem menuitemcheckbox menuitemradio none note option presentation progressbar - old page radio - old page radiogroup range region roletype rowheader(estelle) scrollbar searchbox section sectionhead select separator slider - old page spinbutton status - old page structure tab tablist (michiel) tabpanel (michiel) term t...
In-Depth - Archive of obsolete content
button, checkbox-container, checkbox, dialog, dualbutton, dualbutton-dropdown,
listbox, menu, menulist-textfield, menulist-button, menulist, menulist-text, progressbar, progresschunk, radio-container, radio, resizer, resizerpanel, separator, scrollbar, statusbar, statusbarpanel, toolbarbutton, toolbox, toolbar, treeheadercell, treeheadersortarrow, treeview, treeitem, treetwisty, treetwistyopen, tooltip, textfield, tabpanels, tab, tab-left-edge, tab-right-edge, scrollbartrack-horizo...
accessibleType - Archive of obsolete content
xulcheckbox 1003 xulcolorpicker 1004 xulcolorpickertile 1005 xulcombobox 1006 xuldropmarker 1007 xulgroupbox 1008 xulimage 1009 xullink 100a xul
listbox 100b xullistcell 1026 xullisthead 1024 xullistheader 1025 xullistitem 100c xulmenubar 100d xulmenuitem 100e xulmenupopup 100f xulmenuseparator 1010 ...
controllers - Archive of obsolete content
roller = { supportscommand : function(cmd){ return (cmd == "cmd_delete"); }, iscommandenabled : function(cmd){ if (cmd == "cmd_delete") return (list.selecteditem != null); return false; }, docommand : function(cmd){ list.removeitemat(list.selectedindex); }, onevent : function(evt){ } }; list.controllers.appendcontroller(listcontroller); } </script> <
listbox id="thelist"> <listitem label="ocean"/> <listitem label="desert"/> <listitem label="jungle"/> <listitem label="swamp"/> </
listbox> </window> ...
currentIndex - Archive of obsolete content
url" flex="1"/> </treecols> <treechildren> <treeitem> <treerow> <treecell label="joe@somewhere.com"/> <treecell label="top secret plans"/> </treerow> </treeitem> <treeitem> <treerow> <treecell label="mel@whereever.com"/> <treecell label="let's do lunch"/> </treerow> </treeitem> </treechildren> </tree> see also
listbox.currentindex ...
selectedItem - Archive of obsolete content
the
listbox, rich
listbox, radiogroup, etc., not the list item that was selected) when it is changed either via this property, the selectedindex property, or changed by the user.
Property - Archive of obsolete content
focuseditem forcecomplete group handlectrlpageupdown handlectrltab hasuservalue height hidden hideseconds highlightnonmatches homepage hour hourleadingzero id ignoreblurwhilesearching image increment inputfield inverted is24hourclock ispm issearching iswaiting itemcount label labelelement lastpermanentchild lastselected left linkedpanel
listboxobject locked markupdocumentviewer max maxheight maxlength maxrows maxwidth menu menuboxobject menupopup min minheight minresultsforpopup minwidth minute minuteleadingzero mode month monthleadingzero name next nomatch notificationshidden object observes onfirstpage onlastpage open ordinal orient pack pagecount pageid pageincrement...
Introduction - Archive of obsolete content
for example: <
listbox datasources="http://www.xulplanet.com/ds/sample.xml" querytype="xml"> <template> <listitem label="?name"/> </template> </
listbox> this template uses an xml datasource to generate a
listbox.
Box Objects - Archive of obsolete content
some of these subtypes, such as the stack or
listbox are needed for more complex layouts than the basic box, while others such as the button are used only to add extra mouse and key event handling.
Tree Box Objects - Archive of obsolete content
n tree.boxobject.queryinterface(components.interfaces.nsitreeboxobject) as shown in the code examples on this page because: let boxobject = tree.treeboxobject; note: is equivalent to: let boxobject = tree.boxobject; boxobject.queryinterface("components.interfaces.nsitreeboxobject"); scrolling the tree you can also scroll the tree using four different methods, similar to those available for
listboxes.
elements - Archive of obsolete content
a action arrowscrollbox b bbox binding bindings box broadcaster broadcasterset button browser c checkbox caption colorpicker column columns commandset command conditions content d deck description dialog dialogheader e editor grid grippy groupbox h hbox i iframe image k key keyset l label
listbox listcell listcol listcols listhead listheader listitem m member menu menubar menuitem menulist menupopup menuseparator o observes overlay p page popup popupset preference preferences prefpane prefwindow progressmeter r radio radiogroup resizer rich
listbox richlistitem resizer row rows rule s script scrollbar scrollbox scrollcorner ...
menulist - Archive of obsolete content
the
listbox, rich
listbox, radiogroup, etc., not the list item that was selected) when it is changed either via this property, the selectedindex property, or changed by the user.
prefpane - Archive of obsolete content
for example, if you are using a
listbox and the user changes the contents of the
listbox (such as adding or removing an item) and you want to sync the changes back to a preference, you must write an onsynctopreference handler for your
listbox that returns the value to be written to the preference element, and then call the userchangedvalue function every time you edit the list in a way that should cause the preference's value to change...
radiogroup - Archive of obsolete content
the
listbox, rich
listbox, radiogroup, etc., not the list item that was selected) when it is changed either via this property, the selectedindex property, or changed by the user.
tabs - Archive of obsolete content
the
listbox, rich
listbox, radiogroup, etc., not the list item that was selected) when it is changed either via this property, the selectedindex property, or changed by the user.
reftest opportunities files - Archive of obsolete content
test/sec051103b http://dbaron.org/css/test/order http://dbaron.org/css/test/inherit http://dbaron.org/css/test/sec060402 http://dbaron.org/css/test/sec060403b http://dbaron.org/css/test/specific http://dbaron.org/css/test/noncss1 http://dbaron.org/css/test/noncss2 http://dbaron.org/css/test/shortbox http://dbaron.org/css/test/shortbox2 http://dbaron.org/css/test/rootbox http://dbaron.org/css/test/
listbox http://dbaron.org/css/test/margtest http://dbaron.org/css/test/shortborder http://dbaron.org/css/test/shortborder2 http://dbaron.org/css/test/sec0805 http://dbaron.org/css/test/dborder http://dbaron.org/css/test/sec090102 http://dbaron.org/css/test/sec090201 http://dbaron.org/css/test/sec090203 http://dbaron.org/css/test/sec090204 http://dbaron.org/css/test/sec090205 http://dbaron.org/css/test/se...
Example 5 - Learn web development
change states html content <form class="no-widget"> <select name="myfruit"> <option>cherry</option> <option>lemon</option> <option>banana</option> <option>strawberry</option> <option>apple</option> </select> <div class="select" role="
listbox"> <span class="value">cherry</span> <ul class="optlist hidden" role="presentation"> <li class="option" role="option" aria-selected="true">cherry</li> <li class="option" role="option">lemon</li> <li class="option" role="option">banana</li> <li class="option" role="option">strawberry</li> <li class="option" role="option">apple</li> </ul> </div> </form> css content .widget select, .no-widget .select { posit...
Accessibility API cross-reference
in aria, used to nest browsable rich text content inside interactive content document n/a n/a document document a drop down list, different from combobox droplist n/a n/a
listbox for math & chemistry equation n/a n/a math a scrollable list of articles where scrolling may cause articles to be added to or removed from either end of the list.
Gecko info for Windows accessibility vendors
n/a role_list xul: <
listbox> html: <select size=""> where size > 1 -- state_readonly is off html: <ol> or <ul> -- state_readonly is on dhtml: role="wairole:list" role_listitem html: <li>, <option> or <optgroup> dhtml: role="wairole:listitem" xul: <listitem> sets state_selected if the current listitem is selected.
Accessible Toolkit Checklist
space bar toggles checkboxes for
listboxes, use owner drawn list items to show a different highlight color when the list is not focused.
How to implement a custom autocomplete search component
in case you do not like the standard tree layout of the autocomplete popup, you can also trigger the use of a rich
listbox by linking a panel with the type attribute set to "autocomplete-rich
listbox" like this: <panel id="richpopup" type="autocomplete-rich
listbox" /> <textbox id="text1" type="autocomplete" autocompletesearch="simple-autocomplete" showcommentcolumn="true" autocompletepopup="richpopup" autocompletesearchparam='[{"value":"mark","comment":"cool dude"},{"value":"mary","comment":"nice la...
Exploitable crashes
if you see a hex address such as 0x292c2830 rather than a function name such as ns
listboxbodyframe::getrowcount at the top of the stack, a bug has caused the program to transfer control to a "random" part of memory that isn't part of the program.
ROLE_TABLE
mapped to at-spi: role_table atk: atk_role_table ua: nsaccessibilitygrouprole msaa/ia2: role_system_table used by aria: grid html: <table> xul: <
listbox/> ...
Gecko Roles
role_combobox_option a item of list that is shown by combobox role_image_map an image map -- has child links representing the areas role_option an option in a
listbox role_rich_option a rich option in a
listbox, it can have other widgets as children role_
listbox a list of options editor's note: use template role_ to get reference on accessible role.
Starting WebLock
enumeratesites might be used in the user interface to provide something like an editable
listbox of all sites in the white list.
nsIAccessibleProvider
xul controls constants constant value description xulalert 0x00001001 xulbutton 0x00001002 xulcheckbox 0x00001003 xulcolorpicker 0x00001004 xulcolorpickertile 0x00001005 xulcombobox 0x00001006 xuldropmarker 0x00001007 xulgroupbox 0x00001008 xulimage 0x00001009 xullink 0x0000100a xul
listbox 0x0000100b xullistcell 0x00001026 xullisthead 0x00001024 xullistheader 0x00001025 xullistitem 0x0000100c xulmenubar 0x0000100d xulmenuitem 0x0000100e xulmenupopup 0x0000100f xulmenuseparator 0x00001010 xulpane 0x00001011 xulprogressmeter 0x00001012 xulscale 0x00001013 xulstatusbar 0x00001014 xulradiobutton 0x00001015 xulradiogroup 0x00001016...
nsIDOMXULElement
gets or creates a box object for the element; browser, editor, iframe,
listbox, menu, menupopup, scrollbox, tooltip and tree elements receive specialized box objects allowing access to additional properties not normally available from script.
nsIPromptService
select example select displays a dialog with a
listbox of choices.
nsITreeView
for very simple tree views, such as those without multi-level data, you might want to consider using something simpler than a tree view, such as a
listbox.
Signaling and video calling - Web APIs
function handleuserlistmsg(msg) { var i; var listelem = document.queryselector(".user
listbox"); while (listelem.firstchild) { listelem.removechild(listelem.firstchild); } msg.users.foreach(function(username) { var item = document.createelement("li"); item.appendchild(document.createtextnode(username)); item.addeventlistener("click", invite, false); listelem.appendchild(item); }); } after getting a reference to the <ul> which contains the list of user names...
Writing WebSocket client applications - Web APIs
timestr + ") <b>" + msg.name + "</b>: " + msg.text + "<br>"; break; case "rejectusername": text = "<b>your username has been set to <em>" + msg.name + "</em> because the name you chose is in use.</b><br>" break; case "userlist": var ul = ""; for (i=0; i < msg.users.length; i++) { ul += msg.users[i] + "<br>"; } document.getelementbyid("user
listbox").innerhtml = ul; break; } if (text.length) { f.write(text); document.getelementbyid("chatbox").contentwindow.scrollbypages(1); } }; here we use json.parse() to convert the json object back into the original object, then examine and act upon its contents.
Using the aria-orientation attribute - Accessibility
<a href="#" id="handle_zoomslider" role="slider" aria-orientation="vertical" aria-valuemin="0" aria-valuemax="17" aria-valuenow="14" > <span>11</span> </a> working examples: slider example notes used with aria roles scrollbar
listbox combobox menu tree separator slider tablist toolbar related aria techniques compatibility tbd: add support information for common ua and at product combinations additional resources wai-aria specification for the aria-orientation attribute ...
Using the aria-required attribute - Accessibility
a-required="true" /> <br/> <label for="lastname">last name:</label> <input id="lastname" type="text" aria-required="true" /> <br/> <label for="streetaddress">street address:</label> <input id="streetaddress" type="text" /> </form> working examples: tooltip example (includes the use of the aria-required attribute) notes used in aria roles combobox gridcell
listbox radiogroup spinbutton textbox tree related aria techniques using the aria-invalid attribute compatibility tbd: add support information for common ua and at product combinations additional resources wai-aria specification for aria-required wai-aria authoring practices for forms constraint validation in html5 ...
Using ARIA: Roles, states, and properties - Accessibility
combobox grid (including row, gridcell, rowheader, columnheader roles)
listbox (including option role) menu menubar radiogroup (see radio role) tablist (including tab and tabpanel roles) tree treegrid document structure roles application article cell columnheader definition directory document feed figure group heading img list listitem math none note presentation row rowgroup rowheader separator table term textbox toolbar tooltip la...
Accessibility documentation index - Accessibility
68 aria:
listbox role aria, accessibility, needscontent the
listbox role is used for lists from which a user may select one or more items which are static and, unlike html <select> elements, may contain images.
Mozilla CSS extensions - CSS: Cascading Style Sheets
ted] -moz-transition-property [prefixed version still accepted] -moz-transition-timing-function [prefixed version still accepted] -moz-user-select values global values -moz-initial -moz-appearance button button-arrow-down button-arrow-next button-arrow-previous button-arrow-up button-bevel checkbox checkbox-container checkbox-label checkmenuitem dialog groupbox
listbox menuarrow menucheckbox menuimage menuitem menuitemtext menulist menulist-button menulist-text menulist-textfield menupopup menuradio menuseparator -moz-mac-unified-toolbar -moz-win-borderless-glass -moz-win-browsertabbar-toolbox -moz-win-communications-toolbox -moz-win-glass -moz-win-media-toolbox -moz-window-button-box -moz-window-button-box-maximized -moz-window-button-clos...
<menu> - HTML: Hypertext Markup Language
implicit aria role list permitted aria roles directory, group,
listbox, menu, menubar, none, presentation, radiogroup, tablist, toolbar or tree dom interface htmlmenuelement attributes this element includes the global attributes.
<ol>: The Ordered List element - HTML: Hypertext Markup Language
implicit aria role list permitted aria roles directory, group,
listbox, menu, menubar, none, presentation, radiogroup, tablist, toolbar, tree dom interface htmlolistelement attributes this element also accepts the global attributes.
<select>: The HTML Select element - HTML: Hypertext Markup Language
implicit aria role combobox with no multiple attribute and no size attribute greater than 1, otherwise
listbox permitted aria roles menu with no multiple attribute and no size attribute greater than 1, otherwise no role permitted dom interface htmlselectelement specifications specification status comments html living standardthe definition of '<select>' in that specification.
<ul>: The Unordered List element - HTML: Hypertext Markup Language
implicit aria role list permitted aria roles directory, group,
listbox, menu, menubar, none, presentation, radiogroup, tablist, toolbar, tree dom interface htmlulistelement attributes this element includes the global attributes.