Vytvořit indikátor s JavaScriptem

Czech (Čeština) translation by Tereza Foretová (you can also view the original English article)

Indikátor průběhu je jedním z nejnovější součásti mají být přidány do knihovny vynikající UI widgety a interakce pomocníky nadstavbou jQuery. Byla zavedena v nejnovější verzi knihovny, který je v době psaní článku 1.7.

Indikátor průběhu je v současné době pouze determinovat, což znamená, když jsme jej aktualizovat, musíme říct to explicitně, jeho hodnota je a musíme vědět předem, po dokončení procesu, který se používá k měření. Tato pomůcka není v současné době nejlepší volbou pro proces, který bude mít neurčitý délka čas na dokončení.
Je to velmi jednoduchý widget s malým API, že zpřístupňuje omezený počet vlastností a metod, ale to může být stále velmi efektivní a je skvělé pro poskytuje vizuální zpětnou vazbu pro návštěvníky na procento procesu zůstane před jeho dokončením.

Začínáme

Budeme potřebovat kopii aktuální verzi jQuery UI, které lze získat od výrobce ke stažení na http://jqueryui.com/download. Jakmile stáhli jsme to, budeme muset rozbalit tak, aby je zachována stávající struktura adresáře. Bychom měli vytvořit nový adresář na našem počítači nazývané jQuery UI a uvnitř to vytvořit další novou složku s názvem jqueryui1.7. Archiv by pak mělo být rozbalen do složky jqueryui1.7.

Archiv bude obsahovat vše potřebné k zahájení práce. Minified a nekomprimované verze všech souborů knihovny, některé soubory motivu (výchozí motiv je hladkost příhodně pojmenované) a dokonce i nejnovější verze základní knihovny jQuery.

Indikátor průběhu se opírá o řadu souborů fungování; Níže jsou uvedeny v pořadí, v jakém by měly být přidány na naši stránku:

UI.Core.CSS
UI.theme.CSS
UI.ProgressBar.CSS
js jQuery [currentversion]
UI.Core.js
UI.ProgressBar.js

První tři soubory jsou součástí rozsáhlé CSS rámec a jsou používány k průběhu jeho odlišný vzhled. Není třeba držet s tímto tématem v reálném světě implementace; Máme mnoho možností pro přizpůsobení, včetně obrovské množství přednastavené motivy dostupné přímo z Themeroller, vlastní motiv můžeme navrhnout sami pomocí Themeroller, nebo dokonce vlastní motiv vytváříme ručně přepsání pravidel definovaných v Výchozí styly. Jsme žádnou z těch věcí v tomto kurzu však nebude dělat, ale můžeme využívat některé z tříd poskytovaných v rámci.

Základní stránka

Velmi málo základní přirážka je nutný pro tento widget; vše, co potřebujete, kromě knihovny prostředků uvedených výše, je prvek jednoduchý kontejner. V textovém editoru vytvořte následující stránky shell s požadované zdroje a element kontejneru:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="jqueryui1.7/development-bundle/themes/smoothness/ui.core.css">
    <link rel="stylesheet" type="text/css" href="jqueryui1.7/development-bundle/themes/smoothness/ui.theme.css">
    <link rel="stylesheet" type="text/css" href="jqueryui1.7/development-bundle/themes/smoothness/ui.progressbar.css">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>jQuery UI Progress Bar</title>
  </head>
  <body>
    <div id="container"></div>
    <script type="text/javascript" src="jqueryui1.7/development-bundle/jquery-1.3.2.js"></script>
    <script type="text/javascript" src="jqueryui1.7/development-bundle/ui/ui.core.js"></script>
    <script type="text/javascript" src="jqueryui1.7/development-bundle/ui/ui.progressbar.js"></script>
    <script type="text/javascript">
  
    </script>
  </body>
</html>

Uložte jako progressBar.html v kořenovém adresáři jQuery UI. Dali jsme styly přímo na začátku souboru a skriptů na konci; To je z důvodů výkonu jako stránky načíst obsah rychleji, když nejsou snaží načíst JavaScript ve stejnou dobu. Je to dobře zdokumentované výkonu praxe, která je nejlepší dodržovat. Nechali jsme prázdné skript tag v dolní části stránky. Dodejme nějaký kód následující:


