大家好我是jquery noobie,刚开始jqueryUI
问题OverView:
我正在尝试使用jqueryUI选项卡,其中有一个JqueryUI Split Button(未呈现)。 Cheddar,Mushrooms和Bocon被假设为分裂按钮。
我已经从网站复制了标记和jquery,所以我不会犯任何错误,但它仍然无法正常工作。
Firefox快照
代码:
我为你们创建了一个jsfiddle,但它不像我在浏览器中那样工作
Jquery的
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/redmond/jquery-ui.css"
rel="Stylesheet" />
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.8.21.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#tabs").tabs(); //Vstudio intellisense shows .tabs() and .buttonset()
$('#Toppings').buttonset(); //this means JqueryUi is attached.
}
);
HTML 的
<div id="MainBox">
<!--MainBox-->
<div id="tabs">
<ul>
<li><a href="#tabs-1">Step 1: Your Background</a></li>
<li><a href="#tabs-2">Step 2: Your Finances</a></li>
<li><a href="#tabs-3">Step 3: Your Results</a></li>
</ul>
<div id="tabs-1">
<div class="subBox">
<div class="smallBox">
fgggghgh</div>
<div class="smallBox">
fgggghgh</div>
<div class="smallBox">
fgggghgh</div>
<div class="smallBox">
fgggghgh</div>
</div>
<div class="subBox">
</div>
<div class="subBox">
</div>
<div class="subBox">
</div>
</div>
<div id="tabs-2">
<div id="Toppings">
<input type="checkbox" id="checkbox1" />
<label for="check1">
Cheddar
</label>
<input type="checkbox" id="checkbox2" />
<label for="check2">
Mushrooms
</label>
<input type="checkbox" id="checkbox3" />
<label for="check3">
Bacon
</label>
</div>
</div>
<div id="tabs-3">
<p>
Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate,
pede vel vehicula accumsan, mi neque rutrum erat,Really dummy text.</p>
<p>
Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam
ac lacus. Nulla facilisi. Praesent viverra justo vitae neque.Really dummy text twoS.</p>
</div>
</div>
</div>
答案 0 :(得分:1)
如果您将标签更改为指向正确的输入元素,我认为它会起作用。 for =“”属性必须等于输入的id。
示例:
<input type="checkbox" id="checkbox1" />
<label for="checkbox1">Cheddar</label>