Gestion fonctionnalités Bouton radio et ancre dans un jscrollpane

Question

Abalaste

3 Mar 2013 à 18:21

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:

LE HTML
_______

<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">>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. <</p>

<p class="p2">>p2 - Nam dui enim, fringilla vitae, rhoncus non, pharetra in, nunc. Sed a lectus vel orci bibendum placerat. <</p>

<p class="p3">>p3 - Morbi augue enim, ultricies nec, lobortis sed, iaculis eu, quam. Class aptent taciti sociosqu ad blandit purus nec nisi.<</p>

<p class="p4">>p4 - Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. .<</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/jquery/jScrollPane/scripts/jScrollPane.js

Sujet clos