Status: Unset
The ChoiceEdit
widget allows users to choose an item
from an enum, in-place.
<script type="text/javascript" src="../../build/yui/current/build/yui/yui.js"></script> <script type="text/javascript" src="../../build/choiceedit/choiceedit.js"></script> <script type="text/javascript" src="../../build/anim/anim.js"></script> <!-- overlay required files --> <link type="text/css" rel="stylesheet" href="../../build/overlay/assets/pretty-overlay-core.css"></link> <link type="text/css" rel="stylesheet" href="../../build/overlay/assets/skins/sam/pretty-overlay-skin.css"></link> <!-- choiceedit required files --> <link type="text/css" rel="stylesheet" href="../../build/choiceedit/assets/choiceedit-core.css"></link>
YUI().use('node', 'event', 'widget', 'plugin', 'overlay', 'lazr.choiceedit', function(Y) { var choice_edit = new Y.ChoiceSource({ contentBox: '#status', value: 'incomplete', title: 'Change status to', items: [ { name: 'New', value: 'new', style: '', help: '', disabled: false }, { name: 'Invalid', value: 'invalid', style: '', help: '', disabled: true }, { name: 'Incomplete', value: 'incomplete', style: '', help: '', disabled: false }, { name: 'Fix Released', value: 'fixreleased', style: '', help: '', disabled: false }, { name: 'Fix Committed', value: 'fixcommitted', style: '', help: '', disabled: true }, { name: 'In Progress', value: 'inprogress', style: '', help: '', disabled: false } ] }); choice_edit.render(); })
The widget requires a well-structured block of elements. Various parts of the block will be discovered by the widget. Here's an example of some existing markup:
<p id="thestatus"> Status: <span class="value">Unset</span> <img class="editicon" src="https://bugs.edge.launchpad.net/@@/edit"> </p>
The choicelist requires three DOM elements to work correctly:
value
.editicon
.The ChoiceSource widget requires the following parameters:
Parameter | Meaning |
---|---|
contentBox |
A selector unambiguously identifying the contentBox as described in the DOM Structure section above |
value |
The current value of the field. This must match one of the
value properties on an item in items . If that
item 's name field is different from the text
currently displayed in the "value" node described in DOM Structure, the
text in that "value" node will be changed for the name . |
title |
The title displayed at the top of the popup menu |
items |
A list of dictionaries. Each dictionary must contain the fields described below. |
items
name | The displayed text for a selection |
value | The value sent to the server for a selection |
style | Arbitrary CSS styles applied to an item when displayed in the popup menu (not currently implemented) |
help | (reserved for future expansion) |
disabled | Boolean field: disabled values are displayed as disabled in the popup menu and cannot be selected |
Choose something
<p id="nullchoiceedit" style="margin-top: 25px"> <img class="addicon" src="https://bugs.edge.launchpad.net/@@/add"> <span class="nulltext">Choose something</span> <span class="value" style="display:none" /> <img class="editicon" style="display:none" src="https://bugs.edge.launchpad.net/@@/edit"> </p>