#javascript #jquery #html #css #cordova
#javascript #jquery #HTML #css #кордова
Вопрос:
Я пытаюсь создать индикатор выполнения в javascript с помощью phonegap, дело в том, что я извлекаю телефонные контакты с мобильного устройства Android, поэтому, если на мобильном устройстве около 400 контактов, для повторного просмотра контактов требуется несколько секунд, пока я не захочу показать индикатор выполнения, я его создал, но указанная строка document.getElementById("myBar").style.width=val '%'; отсутствует работаю .Я получаю значение из цикла for, чтобы увеличить ширину индикатора выполнения, о котором я упоминал в приведенном ниже коде
<!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 amp;amp; 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 '%');
}
Комментарии:
1. Пожалуйста, отредактируйте вопрос, чтобы улучшить формулировку проблемы. «Это не работает» на самом деле недостаточно для продолжения.
2. Вы получаете какую-либо ошибку в консоли?
3. да, он не работает, и я не получаю никаких ошибок в консоли.
4. Что насчет этого журнала
console.log("==================> Function fired:" val '%');? Есть ли какой-либо вывод?5. Нет, я проверил, входит функция внутрь или нет, не могли бы вы сказать мне, в чем проблема в этом