Gestion fonctionnalités Bouton radio et ancre dans un jscrollpane

**abalaste** · 04/03/2013, 00h00

Bonjour

J'essaye depuis des jours à trouver une solution à mon problème qui est le suivant:

Je souhaite créer une div, boite de dialogue, avec un scrollbar personnalisée dans laquelle j'ai inséré un long texte avec des ancrages.

Pour pouvoir accéder à ces ancrages, j'ai créé des liens pour chacun d'eux avec des hyperliens. Je vous donnerais l'exemple en annexe.

Jusqu'ici, tout marche niquel. Sauf que mon désir, serait de remplacer ces liens/ancres par des boutons radios, puisque leur état enfoncé est intéressant pour comprendre qu'on est dans telle partie du texte ou telle autre.

J'ai essayé diverses méthodes comme le onclick location href etc, mais ça ne marche pas.

Si on voit le code, à la fin je veux utiliser des boutons radios qui remplaceraient les liens, par une simple fonction javascript dont je ne suis capable de réaliser. Comment faire? Inscrire un input type radio avec son label puis l'envelopper d'un a href ou est-il possible de gérer une double fonctionnalité en une seule, soit input radio et a href simultanément sans conflits.

Il faut ajouter que j'utilise le jcrollpane pour la div avec le contenu textuel, dont voici l'exemple du code:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<html>
 
<head>
 
<title>TEST BOUTON RADIO ET JSCROLLPANE</title>
 
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
 
<script type="text/javascript" src="http://www.kelvinluck.com/assets/jquery/jScrollPane/scripts/jquery.mousewheel.js"></script>
 
<script type="text/javascript" src="http://www.kelvinluck.com/assets/jquery/jScrollPane/scripts/jScrollPane.js"></script>
 
<script type="text/javascript">
 
$(function()
 
{
 
 
 
// this initialises the demo scollpanes on the page - each with different
 
// animation characteristics.
 
$('#pane1').jScrollPane({animateTo:true, animateInterval:50, animateStep:5});
 
 
// set up the links
 
$('a.scroll-to-element-demo').bind(
 
'click',
 
function()
 
{
 
$this = $(this);
 
var destinationSelector = $(this).attr('rel');
 
$('.scroll-pane', $this.parent().parent().parent()).each(
 
function()
 
{
 
this.scrollTo(destinationSelector);
 
}
 
);
 
return false;
 
}
 
);
 
 
 
});
 
</script>
 
</head>
 
<body>
 
<h1>jScrollPane - TEST</h1>
 
 
<div class="holder">
 
<h3>#pane1</h3>
 
<div id="pane1" class="scroll-pane" style="height: 190px; width: 255px;" tabindex="0">
 
<p class="p1">&gt;p1 - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec condimentum pretium nisl. Integer quis tellus nec turpis placerat scelerisque. In semper lacus eu nisi. &lt;</p>
 
<p class="p2">&gt;p2 - Nam dui enim, fringilla vitae, rhoncus non, pharetra in, nunc. Sed a lectus vel orci bibendum placerat. &lt;</p>
 
<p class="p3">&gt;p3 - Morbi augue enim, ultricies nec, lobortis sed, iaculis eu, quam. Class aptent taciti sociosqu ad blandit purus nec nisi.&lt;</p>
 
<p class="p4">&gt;p4 - Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. .&lt;</p>
 
</div>
 
<ul>
 
<li><a href="noJS.html" rel=".p1" class="scroll-to-element-demo">Scroll pane to .p1</a></li>
 
<li><a href="noJS.html" rel=".p2" class="scroll-to-element-demo">Scroll pane to .p2</a></li>
 
<li><a href="noJS.html" rel=".p3" class="scroll-to-element-demo">Scroll pane to .p3</a></li>
 
<li><a href="noJS.html" rel=".p4" class="scroll-to-element-demo">Scroll pane to .p4</a></li>
 
</ul>
 
</div>
 
 
 
</body>
 
</html>

LE JSCROLLPANE JS
_________________

http://www.kelvinluck.com/assets/jqu...jScrollPane.js

**danielhagnoul** · 05/03/2013, 02h36

Bonsoir

