WebToDate/Ankety/Tipy a návody: Porovnání verzí

Aktuální verze z 15. 6. 2012, 10:53

Jak vytvořit anketu, ve které se hlasuje klepnutím na odpověď

Styl, kterým se formátuje anketa ve stavu před hlasováním, nastavte dle následujícího příkladu.

Hlavička

<table cellpadding="2" cellspacing="0" border="1" align="center" class="anketa_clanek">
<tr><td bgcolor="#efefef" colspan="2">
<strong>Anketa: <!--WTD_VOTE(NAME)--></strong>
</td></tr>
<tr><td colspan="2">
<!--WTD_VOTE(DESCRIPTION)-->
</td></tr>

Tělo

<tr><td>
<a href="<!--WTD_VOTE(VOTEIDXURL)-->"><!--WTD_VOTE(ANSWER)--></a>
</td>
<td>
<img src="/images/vote/voteblue.gif" height="12" width="<!--WTD_VOTE(IMGWIDTH)-->"> (<!--WTD_VOTE(PERCENTAGE)-->%)
</td>
</tr>

Patička

<tr><td bgcolor="#efefef" colspan="2">
Celkem již hlasů: <!--WTD_VOTE(TOTAL)-->
</td></tr></table>

Tento styl nevyžaduje HTML formulář, za klíčové slovo  se dosadí kompletní URL potřebné pro započítání hlasu a zobrazení ankety ve stavu po hlasování.

Anketa na stránkách jako iframe

Chcete-li na různých typech stránek zobrazovat anketu v "živém" stavu (tj. zobrazit např. průběžné výsledky hlasování ještě předtím, než uživatel hlasoval apod.), je třeba vložit anketu jako iframe - např. úvodní stránka webu je typicky generována staticky a tudíž by tohoto efektu nebylo možné z principu dosáhnout jinak. Postup je následující:

1. WebToDate styly pro ankety založte běžným způsobem např. dle příkladů uvedených v této příručce.

2. Předlohu pro anketu založte jako kompletní HTML stránku, která se bude zobrazovat uvnitř iframe, vzorový kód předlohy je např.:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">
<head>
<title>Anketa</title>
</head>
<body>
<div id="outerdiv">
<div id="anketa">
<!--WTD_VOTE(VOTEFORM)-->
</div>
</div>
</body>
</html>

3. V definici předpisu pro ankety nezaškrtávejte volbu Zobrazit samostatně

4. Založte styl pro zprávy nazvaný např. "Anketa iframe", v těle stylu použijte přibližně kód

<iframe src="/scripts/modules/vote/vote.php?id=<!--WTD_F(BODY)-->" frameborder="0" scrolling="no" marginwidth="0" marginheight="0" width="210" height="245"></iframe>

5. Založte anketu, v ní zvolte připravený předpis, zaškrtněte aktivní a zobrazovat výsledky bez hlasování.

6. Založte zprávu, kde v těle zapište ID právě založené ankety, vložte ji staticky na oblast na stránce, kde se má anketa nacházet a pro zprávu zvolte styl "Anketa iframe". Stránku vygenerujte. Pohled na takovou pomocnou zprávu ve WebToDate je na následujícím otisku obrazovky:

V tomto příkladu je použito pro zaznamenání ID ankety tělo zprávy, je samozřejmě možné použít jakékoli jiné textové pole struktury WebToDate zpráv.

Chcete-li následně vyměnit anketu za jinou, jsou třeba dva kroky:

Založení nové ankety v modulu
Změna ID ankety v těle pomocné zprávy a vygenerování stránky obsahující anketu.

Vytvoření hodnocení článků

Pro implementaci hodnocení se postupuje cca následovně:

Ve WebToDate se založí styly pro zobrazení hodnotícího prvku před hodnocením a po ohodnocení článku
Do předlohy pro zprávy se vloží klíčové slovo
V modulu Ankety se založí předpis; nastaví se pouze styly, ostatní nastavení předpisu nemá význam
Pomocí nabídky Administrace - Hodnocení se založí definice hodnocení a tohoto hodnocení se označí jako výchozí
V definici hodnocení se doplní textové popisky pro jednotlivé číselné známky.

V tuto chvíli by se měl hodnotící prvek zobrazovat ve stránce s celým textem zprávy. Bez použití javascriptu se hodnocení zobrazí typicky jako formulář s radiopřepínači:

