HTML配置表单选项

时间:2015-07-18 15:18:41

标签: html css

我有一个产品滑块 - http://i.imgur.com/fMuvZiD.png

HTML代码:

<link href="css/style.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>

<script src="js/slider.js"></script>
<script src="js/rslider.js"></script>
<script src="js/popup.js"></script>

    <div class="wrapper">
        <form id="signup_form" method="post" name="signup_form" action="post">
            <input type="hidden" name="token" value="2f8c47702b1f5eb36dad1d8f4ba66211ce0c31af">
            <input type="hidden" name="configure" value="true">

            <div class="vps-box">

            <div class="vps-os"> 
                <h4 class="step"><small>1</small>SSD/SATA</h4>
                <select class="select-vps select-drive" id="select-drive">
                    <option style="color: blue; height: 30px; padding-top: 10px; padding-left:15px" value="47" selected>SSD</option>
                    <option style="color: blue; height: 30px; padding-top: 10px; padding-left:15px" value="48">SATA</option>
                </select>
            </div>

            <div class="vps-location">
                <h4 class="step"><small>2</small>Select a Location</h4>
                <select class="select-vps select-locations" id="select-location">
                    <option style="color: blue; height: 30px; padding-top: 10px; padding-left:15px" value="49" selected>France</option>
                    <option style="color: blue; height: 30px; padding-top: 10px; padding-left:15px" value="50">Canada</option>
                </select>
            </div>
            <div class="vps-sliderinfo">
            <h4 class="step"><small>3</small>Configure Your Server</h4>

            <div class="slider-bar">
                <script type="text/javascript">
                        var packages = [
                    ['1', '2', '25', '2', '€30.00', '/cart.php?a=add&pid=47'],
                    ['2', '2', '50', '4', '€40.00', '/cart.php?a=add&pid=59'],
                    ['3', '4', '50', '5', '€50.00', '/cart.php?a=add&pid=60'],
                    ['4', '4', '75', '8', '€60.00', '/cart.php?a=add&pid=61'],
                    ['6', '6', '100', '10', '€80.00', '/cart.php?a=add&pid=62'],
                    ['8', '8', '100', '12', '€100.00', '/cart.php?a=add&pid=63']];



                        $("input[name='configoption5']").change(function () {

                            // Windows Plans

                            if ($(this).val() == "55") {
                                packages = [
                    ['1', '2', '50', '5', '€40.00', '/cart.php?a=add&pid=53'],
                    ['4', '2', '75', '8', '€60.00', '/cart.php?a=add&pid=64'],
                    ['6', '4', '100', '10', '€80.00', '/cart.php?a=add&pid=65'],
                    ['8', '4', '100', '12', '€100.00', '/cart.php?a=add&pid=66'],
                    ['10', '6', '150', '15', '€120.00', '/cart.php?a=add&pid=67'],
                    ['12', '6', '200', '15', '€150.00', '/cart.php?a=add&pid=68']];
                            } else {
                                packages = [
                    ['1', '2', '25', '2', '€30.00', '/cart.php?a=add&pid=47'],
                    ['2', '2', '50', '4', '€40.00', '/cart.php?a=add&pid=59'],
                    ['3', '4', '50', '5', '€50.00', '/cart.php?a=add&pid=60'],
                    ['4', '4', '75', '8', '€60.00', '/cart.php?a=add&pid=61'],
                    ['6', '6', '100', '10', '€80.00', '/cart.php?a=add&pid=62'],
                    ['8', '8', '100', '12', '€100.00', '/cart.php?a=add&pid=63']];
                            } 
                             $(s).trigger('change');
                        });

                        function _(id) {
                            return document.getElementById(id);
                        }

                    </script>

                    <div id="pgk_full" style="background:url('images/slider-bg.png') 0px 11px no-repeat;">
                        <div class="rslide_r">
                            <div class="selectorbox">
                                <input class="value" id="hvalue" name="hvalue" onchange="s.setValue(parseInt(this.value))" readonly="readonly" type="hidden">

                                <div class="slider" id="slider1" tabindex="1">
                                    <input class="slider-input" id="sliderinput1">
                                </div>

                                <script type="text/javascript">
                                    var s = new Slider(_("slider1"), _("sliderinput1"));
                                    var old_value = 0;
                                    var new_value = 0;
                                    var svar0 = 0;
                                    var svar1 = 0;
                                    var svar2 = 0;
                                    var svar3 = 0;
                                    var svar4 = 0;

                                    s.onchange = function () {
                                        new_value = s.getValue();
                                        var pkgid = s.getValue();
                                        document.getElementById('pkg').value = pkgid;
                                        _('line').style.backgroundRepeat = 'no-repeat';


if ($(window).width() <= 10400){    
                                        _('line').style.backgroundPosition = (parseInt(_('handle').style.left) - 919) + 'px 0px';
}   else if ($(window).width() <= 960){ 
                                        _('line').style.backgroundPosition = (parseInt(_('handle').style.left) - 799) + 'px 0px';
}   else if ($(window).width() <= 768){ 
                                        _('line').style.backgroundPosition = (parseInt(_('handle').style.left) - 668) + 'px 0px';
}       else if ($(window).width() <= 640){ 
                                        _('line').style.backgroundPosition = (parseInt(_('handle').style.left) - 520) + 'px 0px';
}   else {
                                        _('line').style.backgroundPosition = (parseInt(_('handle').style.left) - 280) + 'px 0px';
}






                                        old_value = new_value;
                                        _('hvalue').value = new_value;
                                        _('svar0').innerHTML = packages[new_value][0] + " GB ";
                                        _('svar1').innerHTML = packages[new_value][1] + " Cores ";
                                        _('svar2').innerHTML = packages[new_value][2] + " GB ";
                                        _('svar3').innerHTML = packages[new_value][3] + " TB ";
                                        _('svar4').innerHTML = packages[new_value][4];;
                                    };




                                    function toSubmit() {
                                        var form = $('#signup_form');

                                        var drive = document.getElementById("select-drive").value;
                                        var location = document.getElementById("select-location").value;

                                        if ( drive == '47' && location == '49')
                                            {
                                                alert("/cart.php?a=add&pid=47")
                                            }
                                        else if ( drive == '48' && location == '49')
                                            {
                                                alert("/cart.php?a=add&pid=48")
                                            }
                                        else if ( drive == '47' && location == '50')
                                            {
                                                alert("/cart.php?a=add&pid=49")
                                            }
                                        else if ( drive == '48' && location == '50')
                                            {
                                                alert("/cart.php?a=add&pid=50")
                                            }

                                    }
                                </script>
                            </div>
                        </div>
                    </div>
                    <table class="plan-names">
                        <tr>
                            <td onclick="s.setValue(0)" id="p0"></td>
                            <td onclick="s.setValue(1)" id="p1"></td>
                            <td onclick="s.setValue(2)" id="p2"></td>
                            <td onclick="s.setValue(3)" id="p3"></td>
                            <td onclick="s.setValue(4)" id="p4"></td>
                            <td onclick="s.setValue(5)" id="p5"></td>
                        </tr>
                    </table>
                </div>


            <div class="slider-specs clearafter">
                <div class="main">
                    <div class="cloud-spec ram">
                        <h4>RAM</h4>
                        <h2 id="svar0">2 GB</h2>
                    </div>
                    <div class="cloud-spec hdd">
                        <h4>SSD</h4>
                        <h2 id="svar2">50 GB</h2>
                    </div>
                    <div class="cloud-spec cpu">
                        <h4>CPU</h4>
                        <h2 id="svar1">2 Cores</h2>
                    </div>
                    <div class="cloud-spec bw">
                        <h4>TRANSFER</h4>
                        <h2 id="svar3">4 TB</h2>
                    </div>
                    <div class="clear"></div>
                    <p><strong>2 Gb/s uplink on all virtual servers!</strong>
                    </p>

                </div>
                <div class="price">
                    <h4>YOUR TOTAL</h4>
                    <h1 id="svar4">€40.00</h1><span>per month</span>
                    <input id="pkg" name="type3_package" type="hidden" value="" />
                    <div class="button-wrap">
                        <button class="button green large" onclick="toSubmit();" type="button" id="submit-order" />Order This Plan</button>
                    </form>
                    </div>
                </div>
            </div>
            </div>
        </div>

        <div class="clear"></div>
    </div>

CSS代码:http://pastebin.com/bquuac4c(代码太长,无法在此处发布)

我无法弄清楚如何编写选项,如果选择SSD或SATA,将显示不同的磁盘空间量,然后需要将它们带到另一个cart.php链接。例如,对于屏幕截图中显示的这个软件包,您可以获得50GB SSD,但如果他们将顶部的选项更改为SATA,那么我想提供100GB SATA,但CPU / RAM / Transfer将是相同的。

1 个答案:

答案 0 :(得分:0)

好的,我建议你这样做:

创建2个价格滑块和2个价格显示。 然后,当您选择的值包含&#34; SATA&#34;和&#34; SSD&#34;值改变,只需隐藏其中一个。

你还应该绑定两个滑块,使它们总是具有相同的值(移动一个也会使另一个滑动)。

然后,在更新更改我之前谈到的选择值时你可以做的是更新&#34; action&#34;表单的属性值。

通过这种方式,我认为您可以轻松理解并充分发挥作用。