问题:
I have a website, full responsive (made with Bootstrap) & available in mobile-apps with Cordova.
In mobile, the actions done by user are not really "dynamic" : when u...
可以将文章内容翻译成中文,广告屏蔽插件会导致该功能失效:
问题:
I have a website, full responsive (made with Bootstrap) & available in mobile-apps with Cordova.
In mobile, the actions done by user are not really "dynamic" : when user "click (mobile tap)", user don't see if his action is done. They have to wait the end of the loading time to see if their "click" worked.
What I'm looking for : a dynamic behaviour on each "click", which makes appear for exemple a circle, to show the user that his click worked :
In this exemple, a grey shadow appears on the user click.
Any ideas ? Many thanks
回答1:
You can do it by using JavaScript. First, create a loading animation using HTML & CSS and hide it.
After loading the page, select all links and buttons using document.getElementsByTagName()
or document.querySelectorAll()
Now create a function to show or hide the loading animation. Then loop through the elements and add click event listener to them.
HTML:
<div id="loading" style="display:none">Loading...Please Wait</div>
JS:
var loading = document.getElementById("loading");
var elements = document.querySelectorAll("a");
function showLoading(){
loading.style.display = "block";
}
for(var i = 0; i < elements.length; i++){
elements[i].addEventListener("click",showLoading);
}