我正在jquery mobile中为一个手机应用程序编写一个带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上。
答案 0 :(得分:1)
您是否尝试将其放入$(文档).bind('pageinit')块中?
答案 1 :(得分: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”。