$(function() {

  //call progress bar constructor			
  $("#container").progressbar();
});

Zinicializovat výchozího indikátoru průběhu, vše, co děláme je volání jeho konstruktoru metoda, progressbar na element kontejneru, který je vykreslen do widget. Když spustíte tuto stránku ve svém prohlížeči, měli byste vidět, že indikátor byl vytvořen a automaticky vyplní šířku jeho kontejneru, což v tomto případě je tělo stránky:

Nastavení hodnoty indikátoru průběhu

Indikátor průběhu hodnota bude nastavena na nulu ve výchozím nastavení, a proto se zdá prázdný na předchozím obrázku. Chcete-li vyplnit indikátor průběhu, musíme nastavit value vlastnost; Změňte funkci konstruktoru tak, aby se zobrazí následovně:

1
2	//call progress bar constructor
3	$("#container").progressbar({ value: 50 });

Vlastnost value určuje procento indikátor průběhu, který je vyplněn, dává skvělý vizuální zpětnou vazbu na návštěvníka na úkolu kolik zbývá k dokončení. Indikátor průběhu by nyní měly být napůl plný, stejně jako na následující kopii obrazovky:

Získávání hodnoty indikátoru průběhu

Získání aktuální hodnoty widgetu je stejně snadné, jako bylo nastavit jednou z jeho metod můžeme použít k vrácení aktuální hodnotu vlastnosti. Po počáteční konstruktoru přidejte následující kód:
nastavit mouseover pro pokrok bar


$("#container").mouseover(function() {
				
  //display the current value
  $("<p>").attr("id", "percentage").text($("#container").progressbar("option", "value") + "% complete").appendTo("body");					
});
				
//set mouseout for progress bar
$("#container").mouseout(function() {
				  
  //hide value
  $("#percentage").remove();
});

Přidali jsme dvě jednoduché anonymní funkce, které se spouštějí na mouseover a mouseout události vyhozen, indikátor průběhu (Všimněte si, že se jedná o standardní události modelu DOM není vlastní indikátor průběhu události). Vše, co děláme v první funkce je vytvořit nový odstavec s aktuální hodnotou pokrok bar jako jeho innerText a připojit jej na stránku.

Hodnota je načtena pomocí metody možnost. Argument předaný do metody je název vlastnosti, které bychom chtěli získat. Druhá funkce jednoduše odebere zprávu znovu. Zpráva se zobrazí v následujícím snímku obrazovky:

Vlastnosti, události a metody

Vlastnost hodnota nebo možnost je v současnosti jedinou konfigurovatelnou vlastnost indikátor průběhu; v tomto příkladu jsme ho při nastavení widgetu je inicializována průchodem v jako vlastnost objektu konfigurace. Chcete-li nastavit tuto vlastnost po inicializaci widget použijeme metodu možnost. Chcete-li použít tuto metodu v nastavení režimu, je třeba přidat druhý parametr zadáním nové hodnoty, jako je tento:

1
2	progressbar("option", "value", 75)

Možná se divíte, proč jsem řekl "druhý parametr" kdy zřetelně existují tři argumenty v výše řádku kódu. I když jsme pomocí metody možnost, voláme ve skutečnosti ji přímo. Místo toho jsme volání metody konstruktoru znovu, ale to říká, že bychom chtěli volat metodu možnost. Widget bude volat metodu interně, procházející v dva parametry (75 a "hodnota"), můžeme předat konstruktoru po názvu metody.

Indikátor průběhu zveřejňuje jedné události, události change, která poskytuje mechanismus pro nás k zavěšení do tak, že můžeme reagovat na změny v jeho hodnoty. To je vlastní události, abychom mohli rozpoznat a reagovat na něj dvěma různými způsoby. Můžeme definovat anonymní funkce jako hodnota vlastnosti změnit v objektu konfigurace, jako jsme to udělali s value vlastnost, nebo můžeme použít jQuery je bind metodu k určení anonymní funkce k provedení. Jemný rozdíl mezi nimi je, že kód zadaný pomocí metody bind bude proveden první.
Progress bar API poskytuje pět metod, které jsou uvedeny níže:

zničit
zakázat
Povolit
možnost
hodnota

