Question

我正在jquery mobile中为一个手机应用程序编写一个带RGB滑块的颜色选择器。它在浏览器中工作，但在推送到手机时不起作用（使用phonegap / eclipse）。我不知道如何使用phonegap获取javascript控制台反馈，所以我有点不知所措。

我已尝试使用“.on .change .live .bind”作为更改事件监听器，所有这些都可以在浏览器中使用，但在phonegap应用程序中没有。

看到它的样子： Screenshot of browser

这是javascript：

$(function () {
$("#red, #green, #blue").change(function () {
    var red = $("#red").val();
    var green = $("#green").val();
    var blue = $("#blue").val();
    var redp = Math.round((red * 100) / 255);
    var greenp = Math.round((green * 100) / 255);
    var bluep = Math.round((blue * 100) / 255);
    $('#redrgb').html(red);
    $('#greenrgb').html(green);
    $('#bluergb').html(blue);
    $('#redpercent').html(redp + "%");
    $('#greenpercent').html(greenp + "%");
    $('#bluepercent').html(bluep + "%");
    $("#swatch").css("background-color", "rgb(" + red + "," + green + "," + blue + ")");
    console.log(red);  });  });

这是HTML

<div id="colorpicker">
    <div id="swatch">
        <div class="rgb swatchtext" id="redrgb">255</div><div class="percent swatchtext" id="redpercent">100%</div>
        <div class="rgb swatchtext" id="greenrgb">140</div><div class="percent swatchtext" id="greenpercent">55%</div>
        <div class="rgb swatchtext" id="bluergb">60</div><div class="percent swatchtext" id="bluepercent">24%</div>
    </div>
    <div class="rgbslider" id="sliderred"><input type="range" class="rgbsliders" id="red" value="255" min="0" max="255" /></div>
    <div class="rgbslider" id="slidergreen"><input type="range" class="rgbsliders" id="green" value="140" min="0" max="255" /></div>
    <div class="rgbslider" id="sliderblue"><input type="range" class="rgbsliders" id="blue" value="60" min="0" max="255" /></div>
</div>

我正在使用JQuery-Mobile，phonegap，现在我正在测试Android，但是一旦我开始工作它也将在iOS上。

Answer 1

您是否尝试将其放入$（文档）.bind（'pageinit'）块中？

Answer 2

这有效!!!!

$(function () {
$("#red, #green, #blue").slider({
    create: function (event, ui) {
        $(this).bind('change', function () {
            var red = $("#red").val();
            var green = $("#green").val();
            var blue = $("#blue").val();
            var redp = Math.round((red * 100) / 255);
            var greenp = Math.round((green * 100) / 255);
            var bluep = Math.round((blue * 100) / 255);
            $('#redrgb').html(red);
            $('#greenrgb').html(green);
            $('#bluergb').html(blue);
            $('#redpercent').html(redp + "%");
            $('#greenpercent').html(greenp + "%");
            $('#bluepercent').html(bluep + "%");
            $("#swatch").css("background-color", "rgb(" + red + "," + green + "," + blue + ")");
            console.log(red);
        });}});});

我必须在html输入中将type =“range”更改为type =“text”。

Javascript事件监听器在浏览器中工作，而不是在phonegap中？

2 个答案: