Jquery UI选项卡&选择方框-下一个/上一个按钮
Jquery UI tabs & Select Box- Next/Previous buttons
我目前正在使用Jquery UI选项卡和动态选择框。我目前正在尝试禁用按钮,直到用户从选择框中选择和项目。是否可能/如何让用户在进入下一个选项卡之前首先单击选择框中的项目?我没有什么可以借鉴的,但这是我迄今为止的榜样。
JS-用于上一个/下一个按钮
<script>
$(function() {
var $tabs = $('#tabs').tabs();
$(".ui-tabs-panel").each(function(i){
var totalSize = $(".ui-tabs-panel").size() - 1;
if (i != totalSize) {
next = i + 2;
$(this).append("<a href='#' class='next-tab mover' rel='" + next + "'>Next Page »</a>");
}
if (i != 0) {
prev = i;
$(this).append("<a href='#' class='prev-tab mover' rel='" + prev + "'>« Prev Page</a>");
}
});
$('.next-tab, .prev-tab').click(function() {
$tabs.tabs('select', $(this).attr("rel"));
return false;
});
});
</script>
PHP/HTML
<select name="gender" id="gender" class="update" size="7">
<option value="">Select one</option>
<?php if (!empty($list)) { ?>
<?php foreach($list as $row) { ?>
<option value="<?php echo $row['id']; ?>">
<?php echo $row['category_name']; ?>
</option>
<?php } ?>
<?php } ?>
</select>
<select name="category" id="category" class="update" disabled="disabled" hidden="hidden" size="7">
<option value="">----</option>
</select>
<select name="colour" id="colour" class="update" disabled="disabled" hidden="hidden" size="7">
<option value="">----</option>
</select>
有一些解决方案(使用第二个解决方案,您可以在不单击下一个按钮的情况下更改选项卡)。
1.)如果选择了一个选项,例如通过添加以下更改处理程序,您可以禁用第二个选项卡($('#tabs').tab({ disabled: [1] });
)并启用该选项卡:
$('#gender').change(function() {
$('#tabs').tabs(
'option',
'disabled',
(parseInt($(this).val(), 10) > 0 ? [] : [1])
);
});
另请参见此示例。
2.)您可以更新您的下一次点击处理程序;仅当选择了性别时才更改选项卡:
$('.next-tab, .prev-tab').click(function() {
if (parseInt($('#gender').val(), 10) > 0) {
$tabs.tabs('select', $(this).attr("rel"));
}
return false;
});
另请参见此示例。
3.)添加选项卡选择处理程序,如果用户在第一个选项卡上并且没有选择性别,则返回false
;添加一个对象作为选项卡参数,并使用选项卡选择处理程序:
var iOldTab = 0;
var $tabs = $('#tabs').tabs({
select: function(event, ui) {
var bChange = (iOldTab != 0 || parseInt($('#gender').val(), 10) > 0);
if (bChange) {
iOldTab = ui.index;
}
return bChange;
}
});
另请参见此示例。
最后,我更喜欢第一种解决方案,因为用户可以看到第二个选项卡无法访问(直到他选择了性别),并且选择的结果(启用选项卡)将立即显示。
===更新===
好的,如果你有不同数量的选择(取决于之前选择的值),这里有一个替代(未测试)解决方案:
1.)替换updateSelectBox.js中jQuery.getJSON
的内容(真正的最后一个选择将被标记):
// following line is added
$('.update').removeClass('last');
if (!data.error) {
obj.next('.update').html(data.list).removeAttr('disabled hidden');
} else {
// following line is changed
obj.addClass('last').nextAll('.update').attr({'disabled': true, 'hidden':true}).html('<option value="">----</option>');
}
2.)调用禁用选项卡2的选项卡
$('#tabs').tab({ disabled: [1] });
3.)添加以下选择更改处理程序:
$('.update').change(function() {
$('#tabs').tabs(
'option',
'disabled',
(
$(this).hasClass('last') &&
parseInt($(this).val(), 10) > 0 ?
[] :
[1]
)
);
});
相关文章:
- 滚动到容器中的下一个元素-几乎到了
- 后焦点更改为IE 11中的地址栏,而不是转移到表单中的下一个控件
- 使用CSS或js,使用动态选择器选择任意li的下一个元素
- 使用ajax将数据从一个步骤发送到下一个步骤的3步表单
- AngularJS&JSON-从Previous&下一个对象
- 使用向下箭头键(与tab键一样)聚焦下一个输入
- 来自文档或下一个静态父级的事件委派
- angularjs移除焦点上的活动类并添加到下一个项目
- 禁用旋转木马中的下一个按钮和上一个按钮
- 当按下一个键时,请多次按下不同的键
- 正在加载下一个帖子
- 构建JS测试,警报窗口重复上一个Q,而不是问下一个Q
- 删除“;上一个“;以及“;下一个“;基于当前幻灯片
- 真正的下一个具有特定类的元素
- 如何使用javascript获取下一个/转发url
- jQuery转盘下一个元素没有滑入
- 简单的垂直上一个和下一个按钮代码点击上下移动jQuery
- 按下一个HTML按钮,该按钮使用一个功能在同一个新窗口中打开URL
- 算法:从数组(javascript/angular)中按当前日期获取上一个和下一个事件
- Jquery UI选项卡&选择方框-下一个/上一个按钮