Я пытаюсь создать индикатор выполнения в javascript с помощью phonegap. То, что я получаю phonecontacts от android mobile, поэтому, если у мобильного есть около 400 контактов, требуется несколько секунд для извлечения контактов до тех пор, пока я не хочу показывать индикатор выполнения, Я создал его, но указанная строка document.getElementById("myBar").style.width=val + '%'; не работает. Я получаю значение from for loop для увеличения ширины полосы выполнения, о которой я упомянул ниже.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
<!-- This is a wide open CSP declaration. To lock this down for production, see below. -->
<meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *" />
<style>
#myProgress {
position: relative;
width: 100%;
height: 30px;
background-color: #ddd;
}
#myBar
{
position: absolute;
width: 1%;
height: 100%;
background-color: #4CAF50;
}
</style>
<link rel="stylesheet" type="text/css" href="css/index.css" />
<!-- Jquery mobile -->
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css">
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/manual.js"></script>
<title>Contacts App</title>
</head>
<body >
<div data-role="page" id="pageone">
<div data-role="header" data-position="fixed" data-theme='b'>
<a href="#" data-role="button" data-icon="grid" id="oneclick" data-rel="popup">View</a> <h1>Welcome To My Contacts Page</h1>
<a href="#" data-role="button" data-icon="grid" id="done1" >Done</a>
</div>
<div data-role="main" class="ui-content">
<ul data-role="listview" id="contactList" data-inset="true">
</ul>
<!--<div data-role='popup' id='progressbar' style='margin-left:55px; margin-top:250px;'>-->
<!--</div>-->
<!--<div id="myProgress" data-role='popup' style='margin-left:100px; margin-top:250px;'>-->
<!--<div id="myBar"></div>-->
<!--</div>-->
<div id="myProgress">
<div id="myBar"></div>
</div>
</div>
<div data-role="footer" data-position="fixed">
<h1>Footer Text</h1>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header" data-position="fixed" data-theme='b'>
<a href="" data-role="button" data-icon="grid" id="" >View</a> <h1>Welcome To My Second Page</h1>
<a href="#pageone" data-role="button" data-icon="grid" >Back</a>
</div>
<div data-role="main" class="ui-content">
<a href="" data-role="button" data-icon="grid" onclick="val();" >Click</a>
</div>
<div data-role="footer" data-position="fixed">
<h1>Footer Text</h1>
</div>
</div>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>Кодирование Javascript:
var app = {
initialize: function() {
this.bindEvents();
},
bindEvents: function()
{
document.addEventListener('deviceready', this.onDeviceReady, false);
},
onDeviceReady: function()
{
var clicklibrary = document.getElementById("oneclick");
clicklibrary.addEventListener("click",app.FetchContacts,false);
},
FetchContacts:function()
{
navigator.contacts.find([navigator.contacts.fieldType.displayName],app.gotContacts,app.errorHandler);
},
gotContacts:function(c)
{
console.log("gotContacts, number of results "+c.length);
$("#contactList").empty();
var names = [];
for(var i=0, len=c.length; i<len; i++)
{
if(c[i].phoneNumbers && c[i].phoneNumbers.length > 0)
{
var per = Math.round((i / c.length) * 100);
$('#contactList').append('<li>' +
'<a href="#" style="padding:0px !important; margin:0px !important;">' +
'<label style="margin:0px !important; border:0px !important;"' +
'' +
'<div>' +
'<h3>'+c[i].displayName+'</h3>' +
'<p>'+c[i].phoneNumbers[0].value+'</p>' +
'<input name="chk_history" id="chk_history" type="checkbox" data-name="'+c[i].displayName+':'+c[i].phoneNumbers[0].value+'"/>' +
'</div>' +
'</label>' +
'</a>' +
'<a href="#pg_history-view" class="nav-container" ></a>'+
'</li>');
$("input[name=chk_history]").checkboxradio();
$('#ul_history_list').listview('refresh');
}
progressfunc(per);
}
document.getElementById("myProgress").style.display = 'none';
},
errorHandler:function(e)
{
console.log("errorHandler: "+e);
},
};
function progressfunc(val)
{
document.getElementById("myBar").style.width=val + '%';
console.log("==================> Function fired:"+val + '%');
}javascript,jquery,html,css,cordova,
Я пытаюсь создать индикатор выполнения в javascript с помощью phonegap. То, что я получаю phonecontacts от android mobile, поэтому, если у мобильного есть около 400 контактов, требуется несколько секунд для извлечения контактов до тех пор, пока я не хочу показывать индикатор выполнения, Я создал его, но указанная строка document.getElementById("myBar").style.width=val + '%'; не работает. Я получаю значение from for loop для увеличения ширины полосы выполнения, о которой я упомянул ниже.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
<!-- This is a wide open CSP declaration. To lock this down for production, see below. -->
<meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *" />
<style>
#myProgress {
position: relative;
width: 100%;
height: 30px;
background-color: #ddd;
}
#myBar
{
position: absolute;
width: 1%;
height: 100%;
background-color: #4CAF50;
}
</style>
<link rel="stylesheet" type="text/css" href="css/index.css" />
<!-- Jquery mobile -->
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css">
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/manual.js"></script>
<title>Contacts App</title>
</head>
<body >
<div data-role="page" id="pageone">
<div data-role="header" data-position="fixed" data-theme='b'>
<a href="#" data-role="button" data-icon="grid" id="oneclick" data-rel="popup">View</a> <h1>Welcome To My Contacts Page</h1>
<a href="#" data-role="button" data-icon="grid" id="done1" >Done</a>
</div>
<div data-role="main" class="ui-content">
<ul data-role="listview" id="contactList" data-inset="true">
</ul>
<!--<div data-role='popup' id='progressbar' style='margin-left:55px; margin-top:250px;'>-->
<!--</div>-->
<!--<div id="myProgress" data-role='popup' style='margin-left:100px; margin-top:250px;'>-->
<!--<div id="myBar"></div>-->
<!--</div>-->
<div id="myProgress">
<div id="myBar"></div>
</div>
</div>
<div data-role="footer" data-position="fixed">
<h1>Footer Text</h1>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header" data-position="fixed" data-theme='b'>
<a href="" data-role="button" data-icon="grid" id="" >View</a> <h1>Welcome To My Second Page</h1>
<a href="#pageone" data-role="button" data-icon="grid" >Back</a>
</div>
<div data-role="main" class="ui-content">
<a href="" data-role="button" data-icon="grid" onclick="val();" >Click</a>
</div>
<div data-role="footer" data-position="fixed">
<h1>Footer Text</h1>
</div>
</div>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>Кодирование Javascript:
var app = {
initialize: function() {
this.bindEvents();
},
bindEvents: function()
{
document.addEventListener('deviceready', this.onDeviceReady, false);
},
onDeviceReady: function()
{
var clicklibrary = document.getElementById("oneclick");
clicklibrary.addEventListener("click",app.FetchContacts,false);
},
FetchContacts:function()
{
navigator.contacts.find([navigator.contacts.fieldType.displayName],app.gotContacts,app.errorHandler);
},
gotContacts:function(c)
{
console.log("gotContacts, number of results "+c.length);
$("#contactList").empty();
var names = [];
for(var i=0, len=c.length; i<len; i++)
{
if(c[i].phoneNumbers && c[i].phoneNumbers.length > 0)
{
var per = Math.round((i / c.length) * 100);
$('#contactList').append('<li>' +
'<a href="#" style="padding:0px !important; margin:0px !important;">' +
'<label style="margin:0px !important; border:0px !important;"' +
'' +
'<div>' +
'<h3>'+c[i].displayName+'</h3>' +
'<p>'+c[i].phoneNumbers[0].value+'</p>' +
'<input name="chk_history" id="chk_history" type="checkbox" data-name="'+c[i].displayName+':'+c[i].phoneNumbers[0].value+'"/>' +
'</div>' +
'</label>' +
'</a>' +
'<a href="#pg_history-view" class="nav-container" ></a>'+
'</li>');
$("input[name=chk_history]").checkboxradio();
$('#ul_history_list').listview('refresh');
}
progressfunc(per);
}
document.getElementById("myProgress").style.display = 'none';
},
errorHandler:function(e)
{
console.log("errorHandler: "+e);
},
};
function progressfunc(val)
{
document.getElementById("myBar").style.width=val + '%';
console.log("==================> Function fired:"+val + '%');
}