0

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

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

这是它的样子： 浏览器截图

这是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 上。

4

2 回答 2

1

您是否尝试过将其放在 $(document).bind('pageinit') 块中？

于 2012-07-29T20:21:35.583 回答
0

这行得通！！！！

$(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" 。

于 2012-07-29T21:45:11.583 回答