Login
Nome utente:

Password:

Ricorda



Recupero password

Registrati!
Navigazione
Utenti più attivi
1 Defkon1
Defkon1
6517
2 slyss
slyss
3388
3 blueangel
blueangel
1921
4 ianez
ianez
1914
5 timgno
timgno
1479
6 urban
urban
1476
7 dantom
dantom
1233
8 Energiko
Energiko
1013
9 unico77
unico77
985
10 Kirky
Kirky
862
Utenti Online
13 utente(i) online
(11 utente(i) in Forum)

Iscritti: 1
Ospiti: 12

ag65, altro...


Naviga in questa discussione:   1 Utenti anonimi






Sistema di votazione con Stelle
#1
Allievo


Benutzerinformationen
Inserito:
20/11/2004 12:23
Da Bari
raggruppare
Utenti Registrati
Messaggi: 503
Non In Linea
Salve a tutti,
volevo segnalarvi un plugin di jQuery che vi può permettere di sostituire il vecchio ed orrendo sistema di votazione di Xoops col tipico sistema a stelle.

Potete scaricare il plugin da questo link:
http://orkans-tmp.22web.net/star_rating/index.html#main-menu=1

Di seguito vi scrivo le istruzioni per implementarlo nel modulo Smartsection, su cui ho fatto le prove.

Innanzitutto, dopo aver scaricato il plugin ed estratto i vari files, io ho creato la cartella JAVASCRIPT nel mio tema dove ho inserito il file del plugin (jquery.ui.stars.min.js) e nella cartella CSS ho inserito il file css (jquery.ui.stars.min.css) e nella cartella IMMAGINI il file delle stelline (jquery.ui.stars.gif)

dopodiché ho inserite nel HEAD del tema il jQuery e il plugin...

<!-- JQuery -->
<
link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css">
<
script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<!-- jQuery Star Rating Plugin -->
<link rel="stylesheet" type="text/css" href="<{xoImgUrl /css/jquery.ui.stars.min.css}>">
<script src="<{xoImgUrl /javascript/jquery.ui.stars.min.js}>" type="text/javascript"></script>


infine ho modificato il file del sistema di votazione ...
MODULES/SMARTOBJECT/TEMPLATES/smartobject_rating_form.html
<{if $smartobject_css}>
    <{
$smartobject_css}>
<{/if}>
<
div id="smartobject_rating_container">
    <
div class="item">
        <{if 
$smartobject_rated}>
        <
style type="text/css">
        .