Všechny tyto metody se používají stejným způsobem jako možnost metoda, který jsme se podívali na; voláním metody konstruktoru určující název metody a parametrů, které bychom chtěli předat. Většina z nich by měl být docela samo-vysvětlující.

Použití panelu pokroku

V tomto příkladu je zatím velmi základní, pro ty z vás, že nesmíte použili jQuery UI vůbec před. Pojďme trochu urychlit věci a dát dohromady něco, co se blíží takové věci, které mohli bychom rádi v řádné provádění. V tomto příkladu bude stejně jednoduchý, ale to by měla dát mnohem lepší představu o jak widget lze použít pro nás pracovat. Naše dokončené stránky se objeví něco jako toto:

Aby start s následujícím podkladové stránky do nového souboru v textovém editoru:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="jqueryui1.7/development-bundle/themes/smoothness/ui.core.css">
    <link rel="stylesheet" type="text/css" href="jqueryui1.7/development-bundle/themes/smoothness/ui.theme.css">
    <link rel="stylesheet" type="text/css" href="jqueryui1.7/development-bundle/themes/smoothness/ui.progressbar.css">
    <link rel="stylesheet" type="text/css" href="regForm.css">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>jQuery UI Progress Bar</title>
  </head>
  <body>
    <div class="form-container ui-helper-clearfix ui-corner-all">
      <h1>Registration Form</h1>
      <p>Progress:</p>
      <div id="progress"></div><label id="amount">0%</label>
        <form action="serverScript.php">
          <div id="panel1" class="form-panel">
            <h2>Personal Details</h2>
              <fieldset class="ui-corner-all">
	<label>Name:</label><input type="text">
	<label>D.O.B:</label><input type="text">
	<label>Choose password:</label><input type="password">
	<label>Confirm password:</label><input type="password">
              </fieldset>
            </div>
            <div id="panel2" class="form-panel ui-helper-hidden">
              <h2>Contact Details</h2>
              <fieldset class="ui-corner-all">
                <label>Email:</label><input type="text">
	<label>Telephone:</label><input type="text">
	<label>Address:</label><textarea rows="3" cols="25"></textarea>
              </fieldset>
            </div>
            <div id="thanks" class="form-panel ui-helper-hidden">
              <h2>Registration Complete</h2>
              <fieldset class="ui-corner-all">
  	<p>Thanks for registering!</p>
              </fieldset>
            </div>
            <button id="next">Next ></button><button id="back" disabled="disabled">< Back</button>
          </form>
        </div>
        <script type="text/javascript" src="jqueryui1.7/development-bundle/jquery-1.3.2.js"></script>
        <script type="text/javascript" src="jqueryui1.7/development-bundle/ui/ui.core.js"></script>
        <script type="text/javascript" src="jqueryui1.7/development-bundle/ui/ui.progressbar.js"></script>
        <script type="text/javascript">

Uložte jako regForm.html ve složce jQuery UI. V horní části stránky jsme odkaz na CSS rámce; je to především přidejte požadovaný styl pro indikátor průběhu, ale také můžeme využívat některé z tříd poskytuje na své vlastní prvky. Jsme také přidat vlastní šablony stylů, které vytvoříme brzy.

Tělo stránky obsahuje několik rozložení prvků a některé textové uzly, ale toto jsou hlavní prvky kontejneru pro indikátor průběhu a formě. Formulář je rozdělen do několika různých oddílů pomocí elementů div a sadu polí. Důvodem pro to je tak, že můžeme schovat část formuláře, aby to vypadalo, jako by je rozložena na několik stránek.

Přidali jsme odstavec a popisek vedle indikátor průběhu, jsme si nastavte tak, aby se zobrazily uvnitř indikátor průběhu. Odstavec obsahuje jednoduchý textový řetězec. Popisek se používá k zobrazení aktuální hodnota průběhu.

Vnější kontejner je uveden několika názvy tříd; prvním z nich je tak, že můžeme aplikovat některé vlastní styl pro prvek, ale druhé dvě mají cíl různých funkcí CSS rámce. Ui-helper-clearfix třída se používá k automaticky vymazat plovoucí prvky a je skvělý způsob, jak snížit nepořádek navíc a zbytečné div prvky.

