修复 jQuery 按钮滑块

Posted 2023-05-09

【中文标题】修复 jQuery 按钮滑块

【英文标题】：Fix jQuery Button Slider

【发布时间】：2013-11-09 17:21:29

【问题描述】：

我的 jQuery 按钮滑块运行良好，我得到了它here。

但我只需要一个滑块，最后有两个选项，一个“YES”和一个“NO”。当滑块向左移动时，答案是肯定的，滑块将回到中间，反之亦然。有人知道该怎么做吗？

这是我的代码：

<?php
foreach($data as $dta)
    $uuid = $dta->uuid;
    $categ_uuid = $dta->category_uuid;
    $subcateg_uuid = $dta->subcategory_uuid;
    $question = $dta->content;

?>
<div class="row-fluid">
<div class="span12 spacer"></div>
<!-- QUESTION or IMAGE CONTAINER -->
<div class="span12" style="margin:0;">
    <div class="span1"></div>
    <div class="span10">
        <div class="span12">
            <div class="span2"></div>
            <div class="span8" id="container">
                <!--<img class="media-object" data-src="holder.js/100%x230/sky/text:">-->
                <?php echo $question; ?>
            </div>
            <div class="span2"></div>
        </div>
    </div>
    <div class="span1" style="margin:0;"></div>
</div>
<!-- YES NO TOGGLE -->
<div class="span12" style="margin:0;">
    <div class="span1"></div>
    <div class="span10">
        <div class="span12">
            <div class="span1"></div>
            <div class="span10">
            <form action="<?php echo $this->config->item('8L_URL').'/system/dovote'; ?>" id="yesno-form" method="post">
            <input type="hidden" name="question_uuid" value="<?php echo $uuid; ?>">
            <input type="hidden" name="category_uuid" value="<?php echo $categ_uuid; ?>">
            <input type="hidden" name="subcategory_uuid" value="<?php echo $subcateg_uuid; ?>">
            <input type="hidden" name="answer" id="answer">
          <div style="padding:30px 0px 50px 0px;">
                        <div id="yes" name="answer">Yes</div>
                    <div style="float:right;">
                        <div id="no" name="answer">No</div>
                    </div>
                    </div>     
      </form>
            </div>
            <div class="span1"></div>
        </div>
    </div>
    <div class="span1" style="margin:0;"></div>
</div>
</div>
<div id="dummy_div"></div>
<div id="module-modal" class="modal hide fade" tabindex="-1"></div>
<div id="app_loader_bar">&nbsp;</div>
<script type='text/javascript'>
$('#no').sliderbutton(
    text: 'NO',
    activate: submitForm
);

$('#yes').sliderbutton(
    direction: 'left',
    text: 'YES',
    activate: submitForm
);

function submitForm()
    $("#answer").val($(this).attr("id"));
    $('#yesno-form').submit();
;
</script>

【问题讨论】：

那么你想要一个开关吗？

@Jeemusu：开关向右或向左，但从不在中间向右？

哦，好的。所以你希望默认设置为中间，并且能够向左或向右滑动？

@Jeemusu：没错。并且两端有不同的值。向左滑动意味着用户选择了“是”，向右滑动意味着用户选择了“否”。然后保存在数据库中。

【参考方案1】：

我找到了解决办法。感谢引导滑块。另外，我只是在 CSS 中做了一些事情，让它看起来两边都有“YES”和“NO”。