J'avais un peu de temps, j'ai essayé de comprendre votre problème. La documentation est mal fichue, je n'ai pas tout compris. Le résultat :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0">
	<meta name="author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/headjs/0.99/head.min.js"></script>
	<script>
		head.js( 
			"http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js", 
			"http://code.jquery.com/jquery-2.0.0b2.js",
			"http://code.jquery.com/color/jquery.color-2.1.1.min.js",
			"http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js",
			"http://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.0.6/jquery.mousewheel.min.js",
			"jquery.jscrollpane.min.js",
			"https://raw.github.com/janl/mustache.js/master/mustache.js",
			"https://raw.github.com/jonnyreeves/jquery-Mustache/master/jquery.mustache.js",
			"http://danielhagnoul.developpez.com/lib/dvjh/base.js"
		);
	</script>
	<link href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/styles/dvjhRemBase.css">
	<link rel="stylesheet" href="jquery.jscrollpane.css">
	<style>
		.hyphens { -moz-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; }
		nav { display: table-cell; text-align: left; border: 0.1rem dotted grey; width: 25rem; background-color: orange; }
		aside { display: table-cell; text-align: left; border: 0.1rem dotted grey; width: 25rem; background-color: yellow; }
		article { display: table-cell; text-align: justify; border: 0.1rem dotted grey; }
		.table1 { border-collapse: separate; border-spacing: 3rem; empty-cells: hide; caption-side: top; }
		.ligne { display: table-row; }
		.caption { display: table-caption; text-align: center; }
		.table1 .ligne { min-height: 30rem; }
		.table1 article { min-width: 40rem; vertical-align: top; }
 
		/* TEST -- Nota bene : ici 1 rem est égal à 1 px, voir dvjhRemBase.css */
		#pane1 { display: none; height: 190px; width: 255px; margin: 12px; }
		fieldset { width: 200px; }
		label { display: block; }
	</style>
</head>
<body>
	<header>
		<hgroup>
			<h1>Forum jQuery</h1>
			<h2>
				<a href="http://www.developpez.net/forums/d1315721/webmasters-developpement-web/\
				javascript/bibliotheques-frameworks/jquery/\
				gestion-fonctionnalites-bouton-radio-ancre-jscrollpane/">Lien</a>
			</h2>
		</hgroup>
	</header>
	<section class="conteneur">
		<section class="table1">
			<section class="caption">
				<h3>jScrollpane</h3>
			</section>
			<section class="ligne">
				<article>
 
					<div id="pane1" class="scroll-pane" tabindex="0">
						<p id="panep1">
							Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec condimentum pretium nisl. 
							Integer quis tellus nec turpis placerat scelerisque. In semper lacus eu nisi.
							Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec condimentum pretium nisl. 
							Integer quis tellus nec turpis placerat scelerisque. In semper lacus eu nisi.
							Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec condimentum pretium nisl. 
							Integer quis tellus nec turpis placerat scelerisque. In semper lacus eu nisi.
						</p>
						<p id="panep2">
							Nam dui enim, fringilla vitae, rhoncus non, pharetra in, nunc. Sed a lectus vel orci 
							bibendum placerat.
							Nam dui enim, fringilla vitae, rhoncus non, pharetra in, nunc. Sed a lectus vel orci 
							bibendum placerat.
							Nam dui enim, fringilla vitae, rhoncus non, pharetra in, nunc. Sed a lectus vel orci 
							bibendum placerat.
						</p>
						<p  id="panep3">
							Morbi augue enim, ultricies nec, lobortis sed, iaculis eu, quam. Class aptent taciti 
							sociosqu ad blandit purus nec nisi.
							Morbi augue enim, ultricies nec, lobortis sed, iaculis eu, quam. Class aptent taciti 
							sociosqu ad blandit purus nec nisi.
							Morbi augue enim, ultricies nec, lobortis sed, iaculis eu, quam. Class aptent taciti 
							sociosqu ad blandit purus nec nisi.
						</p>
						<p id="panep4">
							Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis 
							egestas.
							Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis 
							egestas.
							Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis 
							egestas.
						</p>
					</div>
 
				</article>
				<article>
 
					<fieldset>
						<label>Scroll pane to p1 : <input type="radio" name="scrollTo" value="#panep1" checked></label>
						<label>Scroll pane to p2 : <input type="radio" name="scrollTo" value="#panep2"></label>
						<label>Scroll pane to p3 : <input type="radio" name="scrollTo" value="#panep3"></label>
						<label>Scroll pane to p4 : <input type="radio" name="scrollTo" value="#panep4"></label>
					</fieldset>
 
				</article>
			</section>
		</section>
	</section>
	<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
		<time datetime="2013-03-05T02:30:13.748+01:00" pubdate>2013-03-05T02:30:13.748+01:00</time>
		<span itemprop="name">Daniel Hagnoul</span>
		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
		<a href="http://danielhagnoul.developpez.com/" itemprop="url">Mon cahier d’exercices</a>
		<a href="http://javascript.developpez.com/faq/jquery/" itemprop="url">FAQ</a>
		<a href="http://javascript.developpez.com/cours/?page=frameworks#jquery" itemprop="url">Tutoriels</a>
	</footer>
	<script>
		"use strict";
 
		head( function(){ // Voir : http://headjs.com/
 
			$( function(){
 
				var jObjPane = $( "#pane1" ).show().jScrollPane({
					"animateTo" : true, 
					"animateInterval" : 50, 
					"animateStep" : 5
				});
 
				var ObjScrollAPI = jObjPane.data( "jsp" );
 
				$( "input[name='scrollTo']" ).on( "change", function(){
 
				 	// http://jscrollpane.kelvinluck.com/api.html#scrollTo
 
					ObjScrollAPI.scrollToElement( $( this ).val(), true, true );
				});
 
			});
 
			$( window ).load( function(){
 
			});
 
		});
	</script>