Ui roh všechny třídy slouží k dát prvek kontejneru (stejně jako indikátor sama, který má automaticky a naše elementy sady polí) zaoblené rohy pomocí několika pravidel pro vlastní styl. Tyto jsou podporována pouze v prohlížečích založených na gecko a webkit, ale v podstatě progressive vylepšení je naprosto přijatelné, je používat. Postupným rozšiřováním diktuje, že můžeme poskytnout vylepšené stylingové na našich webových stránkách pro prohlížeče, které jsou schopny zobrazovat. Jiné prohlížeče bude mít pouze pravoúhlými kontejner.

Používáme jiné třídy z CSS rámec ve formuláři. několik panelů musí být skrytá, když se stránka poprvé načte, můžeme tedy udělat využívání ui pomocník skryté třídy zajistit, že jsou nastaveny na zobrazení: žádná, když chceme ukázat jim, všichni musíme udělat je odstranit tento název třídy.

V dolní části těla (z důvodů výkonu; to opravdu fungovat mimochodem!) jsme odkaz na požadované JavaScript zdroje z knihovny. Úplně poslední script prvku je prázdný a čeká na kód, který přinese do života formě a indikátor průběhu. Dodejme, že příští:


$(function() {

  //call progress bar constructor
  $("#progress").progressbar({ change: function() {

    //update amount label when value changes
    $("#amount").text($("#progress").progressbar("option", "value") + "%");
  } });

  //set click handler for next button
  $("#next").click(function(e) {

  //stop form submission
  e.preventDefault();

  //look at each panel
  $(".form-panel").each(function() {

    //if it's not the first panel enable the back button
    ($(this).attr("id") != "panel1") ? null : $("#back").attr("disabled", "");

	//if the panel is visible fade it out
	($(this).hasClass("ui-helper-hidden")) ? null : $(this).fadeOut("fast", function() {

	  //add hidden class and show the next panel
	  $(this).addClass("ui-helper-hidden").next().fadeIn("fast", function() {

	    //if it's the last panel disable the next button
    	    ($(this).attr("id") != "thanks") ? null : $("#next").attr("disabled", "disabled");
								
	    //remove hidden class from new panel
	    $(this).removeClass("ui-helper-hidden");
								
	    //update progress bar
	    $("#progress").progressbar("option", "value", $("#progress").progressbar("option", "value") + 50);
	  });
      });
    });
  });

});

V rámci vnější document.ready zkratka máme funkci konstruktoru pro pokrok bar; Míjíme konstruktor objekt literálu konfigurace obsahující jedinou vlastnost. To je změnit vlastnost a umožňuje nám poskytnout anonymní funkce spustit pokaždé, když je zjištěna událost vlastní změny. Tuto událost můžete použít k aktualizaci popisek, který chceme umístit uvnitř indikátor průběhu.

Pokaždé, když je aktivována událost můžeme chytit aktuální hodnota indikátoru průběhu metodou možnost a nastavte hodnotu jako text popisku. Událost je aktivována po změna proběhne, takže hodnota, kterou jsme získali bude vždy novou hodnotu.

Dále máme click obslužnou rutinu pro další video tlačítko; Po klepnutí na toto tlačítko bude to mít za následek současné "page" formy mění, a to prostřednictvím řady animace a hodnota pokrok bar aktualizace. Také musíme udělat pár dalších věcí. Výchozí chování tlačítka uvnitř formuláře je odeslat formulář, který My nechceme udělat v této fázi, tak první věc, kterou dělá naši rutinu click je zabránit formulář odesílán preventDefault() funkci jazyka JavaScript. To se nazývá na objekt události, který je automaticky předána funkci anonymní.

Pak se podíváme prostřednictvím všech samostatných panelů v podobě k určení aktuální panel; první věc, kterou děláme je kontrola, že aktuální panel není první panel a je-li tomu tak není, umožňujeme na tlačítko zpět, které je ve výchozím nastavení zakázána. Pouze jeden panel se zobrazí v jednom okamžiku, takže najdeme panel, který nemá skryté ui pomocné třídy a to postupně zeslabovat. Jsme zadat funkci anonymní zpětného volání k provedení po dokončení Zeslabit.

