Richiamare slider dalla pagina html

**Luca1317** · 10-02-2015, 23:05

Ho scaricato una versione modificata di RangeSlider Jquery: http://ghusse.github.io/jQRangeSlider/options.html

funziona correttamente ma i valori che io dovrei modificare non sono nella pagina html principale ma in un file .js esterno .

Visto che devo modificare dinamicamente i valori degli slider vorrei sapere come fare a richiamare la funzione e dare i valori direttamente dalla pagina html.

In pratica, il codice della pagina html è questo:

codice:


  <body>


    <div class="sliderContainer">
                <div id="rangeSliderRulerDate" class="rangeslider-success"></div>
            </div>



<!-- Sliders Page Demo Script -->
<script src="sliders.js"></script>

    </body>  
</html>

mentre quello del file .js è questo:

codice:

$(function()
{
    /* jQRangeSliders */
    
    // regular Range Slider
    $("#rangeSlider").rangeSlider();
    
    // edit Range Slider
    $("#rangeSliderEdit").editRangeSlider();


    $(".ui-editRangeSlider-inputValue").addClass('form-control input-sm');
    
    // date Range Slider
    $("#rangeSliderDate").dateRangeSlider();
    
    // Range Slider without Arrows
    $("#rangeSliderWArrows").rangeSlider({ arrows: false });
    
    // Range Slider Formatter
    $("#rangeSliderFormatter").rangeSlider({
        formatter:function(val){
            var value = Math.round(val * 5) / 5,
            decimal = value - Math.round(val);
            return "$" + (decimal == 0 ? value.toString() + ".0" : value.toString());
        }
    });
    
    // Range Slider Ruler
    $("#rangeSliderRuler").rangeSlider({
        scales: [
             // Primary scale
             {
                 first: function(val){ return val; },
                 next: function(val){ return val + 10; },
                 stop: function(val){ return false; },
                 label: function(val){ return val; },
                 format: function(tickContainer, tickStart, tickEnd){ 
                     tickContainer.addClass("myCustomClass");
                 }
             },
             // Secondary scale
             {
                 first: function(val){ return val; },
                 next: function(val){
                     if (val % 10 === 9){
                         return val + 2;
                     }
                     return val + 1;
                 },
                 stop: function(val){ return false; },
                 label: function(){ return null; }
             }]
    });
    
    // Date Range Slider Ruler
    var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sept", "Oct", "Nov", "Dec"];
    $("#rangeSliderRulerDate").dateRangeSlider(
    {
        bounds: {min: new Date(2012, 0, 1), max: new Date(2012, 11, 31, 12, 59, 59)},
        defaultValues: {min: new Date(2012, 1, 10), max: new Date(2012, 4, 22)},
        scales: [{
            first: function(value){ return value; },
            end: function(value) {return value; },
            next: function(value){
                var next = new Date(value);
                return new Date(next.setMonth(value.getMonth() + 1));
            },
            label: function(value){
                return months[value.getMonth()];
            },
            format: function(tickContainer, tickStart, tickEnd){
                tickContainer.addClass("myCustomClass");
            }
        }]
    });
    
    // Range Slider Step
    $("#rangeSliderStep").rangeSlider({step: 10});
    
    // Range Slider Wheel Zoom
    $("#rangeSliderWheelZoom").rangeSlider({wheelMode: "zoom"});
    
    // Range Slider Wheel Scroll
    $("#rangeSliderWheelScroll").rangeSlider({wheelMode: "scroll", wheelSpeed: 30});
    
    /*
     * JQueryUI Slider: Default slider
     */
    if ($('.slider-single').size() > 0)
    {
        $( ".slider-single" ).slider({
            create: JQSliderCreate,
            value: 10,
            animate: true,
            start: function() { if (typeof mainYScroller != 'undefined') mainYScroller.disable(); },
            stop: function() { if (typeof mainYScroller != 'undefined') mainYScroller.enable(); }
        });
    }
    
    /*
     * JQueryUI Slider: Multiple Vertical Sliders
     */
    $( ".sliders-vertical > span" ).each(function() 
    {
        var value = parseInt( $( this ).text(), 10 );
        $( this ).empty().slider({
            create: JQSliderCreate,
            value: value,
            range: "min",
            animate: true,
            orientation: "vertical",
            start: function() { if (typeof mainYScroller != 'undefined') mainYScroller.disable(); },
            stop: function() { if (typeof mainYScroller != 'undefined') mainYScroller.enable(); }
        });
    });
    
    /*
     * JQueryUI Slider: Range Slider
     */
    if ($('.range-slider').size() > 0)
    {
        $( ".range-slider .slider" ).slider({
            create: JQSliderCreate,
            range: true,
            min: 0,
            max: 500,
            values: [ 75, 300 ],
            slide: function( event, ui ) {
                $( ".range-slider .amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
            },
            start: function() { if (typeof mainYScroller != 'undefined') mainYScroller.disable(); },
            stop: function() { if (typeof mainYScroller != 'undefined') mainYScroller.enable(); }
        });
        $( ".range-slider .amount" ).val( "$" + $( ".range-slider .slider" ).slider( "values", 0 ) +
                " - $" + $( ".range-slider .slider" ).slider( "values", 1 ) );
    }
    
    /*
     * JQueryUI Slider: Snap to Increments
     */
    if ($('.increments-slider').size() > 0)
    {
        $( ".increments-slider .slider" ).slider({
            create: JQSliderCreate,
            value:100,
            min: 0,
            max: 500,
            step: 50,
            slide: function( event, ui ) {
                $( ".increments-slider .amount" ).val( "$" + ui.value );
            },
            start: function() { if (typeof mainYScroller != 'undefined') mainYScroller.disable(); },
            stop: function() { if (typeof mainYScroller != 'undefined') mainYScroller.enable(); }
        });
        $( ".increments-slider .amount" ).val( "$" + $( ".increments-slider .slider" ).slider( "value" ) );
    }
    
    /*
     * JQueryUI Slider: Vertical Range Slider
     */
    if ($('.vertical-range-slider').size() > 0)
    {
        $( ".vertical-range-slider .slider" ).slider({
            create: JQSliderCreate,
            orientation: "vertical",
            range: true,
            min: 0,
            max: 500,
            values: [ 100, 400 ],
            slide: function( event, ui ) {
                $( ".vertical-range-slider .amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
            },
            start: function() { if (typeof mainYScroller != 'undefined') mainYScroller.disable(); },
            stop: function() { if (typeof mainYScroller != 'undefined') mainYScroller.enable(); }
        });
        $( ".vertical-range-slider .amount" ).val( "$" + $( ".vertical-range-slider .slider" ).slider( "values", 0 ) +
                " - $" + $( ".vertical-range-slider .slider" ).slider( "values", 1 ) );
    }
    
    /*
     * JQueryUI Slider: Range fixed minimum
     */
    if ($('.slider-range-min').size() > 0)
    {
        $( ".slider-range-min .slider" ).slider({
            create: JQSliderCreate,
            range: "min",
            value: 150,
            min: 1,
            max: 700,
            slide: function( event, ui ) {
                $( ".slider-range-min .amount" ).val( "$" + ui.value );
            },
            start: function() { if (typeof mainYScroller != 'undefined') mainYScroller.disable(); },
            stop: function() { if (typeof mainYScroller != 'undefined') mainYScroller.enable(); }
        });
        $( ".slider-range-min .amount" ).val( "$" + $( ".slider-range-min .slider" ).slider( "value" ) );
    }
    
    /*
     * JQueryUI Slider: Range fixed maximum
     */
    if ($('.slider-range-max').size() > 0)
    {
        $( ".slider-range-max .slider" ).slider({
            create: JQSliderCreate,
            range: "max",
            min: 1,
            max: 700,
            value: 150,
            slide: function( event, ui ) {
                $( ".slider-range-max .amount" ).val( "$" + ui.value );
            },
            start: function() { if (typeof mainYScroller != 'undefined') mainYScroller.disable(); },
            stop: function() { if (typeof mainYScroller != 'undefined') mainYScroller.enable(); }
        });
        $( ".slider-range-max .amount" ).val( "$" + $( ".slider-range-max .slider" ).slider( "value" ) );
    }
});

**cavicchiandrea** · 10-02-2015, 23:44

E la domanda/problema qual'è?

**Luca1317** · 10-02-2015, 23:54

Devo modificare questi valori:

codice:

 bounds:{min:newDate(2012,0,1), max:newDate(2012,11,31,12,59,59)},
        defaultValues:{min:newDate(2012,1,10), max:newDate(2012,4,22)},

direttamente nella pagina html ma si trovano nel .js esterno.

Ho provato a portare nel file html solo la funzione

codice:

// Date Range Slider Ruler
var months =["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sept","Oct","Nov","Dec"];
    $("#rangeSliderRulerDate").dateRangeSlider(
{
        bounds:{min:newDate(2012,0,1), max:newDate(2012,11,31,12,59,59)},
        defaultValues:{min:newDate(2012,1,10), max:newDate(2012,4,22)},
        scales:[{
            first:function(value){return value;},
end:function(value){return value;},
next:function(value){
varnext=newDate(value);
returnnewDate(next.setMonth(value.getMonth()+1));
},
            label:function(value){
return months[value.getMonth()];
},
            format:function(tickContainer, tickStart, tickEnd){
                tickContainer.addClass("myCustomClass");
}
}]
});

ma lo slide non si visualizza.

**cavicchiandrea** · 11-02-2015, 01:42

Se non trovi indicazioni sul sito, opterei che non è possibile.

**Vindav** · 11-02-2015, 21:49

valorizza delle variabili globali con i dati che ti servono e poi sostituisci nel js esterno le date con le variabili

**Luca1317** · 11-02-2015, 23:59

Non ci avevo proprio pensato, grazie mille.

**Luca1317** · 29-03-2015, 04:01

Ok, con le variabili globali funziona a meraviglia ma è sopraggiunta una "complicazione" in più: una select option.

Dalla select devo scegliere la data da inserire nella variabile globale;

a questo punto però sono davanti ad un dubbio.

Mi spiego meglio:

al caricamento della pagina principale si carica anche il file .js dove ci sono le funzioni che mi leggono le variabili globali della pagina principale;

ma dal momento in cui devo farle scegliere da una select le due pagine si sono già caricate con variabili nulle;

come risolvo?

**marino51** · 29-03-2015, 09:52

puoi intercettare la variazione e nella funzione richiamata modificare i valori

Codice PHP:


$(document).ready(function(){
 $("select#Data").change(function(){ ModificaVakori() });

**cavicchiandrea** · 29-03-2015, 10:13

Originariamente inviata da Luca1317

Ok, con le variabili globali funziona a meraviglia ma è sopraggiunta una "complicazione" in più: una select option.

Dalla select devo scegliere la data da inserire nella variabile globale;

a questo punto però sono davanti ad un dubbio.

Mi spiego meglio:

al caricamento della pagina principale si carica anche il file .js dove ci sono le funzioni che mi leggono le variabili globali della pagina principale;

ma dal momento in cui devo farle scegliere da una select le due pagine si sono già caricate con variabili nulle;

come risolvo?

Imposti le variabile data globale con una data default (tipo la data odierna) e al cambiamento della select ricarichi il file js esterno con Ajax e aggiorni la variabile data

**Luca1317** · 29-03-2015, 13:31

nel file .js tra le altre funzioni ho:

codice:

	if ($('#datepicker-inline').length) $('#datepicker-inline').datepicker({
		
		inline: true,
		showOtherMonths:true,
		dateFormat: "dd/mm/yy",
		minDate: varDataMin,
		altField : '#hiddenFieldID',
     });

Discussione: Richiamare slider dalla pagina html

Strumenti discussione

Ricerca discussione

Visualizza

Richiamare slider dalla pagina html

Permessi di invio