stars-off, .stars-on {
            
positionrelative;
            
height16px;
            
backgroundurl(<{$xoops_imageurl}>/img/jquery.ui.stars.gifrepeat-x 0 -32px;
        }
         
        .
stars-on {
            
positionabsolute;
            
background-position-48px;
        }
        </
style>
            <
div class="odd" style="display: block;">
            <
div><b><{$smarty.const._SOBJECT_RATING_ALREADY_RATED}><{$smartobject_user_rate}></b></div>    
                    <
div><b><{$smarty.const._SOBJECT_RATING_VOTERS_TOTAL}></b><{$smartobject_rating_stats_total}></div>
                    <
div><b><{$smarty.const._SOBJECT_RATING_AVERAGE}></b><{$smartobject_rating_stats_average}></div>
                    <
div id="fake-stars-off" class="stars-off" style="width:80px"><div id="fake-stars-on" class="stars-on"></div></div>
                </
div>
<
script type="text/javascript" language="javascript">
jQuery(function(){
    $(
"#fake-stars-on").width(Math.round( $("#fake-stars-off").width() / parseFloat(<{$smartobject_rating_stats_average}>) ));
});
</script>
        <{elseif $smartobject_user_can_rate}>
            
            <div class="odd">  
            <{$smarty.const._SOBJECT_RATING_RATE_THIS}>     
                <form name='smartobject_rating_form' id='smartobject_rating_form' method='post' class="smartobject_rating_form">
                        <input name="smartobject_rating_value" value="1" type="radio">
                        <input name="smartobject_rating_value" value="2" type="radio">
                        <input name="smartobject_rating_value" value="3" type="radio">
                        <input name="smartobject_rating_value" value="4" type="radio">
                        <input name="smartobject_rating_value" value="5" type="radio">
                </form>
            </div>
        <{/if}>
    </div>
</div>
<script type="text/javascript" language="javascript">
jQuery(function(){
    jQuery('form.smartobject_rating_form').stars({
            cancelShow: false,
            captionEl: $("#stars-cap"),
            callback: function(ui, type, value)
            {    
                $.post( window.location.href, { smartobject_rating_value: value, smartobject_rating_submit: '<{$smarty.const._SOBJECT_RATING_RATE}>'  },
                  function( data ) {
                      alert(data);
                  }
                );
            }
        });
});
</script>



ho anche segnalato il plugin sul sito ufficiale di Xoops sperando che venga implementato nel kernel...in modo tale da sostituire l'attuale sistema di votazione che fa veramente pena!!! :P

Allega file:



jpg  rate.jpg (20.29 KB)
1869_4f9c070e5dcb1.jpg 412X113 px

Inserito il:28/4/2012 17:04
Crea PDF dal messaggio Stampa Twitter Facebook Google Plus LinkedIn Del.icio.us Digg Reddit Mr. Wong relazione, rapporto In alto


Re: Sistema di votazione con Stelle
#2
Allievo


Benutzerinformationen
Inserito:
20/11/2004 12:23
Da Bari
raggruppare
Utenti Registrati
Messaggi: 503
Non In Linea
NOTA BENE:
il file CSS (jquery.ui.stars.min.css) presuppone che salviate il file gif (jquery.ui.stars.gif) nello stesso percorso in cui è situato il CSS...quindi se inserite la gif in un altro percorso, ricordatevi di modificare il CSS altrimenti non vi compariranno le stelline!!!

Inserito il:28/4/2012 17:09
Crea PDF dal messaggio Stampa Twitter Facebook Google Plus LinkedIn Del.icio.us Digg Reddit Mr. Wong relazione, rapporto In alto


Re: Sistema di votazione con Stelle
#3
Guru


Benutzerinformationen
Inserito:
16/5/2007 13:09
Da Cosenza
raggruppare
Utenti Registrati
Messaggi: 1479
Non In Linea
Innanzi tutto grazie per il tutorial e per l'idea, avevo già iniziato con un'altro tool simile per un nuovo modulo questo inserimento. Vorrei aggiungere che sarebbe meglio inserire i file jquery nella cartella xoops_lib/Frameworks/jquery/plugins in questo modo si possono utilizzare su più temi contemporaneamente se si sceglie di mostrare il blocco dei temi nel proprio sito.

Questo evita il sovraccarico delle stesse librerie in più temi diversi.

Su google ne ho trovati quattro o cinque di questi plugin ma non so se il tuo sia proprio quello più semplice da implementare.

Ti farò sapere appena li avrò testati tutti.

Inserito il:28/4/2012 18:57
Crea PDF dal messaggio Stampa Twitter Facebook Google Plus LinkedIn Del.icio.us Digg Reddit Mr. Wong relazione, rapporto In alto


Re: Sistema di votazione con Stelle
#4
Allievo


Benutzerinformationen
Inserito:
20/11/2004 12:23
Da Bari
raggruppare
Utenti Registrati
Messaggi: 503
Non In Linea
Errata corriege in MODULES/SMARTOBJECT/TEMPLATES/smartobject_rating_form.html

(nelle indicazioni che avevo postato avevo dimenticato di togliere l'allert di debug, inoltre ho fatto in modo che la votazione è visibile anche per gli utenti anonimi, in modo tale che se tentano di votare, viene richiesta la registrazione!)


<{if $smartobject_css}>
    <{
$smartobject_css}>
<{/if}>
<
div id="smartobject_rating_container">
    <
div class="item">
        <{if 
$smartobject_rated}>
        <
style type="text/css">
        .
stars-off, .stars-on {
            
positionrelative;
            
height16px;
            
backgroundurl(<{$xoops_imageurl}>/img/jquery.ui.stars.gifrepeat-x 0 -32px;
        }
         
        .
stars-on {
            
positionabsolute;
            
background-position-48px;
        }
        </
style>
            <
div class="odd" style="display: block;">
            <
div><b><{$smarty.const._SOBJECT_RATING_ALREADY_RATED}><{$smartobject_user_rate}></b></div>    
                    <
div><b><{$smarty.const._SOBJECT_RATING_VOTERS_TOTAL}></b><{$smartobject_rating_stats_total}></div>
                    <
div><b><{$smarty.const._SOBJECT_RATING_AVERAGE}></b><{$smartobject_rating_stats_average}></div>
                    <
div id="fake-stars-off" class="stars-off" style="width:80px"><div id="fake-stars-on" class="stars-on"></div></div>
                </
div>
<
script type="text/javascript" language="javascript">
jQuery(function(){
    $(
"#fake-stars-on").width(Math.round( $("#fake-stars-off").width() / parseFloat(<{$smartobject_rating_stats_average}>) ));
});
</script>
        <{else}>
            
            <div class="odd">  
            <{$smarty.const._SOBJECT_RATING_RATE_THIS}>     
                <form name='smartobject_rating_form' id='smartobject_rating_form' method='post' class="smartobject_rating_form">
                        <input name="smartobject_rating_value" value="1" type="radio">
                        <input name="smartobject_rating_value" value="2" type="radio">
                        <input name="smartobject_rating_value" value="3" type="radio">
                        <input name="smartobject_rating_value" value="4" type="radio">
                        <input name="smartobject_rating_value" value="5" type="radio">
                </form>
            </div>
        <{/if}>
    </div>
</div>
<script type="text/javascript" language="javascript">
jQuery(function(){
    jQuery('form.smartobject_rating_form').stars({
            cancelShow: false,
            captionEl: $("#stars-cap"),
            callback: function(ui, type, value)
            {    
                $.post( window.location.href, { smartobject_rating_value: value, smartobject_rating_submit: '<{$smarty.const._SOBJECT_RATING_RATE}>'  },
                  function( data ) {
                       <{if $smartobject_user_can_rate}>
                                  window.location.href = window.location.href;
                        <{else}>
                                window.location.href = "<{$xoops_url}>/register.php";
                        <{/if}>
                  }
                );
            }
        });
});
</script>

Inserito il:28/4/2012 20:02
Crea PDF dal messaggio Stampa Twitter Facebook Google Plus LinkedIn Del.icio.us Digg Reddit Mr. Wong relazione, rapporto In alto


Re: Sistema di votazione con Stelle
#5
Allievo


Benutzerinformationen
Inserito:
20/11/2004 12:23
Da Bari
raggruppare
Utenti Registrati
Messaggi: 503
Non In Linea
Citazione:

timgno ha scritto:
Innanzi tutto grazie per il tutorial e per l'idea, avevo già iniziato con un'altro tool simile per un nuovo modulo questo inserimento. Vorrei aggiungere che sarebbe meglio inserire i file jquery nella cartella xoops_lib/Frameworks/jquery/plugins in questo modo si possono utilizzare su più temi contemporaneamente se si sceglie di mostrare il blocco dei temi nel proprio sito.

Questo evita il sovraccarico delle stesse librerie in più temi diversi.

Su google ne ho trovati quattro o cinque di questi plugin ma non so se il tuo sia proprio quello più semplice da implementare.

Ti farò sapere appena li avrò testati tutti.


ciao timgno,
sull'implementazione in altri moduli sono disponibile per qualsiasi aiuto...diciamo che questo è il primo che ho trovato e visto che ho dovuto modificare un solo file, mi è sembrato abbastanza semplice...

per quanto riguarda l'inserimento nel framework in effetti hai ragione...non ci avevo pensato visto che stavo lavorando col tema...non appena posso mi studio le modifiche da fare!!!

Certo però che se si implementa una cosa del genere direttamente in Xoops ci risolvono il problema a monte :)

Inserito il:28/4/2012 20:08
Crea PDF dal messaggio Stampa Twitter Facebook Google Plus LinkedIn Del.icio.us Digg Reddit Mr. Wong relazione, rapporto In alto







Puoi vedere le discussioni.
Non puoi iniziare una nuova discussione.
Non puoi rispondere ai messaggi.
Non puoi modificare i tuoi messaggi.
Non puoi cancellare i tuoi messaggi.
Non puoi aggiungere nuovi sondaggi.
Non puoi votare nei sondaggi.
Non puoi allegare file ai messaggi.
Non puoi inviare messaggi senza approvazione.
Non puoi utilizzare tipo di argomento.
Non puoi utilizzare la sintassi HTML.
Non puoi utilizzare la firma.

[Ricerca avanzata]


XOOPS ITALIA © 2002-2012 - Powered by XOOPS