Obslužná javascriptová funkce vložená do stránky s využitím jQuery, pluginu Star Rating a jQuery UI pak může vypadat cca následovně

function putStars() {
			var pocethvezd = $("#rlstars").attr("hodnoceni");
			$("#mojeh").hide();
 			// zobrazit hodnoceni graficky
			for(c= 1;c<=pocethvezd; c++){
			   $("#rlstars").append('<span class="ui-stars-star ui-stars-star-on"><span>' + c + '</span></span>');
			}
 		}

		$(document).ready(function(){
			// zjistit pocet hvezdicek a stav pred/po
			var pocethvezd = $("#rlstars").attr("hodnoceni");	
			var stav = $(".ratings").attr("id");
			// nacist popisky z formulare
			var labels=new Array();
			$(".hodnoceni label input").each(function(index) {
    				labels[index] = $(this).attr("title");
			});
			// schovat prvky formulare a ostatni prvky pouze pro non-js
			$(".hodnoceni").children().hide();
			$("#hodnotit").hide();
			// zmenit formular na hvezdicky
			$(".hvezdy").stars({
				cancelShow: false,
				callback: function(ui, type, value, event){
					$(".ratings").load($("#voteform").attr("action") + ' .ratings',{'rating-bar':value}, function(response, status, xhr) {
						putStars();
  					});
				}
			});
			// umisti popisky ke hvezdam
			$(".hvezdy .ui-stars-star").each(function(index) {
    				 $(this).attr("title", labels[index]);
			});
			if (stav=="po_hlasovani") {
				putStars();
			}

		});

Zobrazení hodnotícího prvku se zapnutým javascriptem pak může být formou grafických obrázků:

@@ Řádek 1: / Řádek 1: @@
-[[Category:WebToDate 4.1 Ankety]]
+[[Category:WebToDate Ankety]]
+[[Category:Ankety]]
 == Jak vytvořit anketu, ve které se hlasuje klepnutím na odpověď ==
 Styl, kterým se formátuje anketa ve stavu ''před hlasováním'', nastavte dle následujícího příkladu.
