Sistema di votazione con Stelle [Moduli e blocchi]

Xoops Italia Indice del forum

Home page » Gestione Xoops 2.4.x » Moduli e blocchi » Sistema di votazione con Stelle

Naviga in questa discussione: 1 Utenti anonimi

In basso Argomento precedente Argomento successivo Registrati per inviare messaggi

AngeloMorto

Sistema di votazione con Stelle

Allievo

Inserito:
20/11/2004 12:23

Da Bari

raggruppare
Utenti Registrati

Messaggi: 500

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 {

            position: relative;

            height: 16px;

            background: url(<{$xoops_imageurl}>/img/jquery.ui.stars.gif) repeat-x 0 -32px;

        }

         

        .stars-on {

            position: absolute;

            background-position: 0 -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() / 5 * 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:

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

Inserito il:28/4/2012 17:04

AngeloMorto

Re: Sistema di votazione con Stelle

Allievo

Inserito:
20/11/2004 12:23

Da Bari

raggruppare
Utenti Registrati

Messaggi: 500

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

timgno

Re: Sistema di votazione con Stelle

Guru

Inserito:
16/5/2007 13:09

Da Cosenza

raggruppare
Utenti Registrati

Messaggi: 1437

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

AngeloMorto

Re: Sistema di votazione con Stelle

Allievo

Inserito:
20/11/2004 12:23

Da Bari

raggruppare
Utenti Registrati

Messaggi: 500

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 {

            position: relative;

            height: 16px;

            background: url(<{$xoops_imageurl}>/img/jquery.ui.stars.gif) repeat-x 0 -32px;

        }

         

        .stars-on {

            position: absolute;

            background-position: 0 -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() / 5 * 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

AngeloMorto

Re: Sistema di votazione con Stelle

Allievo

Inserito:
20/11/2004 12:23

Da Bari

raggruppare
Utenti Registrati

Messaggi: 500

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

Home page » Gestione Xoops 2.4.x » Moduli e blocchi » Sistema di votazione con Stelle

In alto Argomento precedente Argomento successivo

Registrati per inviare messaggi

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.