V rámci této druhé funkce vyberte další prvek a najevo; Pokud další prvek je poslední panel, který má id díky, můžeme zakázat další video tlačítko. Ačkoli tam se mnou o skutečném předložení formuláře v tomto příkladu, to je, kde bychom mohli poslat údaje shromážděné z formuláře na server. Odstraníme skryté ui pomocné třídy, jak panel je nyní viditelné.

Nakonec použijeme metodu možnost ještě jednou, tentokrát v setter režimu, nastavte novou hodnotu indikátoru průběhu. Nová hodnota, která jsme předat metodě jako druhý parametr je jednoduše aktuální hodnotu plus 50, neboť existují jen 2 části formuláře. Tato poslední část pak spustí funkce, která aktualizuje popisek.

Dále potřebujeme přidat velmi podobné click obslužnou rutinu pro


//set click handler for back button
$("#back").click(function(e) {
				  
  //stop form submission
  e.preventDefault();
					
  //look at each panel
  $(".form-panel").each(function() {
					  					
    //if it's not the last panel enable the next button
    ($(this).attr("id") != "thanks") ? null : $("#next").attr("disabled", "");
					  
    //if the panel is visible fade it out
    ($(this).hasClass("ui-helper-hidden")) ? null : $(this).fadeOut("fast", function() {
						  
      //add hidden class and show the next panel
      $(this).addClass("ui-helper-hidden").prev().fadeIn("fast", function() {
							
        //if it's the first panel disable the back button
    	  ($(this).attr("id") != "panel1") ? null : $("#back").attr("disabled", "disabled");
										
	  //remove hidden class from new panel
	  $(this).removeClass("ui-helper-hidden");
								
	  //update progress bar
	  $("#progress").progressbar("option", "value", $("#progress").progressbar("option", "value") - 50);
      });
    });
  });
});

To je teď všechny kód, který budeme potřebovat, jediné, co musíme udělat je přidání některé základní CSS položit příklad Následující kód přidejte do nového souboru v textovém editoru:


h1, h2 { font-family:Georgia; font-size:140%; margin-top:0; }
h2 { font-size:100%; margin:20px 0 10px; text-align:left; }
.form-container {
  width:400px; margin:0 auto; position:relative; font-family:Verdana;
  font-size:80%; padding:20px; background-color:#e0e3e2;
  border:3px solid #abadac;
}
.form-panel { width:400px; height:241px; }
.form-panel fieldset {
  width:397px; height:170px; margin:0 auto; padding:22px 0 0;
  border:1px solid #abadac; background-color:#ffffff;
}
.form-panel label {
  width:146px; display:block; float:left; text-align:right;
  padding-top:2px; margin-right:10px;
}
.form-panel input, .form-panel textarea {
  float:left; width:200px; margin-bottom:13px;
}
.form-container button { float:right; }
p {
  margin:0; font-size:75%; position:absolute; left:30px; top:60px;
  font-weight:bold;
}
#amount {
  position:absolute; right:30px; top:60px; font-size:80%;
  font-weight:bold;
}
#thanks { text-align:center; }
#thanks p {
  margin-top:48px; font-size:160%; position:relative; left:0; top:0;
}

Uložte jako regForm.css ve stejné složce jako soubor HTML. Nyní bychom měli pracovní stránka s drátový pokroku bar. Když narazíme na stránku bychom měli zjistit, že jsme mohli procházet jednotlivé panely formuláře a indikátor průběhu samotné se odpovídajícím způsobem aktualizují:

Shrnutí

V tomto článku jsme se podívali na extrémně užitečný indikátor, který můžeme použít jako vizuální pomůcka sdělit návštěvníkům, kolik déle určený proces bude trvat dokončení procento-moudrý. To poskytuje atraktivní a užitečné prezentace informací způsobem, který by měl být snadno srozumitelné našimi návštěvníky.

Podívali jsme se na vlastnosti a události, které jsou vystaveny jeho API a podívali jsme se na jednu z metod, které můžeme nazvat aby indikátor průběhu něco udělat. V příkladu, který jsme skončily s spuštět perfektně ve všech hlavních prohlížečích, i když to vypadá trochu chaotický v dobré ol ' IE (což by bylo velmi snadné opravit byli jsme ochotni tak učinit).

Přihlásit se k NETTUTS RSS Feed další denní tuts vývoj webu a články.