diff options
Diffstat (limited to 'docs/javascript.html')
| -rw-r--r-- | docs/javascript.html | 117 |
1 files changed, 57 insertions, 60 deletions
diff --git a/docs/javascript.html b/docs/javascript.html index 923df9e01..ff0302bb2 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -201,22 +201,17 @@ <p>Toggle a modal via javascript by clicking the button below. It will slide down and fade in from the top of the page.</p> <!-- sample modal content --> - <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModal-label"> + <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> - <h3 id="myModal-label">Modal Heading</h3> + <h3 id="myModalLabel">Modal Heading</h3> </div> <div class="modal-body"> <h4>Text in a modal</h4> <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem.</p> - <form class="well"> - <label>Label name</label> - <input type="text" class="span3" placeholder="Type something…"> - </form> - <h4>Popover in a modal</h4> - <p>This <a href="#" class="btn popover-test" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">button</a> should trigger a popover on hover.</p> + <p>This <a href="#" role="button" class="btn popover-test" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">button</a> should trigger a popover on hover.</p> <h4>Tooltips in a modal</h4> <p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> should have tooltips on hover.</p> @@ -233,8 +228,8 @@ <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> </div> <div class="modal-footer"> - <a href="#" class="btn" data-dismiss="modal" >Close</a> - <a href="#" class="btn btn-primary">Save changes</a> + <a href="#" role="button" class="btn" data-dismiss="modal" >Close</a> + <a href="#" role="button" class="btn btn-primary">Save changes</a> </div> </div> <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">Launch demo modal</a> @@ -279,24 +274,25 @@ <p>You can activate modals on your page easily without having to write a single line of javascript. Just set <code>data-toggle="modal"</code> on a controller element with a <code>data-target="#foo"</code> or <code>href="#foo"</code> which corresponds to a modal element id, and when clicked, it will launch your modal.</p> <p>Also, to add options to your modal instance, just include them as additional data attributes on either the control element or the modal markup itself.</p> <pre class="prettyprint linenums"> -<a class="btn" data-toggle="modal" href="#myModal" >Launch Modal</a> +<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch Modal</a> </pre> <pre class="prettyprint linenums"> -<div class="modal" id="myModal"> +<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> - <h3>Modal header</h3> + <h3 id="myModalLabel">Modal header</h3> </div> <div class="modal-body"> <p>One fine body…</p> </div> <div class="modal-footer"> - <a href="#" class="btn">Close</a> - <a href="#" class="btn btn-primary">Save changes</a> + <a href="#" role="button" class="btn">Close</a> + <a href="#" role="button" class="btn btn-primary">Save changes</a> </div> </div> </pre> + <div class="alert alert-info"> <strong>Heads up!</strong> If you want your modal to animate in and out, just add a <code>.fade</code> class to the <code>.modal</code> element (refer to the demo to see this in action) and include bootstrap-transition.js. </div> @@ -370,41 +366,42 @@ $('#myModal').on('hidden', function () { <div class="span9 columns"> <h2>Examples</h2> <p>Click on the dropdown nav links in the navbar and pills below to test dropdowns.</p> + <div id="navbar-example" class="navbar navbar-static"> <div class="navbar-inner"> <div class="container" style="width: auto;"> <a class="brand" href="#">Project Name</a> - <ul class="nav"> + <ul class="nav" role="navigation"> <li class="dropdown"> - <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> - <ul class="dropdown-menu"> - <li><a href="#">Action</a></li> - <li><a href="#">Another action</a></li> - <li><a href="#">Something else here</a></li> + <a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> + <ul class="dropdown-menu" role="menu" aria-activedescendant="aria-active" aria-labelledby="drop1"> + <li><a tabindex="-1" href="http://google.com">Action</a></li> + <li><a tabindex="-1" href="#anotherAction">Another action</a></li> + <li><a tabindex="-1" href="#">Something else here</a></li> <li class="divider"></li> - <li><a href="#">Separated link</a></li> + <li><a tabindex="-1" href="#">Separated link</a></li> </ul> </li> <li class="dropdown"> - <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2 <b class="caret"></b></a> - <ul class="dropdown-menu"> - <li><a href="#">Action</a></li> - <li><a href="#">Another action</a></li> - <li><a href="#">Something else here</a></li> + <a href="#" id="drop2" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2 <b class="caret"></b></a> + <ul class="dropdown-menu" role="menu" aria-activedescendant="aria-active" aria-labelledby="drop2"> + <li><a tabindex="-1" href="#">Action</a></li> + <li><a tabindex="-1" href="#">Another action</a></li> + <li><a tabindex="-1" href="#">Something else here</a></li> <li class="divider"></li> - <li><a href="#">Separated link</a></li> + <li><a tabindex="-1" href="#">Separated link</a></li> </ul> </li> </ul> <ul class="nav pull-right"> <li id="fat-menu" class="dropdown"> - <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 3 <b class="caret"></b></a> - <ul class="dropdown-menu"> - <li><a href="#">Action</a></li> - <li><a href="#">Another action</a></li> - <li><a href="#">Something else here</a></li> + <a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 3 <b class="caret"></b></a> + <ul class="dropdown-menu" role="menu" aria-activedescendant="aria-active" aria-labelledby="drop3"> + <li><a tabindex="-1" href="#">Action</a></li> + <li><a tabindex="-1" href="#">Another action</a></li> + <li><a tabindex="-1" href="#">Something else here</a></li> <li class="divider"></li> - <li><a href="#">Separated link</a></li> + <li><a tabindex="-1" href="#">Separated link</a></li> </ul> </li> </ul> @@ -415,33 +412,33 @@ $('#myModal').on('hidden', function () { <ul class="nav nav-pills"> <li class="active"><a href="#">Regular link</a></li> <li class="dropdown"> - <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a> - <ul id="menu1" class="dropdown-menu"> - <li><a href="#">Action</a></li> - <li><a href="#">Another action</a></li> - <li><a href="#">Something else here</a></li> + <a class="dropdown-toggle" id="drop4" role="button" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a> + <ul id="menu1" class="dropdown-menu" role="menu" aria-activedescendant="aria-active" aria-labelledby="drop4"> + <li><a tabindex="-1" href="#">Action</a></li> + <li><a tabindex="-1" href="#">Another action</a></li> + <li><a tabindex="-1" href="#">Something else here</a></li> <li class="divider"></li> - <li><a href="#">Separated link</a></li> + <li><a tabindex="-1" href="#">Separated link</a></li> </ul> </li> <li class="dropdown"> - <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown 2 <b class="caret"></b></a> - <ul id="menu2" class="dropdown-menu"> - <li><a href="#">Action</a></li> - <li><a href="#">Another action</a></li> - <li><a href="#">Something else here</a></li> + <a class="dropdown-toggle" id="drop5" role="button" data-toggle="dropdown" href="#">Dropdown 2 <b class="caret"></b></a> + <ul id="menu2" class="dropdown-menu" role="menu" aria-activedescendant="aria-active" aria-labelledby="drop5"> + <li><a tabindex="-1" href="#">Action</a></li> + <li><a tabindex="-1" href="#">Another action</a></li> + <li><a tabindex="-1" href="#">Something else here</a></li> <li class="divider"></li> - <li><a href="#">Separated link</a></li> + <li><a tabindex="-1" href="#">Separated link</a></li> </ul> </li> <li class="dropdown"> - <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown 3 <b class="caret"></b></a> - <ul id="menu3" class="dropdown-menu"> - <li><a href="#">Action</a></li> - <li><a href="#">Another action</a></li> - <li><a href="#">Something else here</a></li> + <a class="dropdown-toggle" id="drop5" role="button" data-toggle="dropdown" href="#">Dropdown 3 <b class="caret"></b></a> + <ul id="menu3" class="dropdown-menu" role="menu" aria-activedescendant="aria-active" aria-labelledby="drop5"> + <li><a tabindex="-1" href="#">Action</a></li> + <li><a tabindex="-1" href="#">Another action</a></li> + <li><a tabindex="-1" href="#">Something else here</a></li> <li class="divider"></li> - <li><a href="#">Separated link</a></li> + <li><a tabindex="-1" href="#">Separated link</a></li> </ul> </li> </ul> <!-- /tabs --> @@ -461,16 +458,16 @@ $('#myModal').on('hidden', function () { <ul class="nav nav-pills"> <li class="active"><a href="#">Regular link</a></li> <li class="dropdown" id="menu1"> - <a class="dropdown-toggle" data-toggle="dropdown" href="#menu1"> + <a id="dLabel" role="button" class="dropdown-toggle" data-toggle="dropdown" href="#menu1"> Dropdown <b class="caret"></b> </a> - <ul class="dropdown-menu"> - <li><a href="#">Action</a></li> - <li><a href="#">Another action</a></li> - <li><a href="#">Something else here</a></li> + <ul class="dropdown-menu" role="menu" aria-activedescendant="aria-active" aria-labelledby="dLabel"> + <li><a tabindex="-1" href="#">Action</a></li> + <li><a tabindex="-1" href="#">Another action</a></li> + <li><a tabindex="-1" href="#">Something else here</a></li> <li class="divider"></li> - <li><a href="#">Separated link</a></li> + <li><a tabindex="-1" href="#">Separated link</a></li> </ul> </li> ... @@ -479,11 +476,11 @@ $('#myModal').on('hidden', function () { <pre class="prettyprint linenums"> <ul class="nav nav-pills"> <li class="dropdown"> - <a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="path/to/page.html"> + <a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html"> Dropdown <b class="caret"></b> </a> - <ul class="dropdown-menu"> + <ul class="dropdown-menu" role="menu" aria-activedescendant="aria-active" aria-labelledby="dLabel"> ... </ul> </li> |