</body>
</html>

**abalaste** · 05/03/2013, 04h09

Je tiens à vous remercier pour votre collaboration

Celà ressemble pas mal à ce que je cherche, soit remplacer dans mon code, les liens a href de la fin par des boutons radios qui adopteraient le même comportement, soit des ancres.

J'ai oublié d'inclure dans le document d'origine la feuille de style qui vous permet de voir à quoi ressemble le document que je cherche à réaliser en boutons radios.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<html>
 <head>
 <title>TEST BOUTON RADIO ET JSCROLLPANE</title>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
 <script type="text/javascript" src="http://www.kelvinluck.com/assets/jquery/jScrollPane/scripts/jquery.mousewheel.js"></script>
 <script type="text/javascript" src="http://www.kelvinluck.com/assets/jquery/jScrollPane/scripts/jScrollPane.js"></script>
 <script type="text/javascript">
 $(function()
 {
 // this initialises the demo scollpanes on the page - each with different
 // animation characteristics.
 $('#pane1').jScrollPane({animateTo:true, animateInterval:50, animateStep:5});
 // set up the links
 $('a.scroll-to-element-demo').bind(
 'click',
 function()
 {
 $this = $(this);
 var destinationSelector = $(this).attr('rel');
 $('.scroll-pane', $this.parent().parent().parent()).each(
 function()
 {
 this.scrollTo(destinationSelector);
 }
 );
 return false;
 }
 );
 });
 </script>
