Changer la valeur par défaut du SLIDER
Yoann Chevessier
Bonjour,
Voilà mon problème actuellement : (Le Site pour tester soi-même : http://projet2016.ddns.net/)
Quand je clic sur P1 (Image 1) dans le menu un Slider apparait avec une page spécifique à chaque fois avec pour valeur par défaut 1.
$.Pagination.defaults = {
value : 1,
total : 5,
width : 200,
onChange : function( value ) { return false; },
onSlide : function( value ) { return false; }
};Le Slider est bien à 1 comme prévu. Cependant quand je fais la même action avec P2, la valeur par défaut du SLIDER est toujours de 1, mais moi je voudrais rendre possible que par exemple quand on clic sur P2 la valeur par défaut n'est plus 1 mais 2 etc...
Merci d'avance de votre aide.
PS :
Voici les codes : HTML :
<html lang="fr">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/x-icon" href="images/logo.png" />
<title>ConsoTop | Votre consommation à distance</title>
<link rel="stylesheet" type="text/css" href="component.css" />
<script src="js/Chart.min.js"></script>
<script src="js/modernizr.custom.js"></script>
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="js/modernizr.custom.63321.js"></script>
</head>
<body>
<div class="container">
<div id="bl-main" class="bl-main">
<section>
<div class="bl-box" onclick="visibilitereset();">
<h2><div id="img1"><img src="images/156-stats-dots.png" style="width: 50px; height: 50px;"/></div>Ma Conso</h2>
</div>
<div class="bl-content">
<div id="pp-conso">
<h2>Ma consommation</h2>
<p align="center">Affichage de la consommation semestrielle sous forme de mini-graphique à sélectionner ci-contre :</p>
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="60%" HEIGHT="250" ALIGN="CENTER" STYLE="margin-top: 50px;">
<TR>
<TD align="left">
<div id="img-conso-content" onclick="visibilite1(); rightNav('1 : Courbe');">
<div class="img-description">
<p>"Courbe"</p>
</div>
</div>
</TD>
<TD align="center">
<div id="img-conso-content2" onclick="visibilite2(); rightNav('2 : Histogramme');">
<div class="img-description">
<p>"Histogramme"</p>
</div>
</div>
</TD>
<TD align="right">
<div id="img-conso-content3" onclick="visibilite3(); rightNav('3 : Anneau');">
<div class="img-description">
<p>"Anneau"</p>
</div>
</div>
</TD>
</TR>
</TABLE>
</div>
<div id="box-1-conso" style="visibility: hidden;">
<h2>Courbe</h2>
<div class="box-conso">
<div>
<canvas id="line" />
</div>
</div>
</div>
<div id="box-2-conso" style="visibility: hidden;">
<h2>Histogramme</h2>
<div class="box-conso">
<div>
<canvas id="bar" />
</div>
</div>
</div>
<div id="box-3-conso" style="visibility: hidden;">
<h2>Anneau</h2>
<div class="box-conso">
<div>
<canvas id="doughnut" />
</div>
</div>
</div>
<div id="nav-conso" class="main">
<div id="preview" class="preview">
<p id="txt-conso"></p>
</div>
<div id="slider" class="sp-slider-wrapper">
<nav>
<a href="#" class="sp-prev">Previous</a>
<a href="#" class="sp-next">Next</a>
</nav>
</div>
</div>
</div>
<span class="bl-icon bl-icon-close"></span>
</section>
<section>
<div class="bl-box">
<h2><div id="img1"><img src="images/208-eye-plus.png" style="width: 50px; height: 50px;"/></div>Top.Mation</h2>
</div>
<div class="bl-content">
<h2>Mon Suivi Consommation</h2>
<p>Avec Top.Mation, j'agis sur ma consommation d'électricité :</p>
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="60%" HEIGHT="250" ALIGN="CENTER" STYLE="margin-top: 50px;">
<TR>
<TD align="left">
<div id="suivi-content" class="suivi-content">
<div id="title-suivi-content-1" class="suivi-content-title">
<p>Suivre ma consommation</p>
</div>
<div class="suivi-img">
<div id="img-suivi-content-1" class="suivi-content-img">
</div>
</div>
<div id="content-suivi-content-1" class="suivi-content-content">
<p><b>J'analyse ma consommation d'électricité</b> en détaille sur différents formats temporelle.</p>
</div>
</div>
</TD>
<TD align="center">
<div id="suivi-content2" class="suivi-content">
<div id="title-suivi-content-2" class="suivi-content-title">
<p>Comparer ma consommation</p>
</div>
<div class="suivi-img">
<div id="img-suivi-content-2" class="suivi-content-img"></div>
</div>
<div id="content-suivi-content-2" class="suivi-content-content">
<p><b>Je compare ma consommation d'électricité</b> actuelle aux consommations précédentes.</p>
</div>
</div>
</TD>
<TD align="right">
<div id="suivi-content3" class="suivi-content">
<div id="title-suivi-content-3" class="suivi-content-title">
<p>Réduire ma consommation</p>
</div>
<div class="suivi-img">
<div id="img-suivi-content-3" class="suivi-content-img"></div>
</div>
<div id="content-suivi-content-3" class="suivi-content-content">
<p><b>J'identifie les différentes économies et pertes</b> réalisées afin d'agir pour une consommation plus faible.</p>
</div>
</div>
</TD>
</TR>
</TABLE>
</div>
<span class="bl-icon bl-icon-close"></span>
</section>
<section>
<div class="bl-box">
<h2><div id="img1"><img src="images/144-lock.png" style="width: 50px; height: 50px;"/></div>Alerte</h2>
</div>
<div class="bl-content">
<h2>Mes Alertes Personnalisées</h2>
</div>
<span class="bl-icon bl-icon-close"></span>
</section>
<section>
<div class="bl-box">
<h2><div id="img1"><img src="images/150-cogs.png" style="width: 50px; height: 50px;"/></div>Mon Compte</h2>
</div>
<div class="bl-content">
<h2>Mes Informations</h2>
</div>
<span class="bl-icon bl-icon-close"></span>
</section>
</div>
</div>
<!-- /container -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/boxlayout.js"></script>
<script src="js/visibility.js"></script>
<script type="text/javascript" src="js/line1.js"></script>
<script type="text/javascript" src="js/bar1.js"></script>
<script type="text/javascript" src="js/pie1.js"></script>
<script type="text/javascript" src="js/data.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="js/jquery.ui.touch-punch.min.js"></script>
<script src="js/jquery.pagination.js"></script>
<script>
$(function () {
Boxlayout.init();
});
</script>
<script>
function rightNav(name) {
document.getElementById("txt-conso").innerHTML = name;
}
</script>
</body>
</html>
JS :
;( function( $, window, undefined ) {
'use strict';
$.Slider = function( settings, element ) {
this.$el = element;
this.value = settings.value;
this.total = settings.total;
this.width = settings.width;
this._create();
};
$.Slider.prototype = {
_create : function() {
var self = this;
this.slider = this.$el.slider( {
value : this.value,
min : 1,
max : this.total,
step : 1
} );
this.$value = $( '<span>' + this.value + '</span>' );
this.getHandle().append( this.$value );
},
setValue : function( value ) {
this.value = value;
this.$value.text( value );
this.slider.slider( 'value', value );
},
getValue : function() {
return this.value;
},
getHandle : function() {
return this.$el.find( 'a.ui-slider-handle' );
},
getSlider : function() {
return this.slider;
},
getSliderEl : function() {
return this.$el;
},
next : function( callback ) {
if( this.value < this.total ) {
this.setValue( ++this.value );
if( callback ) {
callback.call( this, this.value );
}
}
},
previous : function( callback ) {
if( this.value > 1 ) {
this.setValue( --this.value );
if( callback ) {
callback.call( this, this.value );
}
}
}
};
$.Pagination = function( options, element ) {
this.$el = $( element );
this._init( options );
};
// the options
$.Pagination.defaults = {
value : 1,
total : 5,
width : 200,
onChange : function( value ) { return false; },
onSlide : function( value ) { return false; }
};
$.Pagination.prototype = {
_init : function( options ) {
// options
this.options = $.extend( true, {}, $.Pagination.defaults, options );
var transEndEventNames = {
'WebkitTransition' : 'webkitTransitionEnd',
'MozTransition' : 'transitionend',
'OTransition' : 'oTransitionEnd',
'msTransition' : 'MSTransitionEnd',
'transition' : 'transitionend'
};
this.transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ];
$.fn.applyStyle = Modernizr.csstransitions ? $.fn.css : $.fn.animate;
this._layout();
this._initEvents();
},
_layout : function() {
// next and previous
this.$navNext = this.$el.find( 'nav > a.sp-next' );
this.$navPrev = this.$el.find( 'nav > a.sp-prev' );
// slider
var $slider = $( '<div class="sp-slider"></div>' ).appendTo( this.$el );
this.slider = new $.Slider( { value : this.options.value, total : this.options.total, width : this.options.width }, $slider );
// control if the slider is opened/closed
this.isSliderOpened = false;
},
_initEvents : function() {
var self = this;
this.slider.getHandle().on( 'click', function() {
if( self.isSliderOpened ) {
return false;
}
self.isSliderOpened = true;
self.slider.getSliderEl().addClass( 'sp-slider-open' );
// expand slider wrapper
self.$el.stop().applyStyle( { width : self.options.width }, $.extend( true, [], { duration : '150ms' } ) );
// hide navigation
self.toggleNavigation( false );
return false;
} );
this.slider.getSlider().on( {
'slidestop' : function( event, ui ) {
if( !self.isSliderOpened ) {
return false;
}
var animcomplete = function() {
self.isSliderOpened = false;
self.slider.getSliderEl().removeClass( 'sp-slider-open' );
// show navigation
self.toggleNavigation( true );
};
self.$el.stop().applyStyle( { width : 0 }, $.extend( true, [], { duration : '150ms', complete : animcomplete } ) ).on( self.transEndEventName, function() {
$( this ).off( self.transEndEventName );
animcomplete.call();
} );
self.options.onChange( ui.value );
},
'slide' : function( event, ui ) {
if( !self.isSliderOpened ) {
return false;
}
self.slider.setValue( ui.value );
self.options.onSlide( ui.value );
}
} );
this.$navNext.on( 'click', function() {
self.slider.next( function( value ) {
self.options.onChange( value );
} );
return false;
} );
this.$navPrev.on( 'click', function() {
self.slider.previous( function( value ) {
self.options.onChange( value );
} );
return false;
} );
},
toggleNavigation : function( toggle ) {
$.fn.render = toggle ? $.fn.show : $.fn.hide;
this.$navNext.render();
this.$navPrev.render();
}
}
$.fn.pagination = function( options ) {
var instance = $.data( this, 'pagination' );
if ( typeof options === 'string' ) {
var args = Array.prototype.slice.call( arguments, 1 );
this.each(function() {
instance[ options ].apply( instance, args );
});
}
else {
this.each(function() {
instance ? instance._init() : instance = $.data( this, 'pagination', new $.Pagination( options, this ) );
});
}
return instance;
};
$(function () {
var $update = $('#preview > p');
$("#slider").pagination({
total: 3,
onChange: function (value) {
if (value != 2 && value != 3) {
$update.text(value + " : Courbe");
document.getElementById('box-1-conso').style.visibility = 'visible';
document.getElementById('box-2-conso').style.visibility = 'hidden';
document.getElementById('box-3-conso').style.visibility = 'hidden';
}
if (value != 1 && value != 3) {
$update.text(value + " : Histogramme");
document.getElementById('box-2-conso').style.visibility = 'visible';
document.getElementById('box-1-conso').style.visibility = 'hidden';
document.getElementById('box-3-conso').style.visibility = 'hidden';
}
if (value != 1 && value != 2) {
$update.text(value + " : Anneau");
document.getElementById('box-3-conso').style.visibility = 'visible';
document.getElementById('box-2-conso').style.visibility = 'hidden';
document.getElementById('box-1-conso').style.visibility = 'hidden';
}
}
});
});
} )( jQuery, window );
PS2 :
Une solution avait été envisagée, mais je ne sais pas où placer les lignes de codes pour le tester.
//dans Pagination
changerPage : function() {
self.slider.changerPageSlider( index, function( value ) {
self.options.onChange( value );
} );
return false;
} ;
//dans Slider
changerPageSlider : function( index, callback ) {
if( ( this.value < this.total ) && ( this.value >= 1 ) ){ //on verifie que le chiffre est bien un index existant
this.setValue( index );
if( callback ) {
callback.call( this, index ); //tu renvoies le bon 'index' à 'changerPage'
}
}
}