我正在尝试将一组两个单选按钮转换为两个标签，一个蓝色和灰色分别代表选定的单选按钮和未选定的单选按钮。单击此堆栈将更改哪些标签为蓝色(以及哪些单选按钮已选中)。它运作良好，但当两个标签的宽度不同时，它会以一种丑陋的方式崩溃。了解我的意思的最好方法是尝试我在您自己的服务器上制作的测试页面或导航 here查看正在运行的页面。
源代码和实际内容中的注释几乎解释了我的目标和问题所在。此外，这是对可访问性和优雅降级的尝试，因此欢迎就这些问题发表任何评论。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>word stacks</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
.stackContainer
{
line-height: 2em; /* Prevents the stackBottom from overlaping the second line of text found in the stack container, should there be a second line. */
}
.stack
{
position: relative; /* Needed to give the absolutely positionned stackBottom a positionned reference. */
}
.stackTop
{
vertical-align: .5em; /* Raise the stackTop half a line */
}
.stackBottom
{
background: transparent; /* Needed so the background doesn't cover the stackTop nor the line below, if any. */
position: absolute; /* Positionned absolutely in reference to the stack */
left: 0; /* Bring the stackBottom directly under the stackTop */
top: 0; /* For some reason, this is needed to bring the stackBottom under the stackTop. */
}
/* The following is extra */
.stackSelected /* Represents the chosen value */
{
color: #009;
}
.stackUnselected /* Represents the other option */
{
color: #777;
}
.stack
{
cursor: pointer;
}
p
{
margin: 3em;
}
</style>
<?php
function createWordStack($name, $value1, $value2)
{
// Set default values (by default, $value1 is checked and not $value2)
$firstChecked = "checked=\"checked\" ";
$secondChecked = "";
if(isset($_POST[$name])) // One value was chosen
{
if($_POST[$name] == $value2) // Not default value
{
$firstChecked = "";
$secondChecked = "checked=\"checked\" ";
}
// else fall back to default value
}
// else fall back to default value
// Write out the html
echo("<span class=\"stack\">
<label for=\"" . $name . "\">
<input type=\"radio\" name=\"" . $name . "\" value=\"" . $value1 . "\" " . $firstChecked . "/>" . $value1 . "
</label>
<label for=\"" . $name . "\">
<input type=\"radio\" name=\"" . $name . "\" value=\"" . $value2 . "\" " . $secondChecked . "/>" . $value2 . "
</label>
</span>");
}
?>
<script type="text/javascript">
// It is recommended to use this function only if stacks have been created with the php function createStack and if these stacks are contained in an element of class stackContainer
function makeStacks()
{
var forms = document.getElementsByTagName("form"); // Find all forms
var nb_forms = forms.length;
for(var i = 0; i < nb_forms; ++i)
{
if(forms[i].className.indexOf("stackContainer") != -1) // If it's a stackContainer
{
var spans = forms[i].getElementsByTagName("span"); // Find all spans
var nb_spans = spans.length;
for(var j = 0; j < nb_spans; ++j)
{
if(spans[j].className.indexOf("stack") != -1) // If it's a stack
{
var labels = spans[j].getElementsByTagName("label"); // Find all labels
var nb_labels = labels.length;
if(nb_labels == 2) // Only works with two labels!
{
labels[0].className += " stackTop";
labels[1].className += " stackBottom";
for(var k = 0; k < nb_labels; ++k)
{
var inputs = labels[k].getElementsByTagName("input"); // Find all inputs
var nb_inputs = inputs.length;
if(nb_inputs == 1 && inputs[0].type == "radio") // Only works with one radio button per label!
{
inputs[0].style.display = "none"; // Hide radio button
labels[k].className += (inputs[0].checked)?" stackSelected":" stackUnselected";
}
}
}
// add onclick listener to invert which radio button is checked and invert which label appears on top
spans[j].onclick = function()
{
var labels = this.getElementsByTagName("label"); // Find all labels
// We already know that there are only two labels, from earlier!
for(var l = 0; l < 2; ++l)
{
// Invert className from stackTop to stackBottom (or vice-versa)
if(labels[l].className.match(/stackSelected/))
{
labels[l].className = labels[l].className.replace(/stackSelected/, "stackUnselected");
}
else if(labels[l].className.match(/stackUnselected/))
{
labels[l].className = labels[l].className.replace(/stackUnselected/, "stackSelected");
}
}
// Change which of the radios is checked
var inputs = labels[0].getElementsByTagName("input"); // Find all inputs from first label
// We already know that there is a single label and that it is a radio, from earlier!
if(!inputs[0].checked) // If this one is not checked, check it to change which of the radios is checked
{
inputs[0].checked = true;
}
else
{
var inputs = labels[1].getElementsByTagName("input"); // Find all inputs from second label
// We already know that there is a single label and that it is a radio, from earlier!
if(!inputs[0].checked) // If this one is not checked, check it to change which of the radios is checked
{
inputs[0].checked = true;
}
// else there is something wrong as none of the radios are checked!
}
}
}
}
}
}
}
window.onload = makeStacks;
</script>
</head>
<body>
<h1>Word stacks</h1>
<h2>How it works</h2>
<ol>
<li>PHP transforms<br />
<code><?php createWordStack("name","one","two"); ?></code><br />
into<br />
<code>
<pre>
<span class="stack">
<label for="name">
<input type="radio" name="name" value="one" />one
</label>
<label for="name">
<input type="radio" name="name" value="two" checked="checked" />two
</label>
</span>
</pre>
</code>
</li>
<li>
javascript hides the radio buttons, applies class declarations to the labels and adds an onclick event listener to the<br />
<code>
<span class="stack">
</code>
</li>
</ol>
<h2 id="example">Example</h2>
<form action="<?php echo($_SERVER['PHP_SELF'] . "#example"); ?>" class="stackContainer" method="post">
<p>Choose between <?php createWordStack("name","one","two"); ?> options.</p>
<input type="submit" value="Test that the radio buttons hidden behind this still work" />
</form>
<h3>print_r($_POST)</h3>
<pre>
<?php print_r($_POST); ?>
</pre>
<form class="stackContainer">
<h2>Known issues</h2>
<p>
This technique
<?php createWordStack("no_matter","absolutely does not","does"); ?>
look good with two different sizes of `words`,
<?php createWordStack("no_matter2","no matter","although this depends"); ?>
in which order they appear. If looks better when the longer word is above the other though. Plus, the way it breaks makes it unreadable when the longer word is on the bottom if the remainder of the text needs to span many lines.
</p>
<p>
Another problem is when the bottom word
<?php createWordStack("no_matter3","is","isn't"); ?>
longer than the top word but actually consists of a single word. It cannot wrap and therefore interferes with the following text.
</p>
<p>
<?php createWordStack("no_matter4","It really becomes unusable and quite ugly if the top word happens to wrap and span over two or more lines. Of course, the first know issue shown above is enough to understand that THIS known issue doesn't mean a thing if it is the bottom that is too long as it will span over many lines no matter what since it is limited by the width of the shorter word above..","It still works"); ?>
.. and so, all in all, it is better to avoid long words altogether.
</p>
<p>
Now, just to illustrate what I am saying above..
<?php createWordStack("no_matter5","Look at this shit!","It really becomes unusable and quite ugly if the top word happens to wrap and span over two or more lines. Of course, the first know issue shown above is enough to understand that THIS known issue doesn't mean a thing if it is the bottom that is too long as it will span over many lines no matter what since it is limited by the width of the shorter word above.."); ?>
.. and so, all in all, it is better to avoid long words altogether.
</p>
<h2>Notes</h2>
<p>
At least, the next paragraph
<?php createWordStack("no_matter6","isn't","is"); ?>
pushed down too far.
</p>
<p>
<?php createWordStack("no_matter7","It works","It doesn't work"); ?>
when I put the stackBottom BEFORE the stackTop, so I could also call them stackChosen and stackAlternate and just change the className in order to choose one or the other. This is what the javascript used to do when you click on the stack: if the label is of class stackTop, it changes it to stackBottom, and vice-versa. Now, only the colour is changed..
</p>
</form>
</body>
</html>
所以问题是:我将如何着手解决测试页中说明的已知问题？ 对不起，我知道这不是问问题的方式，但我不知道还能怎么表达。为了使这个测试页尽可能清晰，我确实付出了很多努力。
提前致谢
最佳答案
对堆栈底部使用绝对位置会破坏一切(浏览器无法将堆栈底部宽度考虑在内)，这是使用 inline-bock 的替代方法
将您的 .stack、.stackTop 和 .stackBottom 定义替换为:
.stack{
display: inline-block; /* prevent the block options to induce line breaks in your text */
line-height: 1; /* Have the 2 options verticaly close to each other */
position: relative; /* Moves the lines to be in between*/
top: 0.5em;
white-space: nowrap; /* prevent line breaks */
}
.stackTop,
.stackBottom{
display: block; /* Stack the options on top of each other */
}
关于php - 建议实现此 "word stack"的另一种方法，它解决了我的方法是受害者的已知问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3096128/