Преобразование слайдера jQuery Mobile в слайдер пользовательского интерфейса jQuery и изменение содержимого

Question

Преобразование слайдера jQuery Mobile в слайдер пользовательского интерфейса jQuery и изменение содержимого

0

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
function changecontent()
    {
    if (document.getElementById("slider").value<33)
        {
        $("#1").fadeIn("slow");
        $("#2").fadeOut("slow");
        $("#3").fadeOut("slow");
    } else if (document.getElementById("slider").value>33 && document.getElementById("slider").value<66)
        {
        $("#1").fadeOut("slow");
        $("#2").fadeIn("slow");
        $("#3").fadeOut("slow");
    } else if (document.getElementById("slider").value>66)
        {
        $("#1").fadeOut("slow");
        $("#2").fadeOut("slow");
        $("#3").fadeIn("slow");
        };
    };
</script>

<style type="text/css">
    .hide {display:none;}
    .show {display:inherit;}
</style>

<input type="range" name="slider" id="slider" value="0" min="0" max="100"/>
<div id="content">
    <div id="1" class="show" style="position:absolute;z-index:0;">A</div>
    <div id="2" class="hide" style="position:absolute;z-index:1;">B</div>
    <div id="3" class="hide" style="position:absolute;z-index:2;">C</div>
</div>

В соответствии с вышеприведенным кодом это создаст слайдер диапазона HTML5, который будет исчезать между 3 различными div в зависимости от положения ползунка. Моя проблема в том, что слайдер выглядит ужасно в IE. Мне нужно настроить его внешний вид, чтобы выглядеть единообразным в браузерах.

Я попытался использовать jQuery Mobile, который разрешает эту проблему. Однако это вызывает конфликт с js, используемым в WordPress, двадцатью темой. Я пытался решить эти конфликты безрезультатно. Я загрузил пользовательский интерфейс jQuery и никаких конфликтов не произошло.

<div id="slider"></div>

Вышеприведенный код создает слайдер пользовательского интерфейса, но я читал документацию jQuery API и не понимаю, как изменить свой скрипт, чтобы изменить отображаемый контент. Ваш опыт очень ценится!

Bryan Hahn 23 окт. 2013, в 20:47

Источник

0

Скрипка: jsfiddle.net/isherwood/MpT7Z
isherwood 23 окт. 2013, в 18:49

Теги:

javascript

jquery

html

jquery-ui

slider

1 ответ

Ещё вопросы

mayabelle · Accepted Answer · 2013-10-23T17-50-00.000Z

Попробуй это:

HTML:

<div id="slider"></div>
<div id="content">
    <div id="1" class="show" style="position:absolute;z-index:0;">A</div>
    <div id="2" class="hide" style="position:absolute;z-index:1;">B</div>
    <div id="3" class="hide" style="position:absolute;z-index:2;">C</div>
</div>

JS:

$(function() {
    $("#slider").slider({
        slide: function(event, ui) {
            if (ui.value < 33) {
                $("#1").fadeIn("slow");
                $("#2").fadeOut("slow");
                $("#3").fadeOut("slow");
            }
            else if (ui.value < 66) {
                $("#1").fadeOut("slow");
                $("#2").fadeIn("slow");
                $("#3").fadeOut("slow");
            }
            else {
                $("#1").fadeOut("slow");
                $("#2").fadeOut("slow");
                $("#3").fadeIn("slow");
            }
        }
    });
});

CSS:

.hide {display:none;}
.show {display:inherit;}

Скрипт: http://jsfiddle.net/NxGZa/