Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 26.05.2010, 13:34
Аспирант
Отправить личное сообщение для digital_sword Посмотреть профиль Найти все сообщения от digital_sword
 
Регистрация: 20.08.2009
Сообщений: 34

Еще раз о перелистывании
Дано: 3 дива с текстом (один показан, 2 других скрыты). 2 ссылки-стрелки. Нажали на стрелку "вперед" - показался 2ой див, первый скрылся, еще раз - показался 3й, второй скрылся. Обычная листалка в общем.

Вопрос, как ее реализовать, как узнать, какой див показывать? Здесь посоветовали держать номера дивов в переменных. Но так и не смог представить картины:

id="1"
id="2"
id="3"
Показан див id="1", остальные скрыты. Нажали на стрелку - как дать понять, что скрывать нужно первый, а показывать второй?
Ответить с цитированием
  #2 (permalink)  
Старый 26.05.2010, 14:37
Аватар для e1f
e1f e1f вне форума
Профессор
Отправить личное сообщение для e1f Посмотреть профиль Найти все сообщения от e1f
 
Регистрация: 03.04.2009
Сообщений: 1,263

Как-то так:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <title>Pager</title>

    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta name="generator" content="Geany 0.18.1.1" />

    <style type="text/css">
    body {
        overflow: hidden;
    }
    
    .page-control {
        border-bottom: 1px dotted black;
        cursor: pointer;
    }

    .page-item {
        border: 1px solid green;
        margin: 10px;
        display: none;
        white-space: -moz-pre-wrap; /* Mozilla, supported since 1999 */
        white-space: -pre-wrap; /* Opera 4 - 6 */
        white-space: -o-pre-wrap; /* Opera 7 */
        white-space: pre-wrap; /* CSS3 - Text module (Candidate Recommendation) http://www.w3.org/TR/css3-text/#white-space */
        word-wrap: break-word; /* IE 5.5+ */
    }

    .page-active {
        display: block;
    }
    </style>

    <script type="text/javascript">
    function global_init() {
        init_pager(document.body.firstChild);
    }
    
    function init_pager(control) {
        if (!control) return;

        var pages = [];
        for (var i = 3; i--; ) {
            var d = document.body.appendChild(document.createElement('DIV'));
            d.className = 'page-item';
            d.appendChild(document.createTextNode('This is page numder ' + (1+i) +
                '.\n Info: ' + Math.random().toString(36).substr(2)));

            pages.unshift(d);
        }

        d = null;
        pages[0].className += ' page-active';
        control.pages = pages;
    }

    function shift_page(control) {
        if (!control.pages || control.pages.length < 2) return;

        var pages = control.pages;
        pages[0].className = (' ' + pages[0].className + ' ').replace(' page-active ', '');
        control.pages.push(control.pages.shift());
        pages[0].className += ' page-active';
    }
    </script>
</head>

<body onload="global_init()"><span class="page-control" onclick="shift_page(this)">Next</span></body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 26.05.2010, 17:55
Аспирант
Отправить личное сообщение для digital_sword Посмотреть профиль Найти все сообщения от digital_sword
 
Регистрация: 20.08.2009
Сообщений: 34

у вас переменная d создается скриптом. А у меня на странице 3 готовых дива (достаточно большие). Мне надо именно их листать.

пока не ясно
Ответить с цитированием
  #4 (permalink)  
Старый 26.05.2010, 18:04
Аватар для e1f
e1f e1f вне форума
Профессор
Отправить личное сообщение для e1f Посмотреть профиль Найти все сообщения от e1f
 
Регистрация: 03.04.2009
Сообщений: 1,263

digital_sword, и? Для Вас сложно заменить блок создания дивов на заполнение готовыми? Я показал идею, а не готовый код.
Ответить с цитированием
  #5 (permalink)  
Старый 26.05.2010, 18:46
Аспирант
Отправить личное сообщение для digital_sword Посмотреть профиль Найти все сообщения от digital_sword
 
Регистрация: 20.08.2009
Сообщений: 34

сложно, в этом то собственно и вопрос.
<style type="text/css">
#1, #2, #3 {
visibility:hidden;
}

.page-item {
visibility: visible;
}
 </style>
<div id="1">раз</div>
<div id="2">два</div>
<div id="3">три</div>

$(document).ready(function() {

        var pages = [];
        for (var i = 3; i--; ) {
		var d =$('div.i');
d.className = 'page-item';
pages.unshift(d);
        }

        d = null;
        pages[0].className += ' page-active';
        control.pages = pages;
    }

По вашему примеру переделал: скрипт ищет в коде див с id i (кстати как искать див со значением i??) и его открывает. Где здесь косяки?
Ответить с цитированием
  #6 (permalink)  
Старый 26.05.2010, 18:48
Аватар для e1f
e1f e1f вне форума
Профессор
Отправить личное сообщение для e1f Посмотреть профиль Найти все сообщения от e1f
 
Регистрация: 03.04.2009
Сообщений: 1,263

var d = $('#'+i).addClass('page-item').get(0);
Ответить с цитированием
  #7 (permalink)  
Старый 26.05.2010, 19:27
Аспирант
Отправить личное сообщение для digital_sword Посмотреть профиль Найти все сообщения от digital_sword
 
Регистрация: 20.08.2009
Сообщений: 34

ваше исправление внес. Еще дивы как цифры нельзя называть - исправил.
Итого получилось:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <title>Pager</title>

    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta name="generator" content="Geany 0.18.1.1" />

    <style type="text/css">
    body {
        overflow: hidden;
    }
    
    .page-control {
        border-bottom: 1px dotted black;
        cursor: pointer;
    }

    .page-item {
        border: 1px solid green;
        margin: 10px;
        display: none;
        white-space: -moz-pre-wrap; /* Mozilla, supported since 1999 */
        white-space: -pre-wrap; /* Opera 4 - 6 */
        white-space: -o-pre-wrap; /* Opera 7 */
        white-space: pre-wrap; /* CSS3 - Text module (Candidate Recommendation) http://www.w3.org/TR/css3-text/#white-space */
        word-wrap: break-word; /* IE 5.5+ */
    }

    .page-active {
        display: block;
    }

#n1, #n2, #n3 {
visibility: hidden;
display: block;
}
#eeee {
background:center;
}

