HTML and CSS Reference
In-Depth Information
Using JavaScript, the details element could be used to set up a user preferences
panel in a web application, for example. In this example, the summary is a nickname for
the user, which they can then toggle open and change. Saving their changes updates the
value in the summary element, which will change the appearance of the label for the
<script type="text/javascript">
function update() {
var nick = document.getElementById("nickname");
var input = document.getElementById("input");
nick.innerHTML = input.value;
<summary id="nickname">Mac</summary>
id="input" value="Mac" /></label></p>
<p><button onclick="update();">Save...</button>
Figure 2-13 shows the process to open the details, change the name, and hit Saveā€¦,
which (using JavaScript) then updates the summary text. Obviously, this would need to
permanently save the changes to be really useful, either in a back-end database or pos-
sibly in a client-side storage (so-called web storage is available in an associated API,
discussed in Appendix A ) .
Figure 2-13. A details element using JavaScript to update the details summary dynamically
Providing toolbars: menu and command
Individual command elements placed inside a menu element can be used to create a
menu bar like those found in desktop applications. Not only that, but it can be used to
create a contextual menu or other interactive listing of menu options. Remember the
Search WWH ::

Custom Search