使用该按钮的多个复选框选项分为多个选项卡 [英] Multiple checkbox options using the button divide into tabs
问题描述
这是我更新的index.php文件代码.现在我认为问题仅在选项卡中.选项卡显示不正确.它们显示为链接.我认为问题仅是命名约定.
Here is my updated code for index.php file.Now i think the problem is only in the tabs.Tabs are not showing properly.They are showing like a link.And i think the problem is only the naming convention now.
Index.php
Index.php
<html>
<head>
<meta charset="utf-8">
<title>Dashboards</title>
<style>
body {
padding: 5px;
}
margin : 5px;
font: Verdana, Helvetica, Arial;
padding: 0px;
background: #fff;
}
body {
margin : 10px;
font: Verdana, Helvetica, Arial;
padding: 0px;
background: #fff;
}
#tab-links {
border-bottom : 1px solid #ccc;
margin : 0;
padding-bottom : 19px;
padding-left : 10px;
}
#tab-links ul, #tab-links li {
display : inline;
list-style-type : none;
margin : 0;
padding : 0;
}
#tab-links a:link, #tab-links a:visited {
background : #E8EBF0;
border : 1px solid #ccc;
color : #666;
float : left;
font-size : small;
font-weight : normal;
line-height : 14px;
margin-right : 8px;
padding : 2px 10px 2px 10px;
text-decoration : none;
}
#tab-links a:link.active, #menu a:visited.active {
background : #fff;
border-bottom : 1px solid #fff;
color : #000;
}
#tab-links a:hover {
color : #f00;
}
body.tabs #tab-links li#nav-1 a,
body.tabs #tab-links li#nav-2 a {
background : #fff;
border-bottom : 1px solid #fff;
color : #000;
}
#tab-links #subnav-1,
#tab-links #subnav-2 {
display : none;
width: 90%;
}
body.tabs #tab-links ul#subnav-1,
body.tabs #tab-links ul#subnav-2 {
display : inline;
left : 10px;
position : absolute;
top : 95px;
}
body.tabs #tab-links ul#subnav-1 a,
body.tabs #tab-links ul#subnav-2 a {
background : #fff;
border : none;
border-left : 1px solid #ccc;
color : #999;
font-size : smaller;
font-weight : bold;
line-height : 10px;
margin-right : 4px;
padding : 2px 10px 2px 10px;
text-decoration : none;
}
#tab-links ul a:hover {
color : #f00 !important;
}
#contents {
background : #fff;
border : 1px solid #ccc;
border-top : none;
clear : both;
margin : 0px;
padding : 15px;
}
#phones {
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 12px;
background: #fff;
margin: 15px 25px 0 0;
border-collapse: collapse;
text-align: left;
float: left;
}
#phones th {
font-size: 14px;
font-weight: normal;
color: #039;
padding: 0px 1px;
border-bottom: 12px solid #6678b1;
}
#phones td {
border-bottom: 0px solid #ccc;
color: #669;
padding: 1px 1px;
}
#phones tbody tr:hover td {
color: #009;
}
#filter {
float:left;
}
fieldset{
margin-top: 15px;
}
fieldset div{
padding:0 0 5px 0;
}
.amount{
width:50px;
}
</style>
</head>
<body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<div class="tabs">
<ul class="tab-links">
<li id="nav-1"><a href="#tab1">Tab #1</a></li>
<li id="nav-2"><a href="#tab2">Tab #2</a></li>
</ul>
</div>
<div class="tab-content">
<div id="tab1" class="tab active">
<table id="phones">
<thead>
<tr>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div id="tab2" class="tab">
<input type="checkbox" id="Anzahl_Fahrzeuge_mit_und_ohne_Bilder" checked>
<label for="Anzahl_Fahrzeuge_mit_und_ohne_Bilder">Anzahl_Fahrzeuge_mit_und_ohne_Bilder</label><br>
<input type="checkbox" id="Fahrzeuge_ohne_Preis" checked>
<label for="Fahrzeuge_ohne_Preis">Fahrzeuge_ohne_Preis</label>
<button id="submitFilter">Filter</button>
</div>
</div>
<script>
function makeTable(data){
var tbl_body = "";
$.each(data, function() {
var tbl_row = "",
currRecord = this;
$.each(this, function(k , v) {
if(k==='model'){
v = "<a href='content.php?id=" + currRecord['id'] +"'>" + v + "</a>";
} else if (k==='price'){
v = "<span class='price'>" + v + "</span>";
}
tbl_row += "<td>"+v+"</td>";
})
tbl_body += "<tr>"+tbl_row+"</tr>";
})
return tbl_body;
}
function getPhoneFilterOptions() {
var opts = [];
$("input[type=checkbox]").each(function () {
if (this.checked) {
opts.push($(this).attr("id"));
}
});
return opts;
}
function updatePhones(opts){
if(!opts || !opts.length){
opts = allBrands;
}
$.ajax({
type: "POST",
url: "submit.php",
dataType : 'json',
cache: false,
data: {filterOpts: opts},
success: function(records){
$('#phones tbody').html(makeTable(records));
}
});
}
$('.tabs .tab-links a').on('click', function (e) {
var currentAttrValue = $(this).attr('href');
// Show/Hide Tabs
$('.tabs ' + currentAttrValue).show().siblings().hide();
// Change/remove current tab to active
$(this).parent('li').addClass('active').siblings().removeClass('active');
e.preventDefault();
});
$("#submitFilter").on("click", function () {
var opts = getPhoneFilterOptions();
updatePhones(opts);
("#tab2").show().siblings().hide();
});
var allBrands = [];
$("input[type=checkbox]").each(function(){
allBrands.push($(this)[0].id)
})
updatePhones();
</script>
</body>
</html>
推荐答案
如果我对您的理解正确，那么您根本不需要在会话变量或cookie中存储任何内容.
If I understood you correctly, you do not need to store anything in session variables or cookies after all.
您链接的教程解释了如何进行选项卡.您创建两个div并在旅途中显示/隐藏它们.您还可以创建一个div和两个html文件(每个选项卡一个)，其中将包含选项卡的内容(数据库和电话详细信息)，并使用ajax重新加载.由你决定.
The tutorial you linked explains how to do the tabs. You create two divs and show/hide them on the go. You can also create one div and two html files (one for each tab) that will contain the contents of the tabs (database and phone detail) and reload it with ajax. Up to you.
您现在不需要什么新东西.我知道您已经具有有效的选项卡，并且只想知道如何在它们之间传递数据.为此，只需在负责显示详细信息选项卡的函数中使用带有选定过滤器的变量，然后像在 $('#phones tbody').html(makeTable(records)));
You don't need many new things over what you have right now. I get it that you already have working tabs and only want to know how to pass the data between them. To do that, just use the variable with chosen filters in the function that is responsible for showing the details tab and switch the html of table like you did before wtih $('#phones tbody').html(makeTable(records));
您的小提琴是非常错误的.修复您的"ul"和"li"标签，使其正确无误.关闭其他打开的标签.将index.php内容放在标记之外.修复html之后，查看选项卡的属性类".它必须与jquery的选择器正确匹配.添加标签内容的容器:
Your fiddle is very wrong. Fix your "ul" and "li" tags so they are proper. Close your other opened tags. Put index.php content outside of tag. After you fix your html, look at attribute "class" of the tabs. It has to match properly with the selectors from jquery. Add containers for tab content:
<div class="tabs">
<ul class="tab-links">
<li class="active"><a href="#tab1">Tab #1</a></li>
<li><a href="#tab2">Tab #2</a></li>
</ul>
</div>
<div class="tab-content">
<div id="tab1" class="tab active">
<!-- your filter here -->
</div>
<div id="tab2" class="tab">
<!-- your table here -->
</div>
</div>
之后，修改您的jQuery.添加此内容(看看选择器！！！您必须遵循示例中的命名约定或在各处进行更改):
After that modify your jQuery. Add this (take a look at selectors!!! you have to either follow naming convention from example or change it everywhere):
$('.tabs .tab-links a').on('click', function (e) {
var currentAttrValue = $(this).attr('href');
// Show/Hide Tabs
$('.tabs ' + currentAttrValue).show().siblings().hide();
// Change/remove current tab to active
$(this).parent('li').addClass('active').siblings().removeClass('active');
e.preventDefault();
});
例如，它会阻止您的网站在单击某个标签后重新加载.请记住，当您单击它时，它将打开您的新选项卡.如果要在单击按钮时将其打开，请添加以下代码:
It'll for example prevent your site from reloading on clicking of a tab. Have in mind it will open you new tab when you click on it. If you want to open it on button click, add following code:
$("#submitFilter").on("click", function () {
var opts = getPhoneFilterOptions();
("#tab2").show().siblings().hide();
updatePhones(opts);
});
它将打开第二个选项卡，并像上次一样更新表格.确保该表位于选项卡内容容器(#tab2)中.
It will open second tab and update the table like last time. Make sure the table is inside tab content container(#tab2).
您可以将所有内容放在一个文件中:
You can put it all in one file:
<html>
<body>
(...)
<div class="tabs">
<ul class="tab-links">
<li class="active"><a href="#tab1">Tab #1</a></li>
<li><a href="#tab2">Tab #2</a></li>
</ul>
</div>
<div class="tab-content">
<div id="tab1" class="tab active">
<!-- your filter here -->
</div>
<div id="tab2" class="tab">
<!-- your table here -->
</div>
</div>
(...)
<script>
// your script here
(...)
$('.tabs .tab-links a').on('click', function (e) {
var currentAttrValue = $(this).attr('href');
// Show/Hide Tabs
$('.tabs ' + currentAttrValue).show().siblings().hide();
// Change/remove current tab to active
$(this).parent('li').addClass('active').siblings().removeClass('active');
e.preventDefault();
});
$("#submitFilter").on("click", function () {
var opts = getPhoneFilterOptions();
("#tab2").show().siblings().hide();
updatePhones(opts);
});
(...)
</script>
</body>
</html>
这篇关于使用该按钮的多个复选框选项分为多个选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