.page-item {
visibility: visible;
}
 </style>

    <script type="text/javascript">
    function global_init() {
        init_pager(document.body.firstChild);
    }
    
  
   
    function init_pager(control) {
        if (!control) return;

        var pages = [];
        for (var i = 3; i--; ) {
		var d = $('#'+'n'+i).addClass('page-item').get(0);
pages.unshift(d);
        }

        d = null;
        pages[0].className += ' page-active';
        control.pages = pages;
    }

    function shift_page(control) {
        if (!control.pages || control.pages.length < 2) return;

        var pages = control.pages;
        pages[0].className = (' ' + pages[0].className + ' ').replace(' page-active ', '');
        control.pages.push(control.pages.shift());
        pages[0].className += ' page-active';
    }
    </script>
</head>

<body onload="global_init()">
<span class="page-control" onclick="shift_page(this)">Next</span>
<div id="n1">раз</div>
<div id="n2">два</div>
<div id="n3">три</div>


</body>
</html>

не работает
Ответить с цитированием
  #8 (permalink)  
Старый 26.05.2010, 19:51
Аватар для e1f
e1f e1f вне форума
Профессор
Отправить личное сообщение для e1f Посмотреть профиль Найти все сообщения от e1f
 
Регистрация: 03.04.2009
Сообщений: 1,263

digital_sword, а jQuery уже не надо подключать, он прямо из коробки будет работать? Головой надо думать!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <title>Pager</title>

    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta name="generator" content="Geany 0.18.1.1" />

    <style type="text/css">
    .page-control { 
        border-bottom: 1px dotted black; 
        cursor: pointer; 
    } 
  
    .page-item { 
        border: 1px solid green; 
        margin: 10px; 
        display: none; 
        white-space: -moz-pre-wrap; /* Mozilla, supported since 1999 */ 
        white-space: -pre-wrap; /* Opera 4 - 6 */ 
        white-space: -o-pre-wrap; /* Opera 7 */ 
        white-space: pre-wrap; /* CSS3 - Text module (Candidate Recommendation) http://www.w3.org/TR/css3-text/#white-space */ 
        word-wrap: break-word; /* IE 5.5+ */ 
    } 
  
    .page-active { 
        display: block; 
    }
    </style>

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    <script type="text/javascript">
    function init_pager(control) {
        if (!control) return;

        var pages = [];
        for (var i = 3; i--; ) {
            var d = $('#'+'n'+(1+i)).addClass('page-item').get(0);
            pages.unshift(d);
        }

        d = null;
        pages[0].className += ' page-active';
        control.pages = pages;
    }

    function shift_page(control) {
        if (!control.pages || control.pages.length < 2) return;

        var pages = control.pages;
        pages[0].className = (' ' + pages[0].className + ' ').replace(' page-active ', '');
        control.pages.push(control.pages.shift());
        pages[0].className += ' page-active';
    }

    $(function(){
        init_pager($('.page-control').get(0));
    });
    </script>
</head>

<body>
<span class="page-control" onclick="shift_page(this)">Next</span>
<div id="n1">раз</div>
<div id="n2">два</div>
<div id="n3">три</div>
</body>
</html>
Ответить с цитированием
  #9 (permalink)  
Старый 26.05.2010, 21:40
Аспирант
Отправить личное сообщение для digital_sword Посмотреть профиль Найти все сообщения от digital_sword
 
Регистрация: 20.08.2009
Сообщений: 34

спасибо! большой скриптик получился.
Замедлить процесс перелистывания можно? у функции replace нет параметра - времени, а заменить на animate - уже другая опера.

Есть выход?
Ответить с цитированием
  #10 (permalink)  
Старый 27.05.2010, 14:35
Аватар для e1f
e1f e1f вне форума
Профессор
Отправить личное сообщение для e1f Посмотреть профиль Найти все сообщения от e1f
 
Регистрация: 03.04.2009
Сообщений: 1,263

Имя выходам -- легион. Есть fadeIn/fadeOut, animate, animate Class. Дерзайте.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как добавить еще поле? Jony X Общие вопросы Javascript 12 06.07.2018 23:47
При клике ссылки, открыть DIV блок, и при клике ещё раз, закрыть его Simon Общие вопросы Javascript 59 28.05.2017 17:31
Окно открывается только один раз altermann ExtJS 8 22.04.2010 11:55
Чтоб ссылка появлялась один раз для каждого пользователя (по IP или Cookies) Sequoia Общие вопросы Javascript 2 28.01.2010 19:16
глюк форума Gvozd Сайт Javascript.ru 11 18.03.2009 14:37