Browse Source

Fix some dropdown example inits

pull/1129/head
jlukic 10 years ago
parent
commit
df21c1a0eb
3 changed files with 51 additions and 22 deletions
  1. 69
      server/documents/modules/dropdown.html.eco
  2. 2
      server/files/javascript/dropdown.js
  3. 2
      server/layouts/default.html.eco

69
server/documents/modules/dropdown.html.eco

@ -954,8 +954,8 @@ themes : ['Default']
<div class="code" data-label="HTML" data-type="html">
<div class="ui dropdown">
<input type="hidden" name="gender">
<div class="default text">Gender</div>
<i class="dropdown icon"></i>
<div class="default text">Gender</div>
<div class="menu">
<div class="item" data-value="male">Male</div>
<div class="item" data-value="female">Female</div>
@ -993,29 +993,58 @@ themes : ['Default']
<h4 class="ui header">Hybrid Option</h4>
<p>As a third option, you can include a wrapper around your <code>select</code> so that it will appear correctly on page load, but will then <b>populate the hidden menu</b> when javascript fires. In this case, the <code>select</code> element does not receive the <code>ui dropdown</code> class.</p>
<div class="code" data-label="HTML" data-type="html">
<div class="ui dropdown">
<select name="gender" id="hybrid-select">
<option value="">Gender</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
<div class="default text">Gender</div>
<i class="dropdown icon"></i>
<div class="ui vertical menu" id="hybrid">
<div class="ui dropdown item">
<i class="dropdown icon"></i>
Colors
<select>
<option>Red</option>
<option>Black</option>
<option>Blue</option>
<option>Green</option>
</select>
</div>
<div class="ui dropdown item">
<i class="dropdown icon"></i>
Sizes
<select>
<option>Small</option>
<option>Medium</option>
<option>Large</option>
<option>Huge</option>
</select>
</div>
</div>
</div>
<div class="code" data-type="javascript" data-demo="true">
$('#hybrid-select')
.dropdown()
$('#hybrid select')
.dropdown({
on: 'hover'
})
;
</div>
<div class="ui dropdown">
<select name="gender" id="hybrid-select">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
<div class="default text">Gender</div>
<i class="dropdown icon"></i>
</div>
<div class="ui vertical menu" id="hybrid">
<div class="ui dropdown item">
<i class="dropdown icon"></i>
Colors
<select>
<option>Red</option>
<option>Black</option>
<option>Blue</option>
<option>Green</option>
</select>
</div>
<div class="ui dropdown item">
<i class="dropdown icon"></i>
Sizes
<select>
<option>Small</option>
<option>Medium</option>
<option>Large</option>
<option>Huge</option>
</select>
</div>
</div>
</div>
<div class="no example">
@ -1467,7 +1496,7 @@ themes : ['Default']
</div>
</div>
<div class="ui dropdown icon button">
<div class="ui dropdown button">
<div class="text">Go to</div>
<i class="dropdown icon"></i>
<div class="menu">

2
server/files/javascript/dropdown.js

@ -8,7 +8,7 @@ semantic.dropdown.ready = function() {
$examples = $('.example'),
$hoverDropdown = $examples.filter('.hover').find('.ui.dropdown'),
$buttonDropdown = $examples.filter('.button.example').find('.ui.dropdown'),
$dropdown = $examples.filter('.dropdown').find('> .ui.dropdown:not(.simple)'),
$dropdown = $examples.filter('.dropdown').find('> .ui.dropdown:not(.simple), .inline.dropdown, .icon.buttons .button, .form .dropdown.selection'),
$transition = $examples.filter('.transition').find('.ui.dropdown'),
$transitionButton = $examples.filter('.transition').find('.ui.button').first(),
// alias

2
server/layouts/default.html.eco

@ -161,7 +161,7 @@
ignore_class : ["code", "ace_editor"]
};
</script>
<script type="text/javascript" src="//cdn.transifex.com/live.js"></script>
<script type="text/javascript" src="http://cdn.transifex.com/live.js"></script>
</head>
<body id="example" class="pushable <%= @document.css %>" ontouchstart="">
<div class="ui vertical inverted labeled icon sidebar menu" id="menu">

Loading…
Cancel
Save