Les barres d'Adwords progrès entrée
- joebert
- Sledgehammer
- Inscription: Fév 10, 2004
- Messages: 13455
- Loc: Florida
- Status: Offline
Novembre 5th, 2010, 5:41 pm
Tout en utilisant Adwords aujourd'hui, j'ai remarqué il ya des bars peu de progrès grise à côté des entrées de texte qui vous montrent une représentation graphique de la quantité d'espace que vous avez quitté le type. Je pensais que c'était plutôt cool, donc je fouette un petit exemple d'un moyen de le faire sans les bibliothèques Javascript ou quoi que ce soit. 
HTML Code: [ Select ]
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">//<![CDATA[
window.onload = function()
{
var inputs = document.getElementsByTagName('input');
for(var i = 0; i < inputs.length; i++)
{
if(inputs[i].type != 'text'){continue;}
inputs[i].onfocus = inputs[i].onkeyup = function()
{
if(this.value.length >= this.size){this.value = this.value.substr(0, this.size);}
this.style.borderRight = '#ccc ' + Math.min(50, Math.floor((this.value.length / this.size) * 50)) + 'px solid';
}
inputs[i].onblur = function()
{
this.style.borderRight = '0';
}
}
}
//]]>
</script>
<style type="text/css">
.pbar {width:150px; display:block; border:#999 1px solid; margin:10px 0 0 0;}
.pbar > input {border:0; width:100px;}
</style>
</head>
<body>
<div id="content">
<label class="pbar"><input type="text" name="chars" id="chars" size="16" /></label>
<label class="pbar"><input type="text" name="chars" id="chars" size="16" /></label>
<label class="pbar"><input type="text" name="chars" id="chars" size="16" /></label>
<label class="pbar"><input type="text" name="chars" id="chars" size="16" /></label>
<label class="pbar"><input type="text" name="chars" id="chars" size="16" /></label>
</div>
</body>
</html>
<html>
<head>
<script type="text/javascript">//<![CDATA[
window.onload = function()
{
var inputs = document.getElementsByTagName('input');
for(var i = 0; i < inputs.length; i++)
{
if(inputs[i].type != 'text'){continue;}
inputs[i].onfocus = inputs[i].onkeyup = function()
{
if(this.value.length >= this.size){this.value = this.value.substr(0, this.size);}
this.style.borderRight = '#ccc ' + Math.min(50, Math.floor((this.value.length / this.size) * 50)) + 'px solid';
}
inputs[i].onblur = function()
{
this.style.borderRight = '0';
}
}
}
//]]>
</script>
<style type="text/css">
.pbar {width:150px; display:block; border:#999 1px solid; margin:10px 0 0 0;}
.pbar > input {border:0; width:100px;}
</style>
</head>
<body>
<div id="content">
<label class="pbar"><input type="text" name="chars" id="chars" size="16" /></label>
<label class="pbar"><input type="text" name="chars" id="chars" size="16" /></label>
<label class="pbar"><input type="text" name="chars" id="chars" size="16" /></label>
<label class="pbar"><input type="text" name="chars" id="chars" size="16" /></label>
<label class="pbar"><input type="text" name="chars" id="chars" size="16" /></label>
</div>
</body>
</html>
- <!DOCTYPE html>
- <html>
- <head>
- <script type="text/javascript">//<![CDATA[
- window.onload = function()
- {
- var inputs = document.getElementsByTagName('input');
- for(var i = 0; i < inputs.length; i++)
- {
- if(inputs[i].type != 'text'){continue;}
- inputs[i].onfocus = inputs[i].onkeyup = function()
- {
- if(this.value.length >= this.size){this.value = this.value.substr(0, this.size);}
- this.style.borderRight = '#ccc ' + Math.min(50, Math.floor((this.value.length / this.size) * 50)) + 'px solid';
- }
- inputs[i].onblur = function()
- {
- this.style.borderRight = '0';
- }
- }
- }
- //]]>
- </script>
- <style type="text/css">
- .pbar {width:150px; display:block; border:#999 1px solid; margin:10px 0 0 0;}
- .pbar > input {border:0; width:100px;}
- </style>
- </head>
- <body>
- <div id="content">
- <label class="pbar"><input type="text" name="chars" id="chars" size="16" /></label>
- <label class="pbar"><input type="text" name="chars" id="chars" size="16" /></label>
- <label class="pbar"><input type="text" name="chars" id="chars" size="16" /></label>
- <label class="pbar"><input type="text" name="chars" id="chars" size="16" /></label>
- <label class="pbar"><input type="text" name="chars" id="chars" size="16" /></label>
- </div>
- </body>
- </html>
Strong with this one, the sudo is.
- Anonymous
- Bot
- Inscription: 25 Feb 2008
- Messages: ?
- Loc: Ozzuland
- Status: Online
Novembre 5th, 2010, 5:41 pm
Page 1 sur 1
Pour répondre à ce sujet, vous devez vous connecter ou vous enregistrer. Il est gratuit.
Afficher de l'information
- Total des messages de ce sujet: 1 message
- Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 273 invités
- Vous ne pouvez pas poster de nouveaux sujets
- Vous ne pouvez pas répondre aux sujets
- Vous ne pouvez pas éditer vos messages
- Vous ne pouvez pas supprimer vos messages
- Vous ne pouvez pas joindre des fichiers
