我在6个月之前展示了极端的样本。它与“航线”有关。有一架飞机地图。你可以选择一个座位。你分开。如果你知道在哪里,你能给我这个链接吗?jQuery Air乘客座位布局示例
0
A
回答
2
这是在DOM中Corbin's answer
$(document).ready(function(){
// Disable various aspects of passenger details table
$('#passenger_details input, #passenger_details select').attr('disabled', 'disabled');
// Add class="selected" to tab + tbody
$('#tabs a:first, #passenger_details tbody:first').addClass('selected');
// Get the value of the tab link, and display tbody
$('#tabs a').click(function(){
// Switch class="selected" for tabs
$('#tabs a').removeClass('selected');
$(this).addClass('selected');
// Asign value of the link target
var thisTarget = $(this).attr('href');
// Show target tbody and hide others
$('#passenger_details tbody').removeClass('selected');
$(thisTarget).addClass('selected');
this.blur();
return false;
});
// Add click listener to seats
$('#airplane a').click(function(){
// Assign value of the link target
var thisTarget = $(this).attr('href');
// Show target tbody and hide others
$('#passenger_details tbody').removeClass('selected');
$(thisTarget).addClass('selected');
// Swap out class="selected" for tab
$('#tabs a').removeClass('selected');
$('#tabs a[@href=' + thisTarget + ']').addClass('selected');
// Assign the value of the parent <li class="*">
var thisSeat = $(this).parent('li').attr('class');
// Compare parent <li class="*"> against
// <tr> in <table id="passenger_details">
var thisRow = $('#passenger_details tr');
for (var i = 0, j = thisRow.length; i < j; i++) {
if (thisSeat == thisRow[i].className) {
// Add class="selected" to row
$(thisRow[i]).addClass('selected');
// Enable inputs and selects so that they can be used
$(thisRow[i]).children('td').children('input, select').removeAttr('disabled');
}
else
if (thisSeat + ' selected' == thisRow[i].className) {
// Remove class="selected" from row
$(thisRow[i]).removeClass('selected');
// Disable inputs and selects that aren't being used
$(thisRow[i]).children('td').children('input').attr('disabled', 'disabled').val('');
$(thisRow[i]).children('td').children('select').each(function(){
this.disabled = true;
this.selectedIndex = 0;
});
}
}
// Toggle selected class on/off
$(this).toggleClass('selected');
this.blur();
return false;
});
// Assign function to master checkbox
$('#check_all').click(function(){
if (this.checked === true) {
// Add class="selected" to seat
$('#airplane a, #passenger_details tbody tr').addClass('selected');
$('#passenger_details input, #passenger_details select').removeAttr('disabled');
this.blur();
}
else {
// Remove class="selected" from seat
$('#airplane a, #passenger_details tbody tr').removeClass('selected');
$('#passenger_details input').attr('disabled', 'disabled').val('');
$('#passenger_details select').each(function(){
this.disabled = true;
this.selectedIndex = 0;
});
this.blur();
}
});
// Disable the form submission
$('form').submit(function(){
alert('This is only a test. Were it a real emergency, panic would ensue.');
return false;
});
});
3
1
FYI已加载网页上运行,你可以从here下载代码/ CSS /图像jQuery的。该zip文件接近页面的底部......大概有4段,它表示“下载此演示中使用的所有文件的zip”。
相关问题
- 1. iOS座位图布局
- 2. Joomla 3搭乘类别博客布局
- 3. 响应式砌体jQuery布局示例
- 4. 流体布局示例
- 5. jQuery同位素布局
- 6. 布局jQuery同位素
- 7. jQuery座位计划
- 8. 乘客和多个实例
- 9. Android布局 - 位置布局
- 10. 想要在UITableViewCell中创建按钮并以座位布局显示
- 11. 自动布局和比例定位
- 12. 如何使用动态数据创建座位布局?
- 13. 在android的公交车座位布局问题
- 14. 复杂插座示例
- 15. Android示例,“布局技巧:合并布局”不起作用
- 16. Ember.js:动态切换插座的布局
- 17. 树枝简单扩展底座布局
- 18. 布局代码奇怪登录示例
- 19. scaloid示例布局不起作用
- 20. Google Play应用布局示例
- 21. 编译Microsoft键盘布局示例
- 22. jQuery的同位素不维护布局
- 23. jQuery同位素不与我的布局
- 24. 同位素jquery插件布局问题
- 25. 在Android布局中显示Google位置
- 26. OpenCL Matrix乘法Altera示例
- 27. 僵局插座
- 28. 自动布局了解乘数
- 29. 座席极客API没有响应jquery
- 30. '乘客'命令不显示运行实例
我该如何改变这种情况?例如,我需要改变这个像电影院轿车 – Penguen 2009-06-06 18:32:23