<style type="text/css">
.scroll-pane {
	width: 235px;
	height: auto;
	float: left;
	overflow: visible;
	padding-right: 5px; 
	position: absolute; 
	top: 0px;
}
#pane1 {}
.jScrollPaneContainer {
	position: relative;
	overflow: hidden;
	z-index: 1;
}
/*background-color barre de défilement: #8a8a8a;*/
.jScrollPaneTrack {
	position: absolute;
	cursor: pointer;
	right: 0;
	top: 0;
	height: 100%;
	background: #8a8a8a;
}
/*background-color barre de dragage: #414141;*/
.jScrollPaneDrag {
	position: absolute;
	background:#000;
	cursor: pointer;
	overflow: hidden;
}
.jScrollPaneDragTop {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
}
.jScrollPaneDragBottom {
	position: absolute;
	bottom: 0;
	left: 0;
	overflow: hidden;
}
a.jScrollArrowUp {
	display: block;
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	text-indent: -2000px;
	overflow: hidden;
	/*background-color: #666;*/
	height: 9px;
}
a.jScrollArrowUp:hover {
	/*background-color: #f60;*/
}
a.jScrollArrowDown {
	display: block;
	position: absolute;
	z-index: 1;
	bottom: 0;
	right: 0;
	text-indent: -2000px;
	overflow: hidden;
	/*background-color: #666;*/
	height: 9px;
}
a.jScrollArrowDown:hover {
	/*background-color: #f60;*/
}
a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover {
	/*background-color: #f00;*/
}
</style>
 </head>
 <body>
 <h1>jScrollPane - TEST</h1>
 <div class="holder">
 <h3>#pane1</h3>
 <div id="pane1" class="scroll-pane" style="height: 190px; width: 255px;" tabindex="0">
 	<p class="p1">&gt;p1 - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec condimentum pretium nisl. Integer quis tellus nec turpis placerat scelerisque. In semper lacus eu nisi. Praesent dignissim metus sit amet enim. Nam auctor, neque semper congue sagittis, risus mi commodo pede, nec euismod magna libero at sem. In enim magna, vestibulum et, blandit sit amet, tempor vel, ligula. Phasellus ante augue, congue vitae, faucibus quis, gravida sit amet, diam. Nullam congue accumsan magna. Etiam a nunc. Aliquam elit urna, ornare vitae, ultrices et, tempus non, nisl. Duis eros neque, luctus quis, interdum ultricies, auctor eu, urna. Donec nibh. Integer in purus tempus mi venenatis mollis. Cras nunc odio, porttitor at, accumsan ac, adipiscing vitae, ante.&lt;</p>
	<p class="p2">&gt;p2 - Nam dui enim, fringilla vitae, rhoncus non, pharetra in, nunc. Sed a lectus vel orci bibendum placerat. Aliquam erat volutpat. Integer odio. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis dictum egestas lorem. Donec ultricies volutpat tellus. Phasellus justo arcu, pharetra eget, cursus non, consectetuer ac, nunc. Fusce orci tortor, semper vel, lacinia vitae, accumsan id, quam. Mauris semper molestie lectus. Duis venenatis erat ultrices nisl.&lt;</p>
	<p class="p3">&gt;p3 - Morbi augue enim, ultricies nec, lobortis sed, iaculis eu, quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Curabitur sollicitudin, elit eu porttitor varius, tellus velit tristique sem, vitae blandit nisi eros id purus. Nunc non lorem. Nunc blandit purus nec nisi. Donec vulputate, urna vel interdum tristique, tellus mauris pretium lacus, quis sodales lectus nunc sit amet turpis. Suspendisse potenti. Fusce accumsan. Maecenas aliquam consectetuer augue. Fusce est neque, condimentum nec, condimentum vitae, consectetuer ac, tortor. Praesent ultricies urna in lectus. Nam erat nunc, venenatis nec, facilisis sed, feugiat ac, pede. Vivamus aliquam aliquet libero. Curabitur dolor nunc, scelerisque at, gravida dignissim, rutrum at, orci. Maecenas vitae libero id eros rutrum hendrerit. Duis lacinia mauris non erat. Nullam et dolor vel leo sollicitudin suscipit. Sed laoreet libero.&lt;</p>
	<p class="p4">&gt;p4 - Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent turpis. Suspendisse molestie, neque non congue ullamcorper, neque sem consequat nisl, eget pulvinar odio erat et tellus. Nunc luctus convallis dolor. Nullam non mauris. Etiam nisi magna, adipiscing eu, nonummy ac, laoreet nec, est. Pellentesque tristique, est vel condimentum feugiat, nisi justo rhoncus pede, in pulvinar mauris lectus vitae dui. Pellentesque scelerisque. Vestibulum tellus dolor, porta quis, facilisis nec, convallis vitae, quam. Quisque nisi. Nunc vitae nulla vel turpis mollis molestie. Etiam vitae massa.&lt;</p>
 </div>
 <ul>
 <li><a href="noJS.html" rel=".p1" class="scroll-to-element-demo">Scroll pane to .p1</a></li>
 <li><a href="noJS.html" rel=".p2" class="scroll-to-element-demo">Scroll pane to .p2</a></li>
 <li><a href="noJS.html" rel=".p3" class="scroll-to-element-demo">Scroll pane to .p3</a></li>
 <li><a href="noJS.html" rel=".p4" class="scroll-to-element-demo">Scroll pane to .p4</a></li>
 </ul>
 </div>
 </body>
 </html>

Gestion fonctionnalités Bouton radio et ancre dans un jscrollpane

jQuery

Vue hybride

Discussions similaires

Partager

Partager