@@ Řádek 37: / Řádek 38: @@
 Chcete-li na různých typech stránek zobrazovat anketu v "živém" stavu (tj. zobrazit např. průběžné výsledky hlasování ještě předtím, než uživatel hlasoval apod.), je třeba vložit anketu jako [http://www.w3.org/TR/REC-html40/present/frames.html#h-16.5 iframe] - např. úvodní stránka webu je typicky generována staticky a tudíž by tohoto efektu nebylo možné z&nbsp;principu dosáhnout jinak. Postup je následující:
-# WebToDate styly pro ankety založte běžným způsobem např. dle příkladů uvedených v&nbsp;této příručce.
+. WebToDate styly pro ankety založte běžným způsobem např. dle příkladů uvedených v&nbsp;této příručce.
-# Předlohu pro anketu založte jako kompletní HTML stránku, která se bude zobrazovat uvnitř iframe, vzorový kód předlohy je např.:
+. Předlohu pro anketu založte jako kompletní HTML stránku, která se bude zobrazovat uvnitř iframe, vzorový kód předlohy je např.:
 <code>
@@ Řádek 56: / Řádek 58: @@
 </code>
-# V&nbsp;definici předpisu pro ankety nezaškrtávejte volbu ''Zobrazit samostatně''
+. V&nbsp;definici předpisu pro ankety nezaškrtávejte volbu ''Zobrazit samostatně''
-# Založte styl pro zprávy nazvaný např. "Anketa iframe", v&nbsp;těle stylu použijte přibližně kód
+. Založte styl pro zprávy nazvaný např. "Anketa iframe", v&nbsp;těle stylu použijte přibližně kód
 <code>
@@ Řádek 63: / Řádek 66: @@
 </code>
-# Založte anketu, v&nbsp;ní zvolte připravený předpis, zaškrtněte ''aktivní'' a ''zobrazovat výsledky bez hlasování''.
+. Založte anketu, v&nbsp;ní zvolte připravený předpis, zaškrtněte ''aktivní'' a ''zobrazovat výsledky bez hlasování''.
-# Založte zprávu, kde v&nbsp;těle zapište ID právě založené ankety, vložte ji staticky na oblast na stránce, kde se má anketa nacházet a pro zprávu zvolte styl "Anketa iframe". Stránku vygenerujte. Pohled na takovou pomocnou zprávu ve WebToDate je na následujícím otisku obrazovky:
+. Založte zprávu, kde v&nbsp;těle zapište ID právě založené ankety, vložte ji staticky na oblast na stránce, kde se má anketa nacházet a pro zprávu zvolte styl "Anketa iframe". Stránku vygenerujte. Pohled na takovou pomocnou zprávu ve WebToDate je na následujícím otisku obrazovky:
 [[Image:ankety-jakoiframe.gif|center]]
@@ Řádek 74: / Řádek 78: @@
 # Založení nové ankety v&nbsp;modulu
 # Změna ID ankety v&nbsp;těle pomocné zprávy a vygenerování stránky obsahující anketu.
+== Vytvoření hodnocení článků ==
+Pro implementaci hodnocení se postupuje cca následovně:
+# Ve WebToDate se založí [[../Reference#Implementace hodnocení|styly pro zobrazení hodnotícího prvku]] před hodnocením a po ohodnocení článku
+# Do předlohy pro zprávy se vloží klíčové slovo <nowiki><!--WTD_VOTE(RATEFORM)--></nowiki>
+# V modulu Ankety se založí [[../Reference#Nastavení předpisu|předpis]]; nastaví se pouze styly, ostatní nastavení předpisu nemá význam
+# Pomocí nabídky '''Administrace''' - '''Hodnocení''' se založí [[../Reference#Hodnocení |definice hodnocení]] a tohoto hodnocení se označí jako výchozí
+# V definici hodnocení se doplní textové popisky pro jednotlivé číselné známky.
+V tuto chvíli by se měl hodnotící prvek zobrazovat ve stránce s celým textem zprávy. Bez použití javascriptu se hodnocení zobrazí typicky jako formulář s radiopřepínači:
+[[Image:ankety-hodnoceni-ukazka1.png|center]]
+Obslužná javascriptová funkce vložená do stránky s využitím [http://jquery.com/ jQuery], [http://orkans-tmp.22web.net/star_rating/ pluginu Star Rating] a [http://jqueryui.com/ jQuery UI] pak může vypadat cca následovně
+ <code><nowiki>function putStars() {
+			var pocethvezd = $("#rlstars").attr("hodnoceni");
+			$("#mojeh").hide();
+ 			// zobrazit hodnoceni graficky
+			for(c= 1;c<=pocethvezd; c++){
+			   $("#rlstars").append('<span class="ui-stars-star ui-stars-star-on"><span>' + c + '</span></span>');
+			}
+ 		}
+		$(document).ready(function(){
+			// zjistit pocet hvezdicek a stav pred/po
+			var pocethvezd = $("#rlstars").attr("hodnoceni");
+			var stav = $(".ratings").attr("id");
+			// nacist popisky z formulare
+			var labels=new Array();
+			$(".hodnoceni label input").each(function(index) {
+    				labels[index] = $(this).attr("title");
+			});
+			// schovat prvky formulare a ostatni prvky pouze pro non-js
+			$(".hodnoceni").children().hide();
+			$("#hodnotit").hide();
+			// zmenit formular na hvezdicky
+			$(".hvezdy").stars({
+				cancelShow: false,
+				callback: function(ui, type, value, event){
+					$(".ratings").load($("#voteform").attr("action") + ' .ratings',{'rating-bar':value}, function(response, status, xhr) {
+						putStars();
+  					});
+				}
+			});
+			// umisti popisky ke hvezdam
+			$(".hvezdy .ui-stars-star").each(function(index) {
+    				 $(this).attr("title", labels[index]);
+			});
+			if (stav=="po_hlasovani") {
+				putStars();
+			}
+		});</nowiki></code>
+Zobrazení hodnotícího prvku se zapnutým javascriptem pak může být formou grafických obrázků:
+[[Image:ankety-hodnoceni-ukazka.png|center]]

WebToDate/Ankety/Tipy a návody: Porovnání verzí

Aktuální verze z 15. 6. 2012, 10:53

Jak vytvořit anketu, ve které se hlasuje klepnutím na odpověď

Anketa na stránkách jako iframe

Vytvoření hodnocení článků

Navigační menu

Možnosti stránky

Page actions

Osobní nástroje

Navigace

Hledat

Nástroje