Меню цикла Jquery с контейнером - PullRequest
Новая
       3

Меню цикла Jquery с контейнером

0 голосов
/ 23 декабря 2011

Я пытаюсь привязать привязку к циклу к определенному div. Вот что у меня есть:

Меню 

<div id="mainmenu">
    <ul class="sidenav"  id="menu">
        <li>
            <a href="#page2">Serviciile noastre
            </a>
        </li>
        <li>
            <a href="#page8">Credite Nevoi personale fara ipoteca
            </a>
        </li>
        <li>
            <a href="">Credite Nevoi personale cu ipoteca
            </a>
        </li>
        <li>
            <a href="">Credite ipotecare
            </a>
        </li>
        <li>
            <a href="">Carduri de credit
            </a>
        </li>
        <li>
            <a href="">Credite "Prima Casa"
            </a>
        </li>
        <li>
            <a href="">Refinantari credite/carduri
            </a>
        </li>
        <li>
            <a href="">Acte necesare
            </a>
        </li>
        <li>
            <a href="">Economisire creditare
            </a>
        </li>
    </ul>
</div>

И JavaScript 

var $jts = jQuery.noConflict();
$jts(function() {

// maincontent cycle
$jts('#maincontent').cycle({
    fx:     'blindY', // You can choose effect do you like, for reference : http://www.malsup.com/jquery/cycle/browser.html
    speed:  'slow',
    timeout: 0,
    cleartype: true,  // true if clearType corrections should be applied (for IE) 
    cleartypeNoBg: true, 
    pager:  '#menu',
    startingSlide : 0,
    after:onAfter,
    pagerAnchorBuilder: function(idx, slide) {
        // return sel string for existing anchor
        return '#menu li:eq(' + (idx) + ') a';
    }
});

function onAfter(curr, next, opts, fwd){
    //get the height of the current slide
    var $ht =  $jts(this).height();

Я использую jquery.cycle.all.min.js.

1 Ответ

0 голосов
/ 24 декабря 2011

Так что, если я правильно понимаю, вы хотите иметь событие <a href=... click, чтобы перенести его на соответствующий слайд.

Простейший способ сделать это для примера слайда с идентификатором 7:

Ссылка, по которой вы хотите перейти для просмотра определенного слайда: 

<!-- support for those strange users
without Javascript - we will fix this later -->
<a href="your-backup-page.html" class="go-to" rel="7">Sample text</a>

Ваш JS для управления поведением 

//if the user has JS enabled, we will stop the
//link from taking us away from the page
//and only do the sweet animation

$(".go-to").click(function(gt){
    gt.preventDefault();
    var slide = $(this).attr("rel");
    $("#maincontent").cycle(slide);
});

Основные моменты, на которые стоит обратить внимание:

  1. Использование атрибута rel. Используйте это, это здорово.

  2. Использование класса пустого селектора go-to - используется только для определения конкретной ссылки для взаимодействия с циклом. Это может быть любое имя, которое вам нравится (при условии, что оно соответствует соглашениям, изложенным ниже), например foo, bar, coco-the-clown и т. Д.

    Наконец, следующее немного не по теме, но полезная информация тем не менее;

  3. Если вы хотите, чтобы ваши страницы соответствовали стандартам W3C, идентификаторы должны быть уникальными и начинаться с буквы. Прямо изо рта лошади:

ID-токены должны начинаться с буквы ([A-Za-z]) и могут сопровождаться любым количеством букв, цифр ([0-9]), дефисов ("-"), подчеркиваний ("_") ), двоеточия (":") и точки (".").

http://www.w3.org/TR/html4/types.html#type-name

в ответ на ваш комментарий

Итак, основная предпосылка того, что мы хотим сделать:

  1. Присвойте каждой ссылке идентификатор, соответствующий номеру слайда - это означает, что это должен быть номер.
  2. Узнайте порядок слайдов.

Используя вашу ссылку, которую вы разместили в комментарии, вы должны изменить ее, чтобы отразить, какой номер слайда вы хотите видеть при нажатии, например: 

<a href="credite.php" class="go-to" rel="1" >Credite Nevoi personale fara ipoteca</a>

Кроме того, удалите rel="opt" и class="go-to" из элемента div.

Если вы пойдете и попробуете это сейчас (при условии, что у вас более 1 слайда ...) и это то, что вы хотели, вам, вероятно, не нужно будет возвращаться и читать остальное.

Поэтому, когда вы нажимаете на ссылку, указанную выше, эта должна перенести вас на слайд № 2 - при условии, что вы не на слайде № 2. "Что ?!" Я слышу, как ты плачешь. Продолжайте читать.

Итак, если вы посмотрите на визуализированный исходный код в вашем браузере, вы увидите, что внутри вашего элемента цикла, maincontent, каждый из div элементов, которые являются прямыми потомками maincontent, будет слайды. Это в порядке (для компьютера); 0 - начальный слайд, 1 - второй слайд, 2 - третий слайд до бесконечности.

Итак - если вы используете PHP и MySQL для показа своего контента, будет очень легко назначить «идентификаторы» атрибутам rel вашего якоря. Кроме того, вы можете жестко закодировать их.

Дайте мне знать, как вы это сделали!

...