Форум программистов, компьютерный форум, киберфорум
Наши страницы
jQuery
Войти
Регистрация
Восстановить пароль
 
pekinessik
0 / 0 / 0
Регистрация: 14.09.2009
Сообщений: 44
1

Статическая панель

08.01.2014, 22:13. Просмотров 478. Ответов 8
Метки нет (Все метки)

Всем привет. Столкнулся с такой проблемой (уже сутки кручу ее): есть читалка, которая перелистывает листы книги. При нажатии на иконку списка выезжает панель с заголовками страниц, по клику на которые книжка переворачивается на нужную страницу, а панель закрывается. Мне надо сделать так, чтобы панель все время была видна.

Javascript
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
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
var Page = (function() {
 
    var $container = $( '#container' ),
        $bookBlock = $( '#bb-bookblock' ),
        $items = $bookBlock.children(),
        itemsCount = $items.length,
        current = 0,
        bb = $( '#bb-bookblock' ).bookblock( {
            speed : 800,
            perspective : 2000,
            shadowSides : 0.8,
            shadowFlip  : 0.4,
            onEndFlip : function(old, page, isLimit) {
                
                current = page;
                // update TOC current
                updateTOC();
                // updateNavigation
                updateNavigation( isLimit );
                // initialize jScrollPane on the content div for the new item
                setJSP( 'init' );
                // destroy jScrollPane on the content div for the old item
                setJSP( 'destroy', old );
 
            }
        } ),
        $navNext = $( '#bb-nav-next' ),
        $navPrev = $( '#bb-nav-prev' ).hide(),
        $menuItems = $container.find( 'ul.menu-toc > li' ),
        $tblcontents = $( '#tblcontents' ),
        transEndEventNames = {
            'WebkitTransition': 'webkitTransitionEnd',
            'MozTransition': 'transitionend',
            'OTransition': 'oTransitionEnd',
            'msTransition': 'MSTransitionEnd',
            'transition': 'transitionend'
        },
        transEndEventName = transEndEventNames[Modernizr.prefixed('transition')],
        supportTransitions = Modernizr.csstransitions;
 
    function init() {
 
        // initialize jScrollPane on the content div of the first item
        setJSP( 'init' );
        initEvents();
 
    }
    
    function initEvents() {
 
        // add navigation events
        $navNext.on( 'click', function() {
            bb.next();
            return false;
        } );
 
        $navPrev.on( 'click', function() {
            bb.prev();
            return false;
        } );
        
        // add swipe events
        $items.on( {
            'swipeleft'     : function( event ) {
                if( $container.data( 'opened' ) ) {
                    return false;
                }
                bb.next();
                return false;
            },
            'swiperight'    : function( event ) {
                if( $container.data( 'opened' ) ) {
                    return false;
                }
                bb.prev();
                return false;
            }
        } );
 
        // show table of contents
        $tblcontents.on( 'click', toggleTOC );
 
        // click a menu item
        $menuItems.on( 'click', function() {
 
            var $el = $( this ),
                idx = $el.index(),
                jump = function() {
                    bb.jump( idx + 1 );
                };
            
            current !== idx ? closeTOC( jump ) : closeTOC();
 
            return false;
            
        } );
 
 
        // reinit jScrollPane on window resize
        $( window ).on( 'debouncedresize', function() {
            // reinitialise jScrollPane on the content div
            setJSP( 'reinit' );
        } );
 
    }
 
    function setJSP( action, idx, idx1 ) {
        
        var idx = idx === undefined ? current : idx,
            $content = $items.eq( idx ).children( 'div.content' ),
            apiJSP = $content.data( 'jsp' );
        
        if( action === 'init' && apiJSP === undefined ) {
            $content.jScrollPane({verticalGutter : 0, hideFocus : true });
        }
        else if( action === 'reinit' && apiJSP !== undefined ) {
            apiJSP.reinitialise();
        }
        else if( action === 'destroy' && apiJSP !== undefined ) {
            apiJSP.destroy();
        }
 
    }
 
    function updateTOC() {
        $menuItems.removeClass( 'menu-toc-current' ).eq( current ).addClass( 'menu-toc-current' );
    }
 
    function updateNavigation( isLastPage ) {
        
        if( current === 0 ) {
            $navNext.show();
            $navPrev.hide();
        }
        else if( isLastPage ) {
            $navNext.hide();
            $navPrev.show();
        }
        else {
            $navNext.show();
            $navPrev.show();
        }
 
    }
 
    function toggleTOC() {
        var opened = $container.data( 'opened' );
        opened ? closeTOC() : openTOC();
    }
 
    function openTOC() {
        $navNext.hide();
        $navPrev.hide();
        $container.addClass( 'slideRight' ).data( 'opened', true );
    }
 
    function closeTOC( callback ) {
 
        updateNavigation( current === itemsCount - 1 );
        $container.removeClass( 'slideRight' ).data( 'opened', false );
        if( callback ) {
            if( supportTransitions ) {
                $container.on( transEndEventName, function() {
                    $( this ).off( transEndEventName );
                    callback.call();
                } );
            }
            else {
                callback.call();
            }
        }
 
    }
 
    return { init : init };
 
})();
Помогите плиз решить проблему. Спасибо.
0
Вложения
Тип файла: zip FullscreenBookBlock.zip (37.3 Кб, 4 просмотров)
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
08.01.2014, 22:13
Ответы с готовыми решениями:

Панель BB кодов
Создаю панель BB кодов, как сделать следущее: Как мне определить где...

Меню-панель
Всем привет уважаемые форумчане. Пожалуйста,может кто встречал,как реализовать...

Выдвижная панель
Доброго времени суток! :) Как истинный новичек в JS сижу и уже долго ломаю...

Выскальзывающая панель
Всем привет! Начал изучать js. Вот возник вопрос. Можно ли ниже указанный код...

языковая панель
есть картинка , там все указано (выбирается количество допустимых языков) ,...

8
Razgibatel
3 / 3 / 0
Регистрация: 26.11.2013
Сообщений: 37
08.01.2014, 22:54 2
можно просто скрыть ту кнопку
CSS
1
2
3
#tblcontents {
display: none;
}
а в самом
HTML5
1
<div id="container" class="container">
дописать slideRight
т.е.
HTML5
1
<div id="container" class="container slideRight">
можно конечно разобраться и сделать по-другому ("По-мудрому")
0
pekinessik
0 / 0 / 0
Регистрация: 14.09.2009
Сообщений: 44
09.01.2014, 11:03  [ТС] 3
Спасибо Razgibatel за ответ, но не совсем то.
Получается, что при обновлении страницы панель видна, кликаешь по названию страницы - панель пропадает.
Javascript
1
$container.removeClass( 'slideRight' ).data( 'opened', false );
класс меняется.
Нету ни кнопки, ни страницы. Мне нужно, чтобы эта панель была всегда открыта, никуда не уезжала. Спасибо.
0
Razgibatel
3 / 3 / 0
Регистрация: 26.11.2013
Сообщений: 37
09.01.2014, 12:22 4
удали событие removeClass и ничего не пропадет
0
pekinessik
0 / 0 / 0
Регистрация: 14.09.2009
Сообщений: 44
09.01.2014, 14:58  [ТС] 5
Уже пробовал. При клике на названии никуда не переходит.
0
Razgibatel
3 / 3 / 0
Регистрация: 26.11.2013
Сообщений: 37
09.01.2014, 15:39 6
странно, у меня переходит, но с задержкой какойто
0
pekinessik
0 / 0 / 0
Регистрация: 14.09.2009
Сообщений: 44
09.01.2014, 17:00  [ТС] 7
Я делаю для wordpress, может в этом проблема
HTML5
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
<div id="container" class="container slideRight">   
                              
                    <div class="menu-panel">
                        <h3>Меню</h3>
                        <ul id="menu-toc" class="menu-toc">
                            <?php $recent = new WP_Query("cat=4&showposts=100&order=ASC&orderby=date"); while($recent->have_posts()) : $recent->the_post(); $num_li = $num_li+1; ?>                    
                                <li><a href="#item<?php echo ($num_li) ?>"><?php the_title(); ?></a></li>
                            <?php endwhile; ?>
                        </ul>
                    </div>
        
                    <div class="bb-custom-wrapper">
                        <div id="bb-bookblock" class="bb-bookblock">
                            <?php $recent = new WP_Query("cat=4&showposts=100&order=ASC&orderby=date"); while($recent->have_posts()) : $recent->the_post(); $num = $num+1; ?>
                                <div class="bb-item" id="item<?php echo ($num) ?>">
                                    <div class="content">
                                        <div class="scroller">
                                            <?php the_content(); ?>
                                        </div>
                                    </div>
                                </div>
                            <?php endwhile; ?>  
                            <nav>
                            <span id="bb-nav-prev">&larr;</span>
                            <span id="bb-nav-next">&rarr;</span>
                        </nav>
        
                        <span id="tblcontents" class="menu-button">Table of Contents</span>         
                        </div>
                        
                        
                        
        
                    </div>
                
                </div><!-- /container -->
0
Razgibatel
3 / 3 / 0
Регистрация: 26.11.2013
Сообщений: 37
09.01.2014, 20:29 8
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function closeTOC( callback ) {
 
        updateNavigation( current === itemsCount - 1 );
        $container.removeClass( 'slideRight' ).data( 'opened', false );
        if( callback ) {
            if( supportTransitions ) {
                $container.on( transEndEventName, function() {
                    $( this ).off( transEndEventName );
                    callback.call();
                } );
            }
            else {
                callback.call();
            }
        }
 
    }
$container.removeClass( 'slideRight' ).data( 'opened', false );
это стирал в скрипте?
0
pekinessik
0 / 0 / 0
Регистрация: 14.09.2009
Сообщений: 44
09.01.2014, 21:19  [ТС] 9
да, перестает работать
0
09.01.2014, 21:19
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
09.01.2014, 21:19

Tab панель
Приветствую всех! Есть Tab панель, есть к ней код(даже 2). первый работает...

Выскальзывающая панель
Приветствую всех &lt;button type=&quot;button&quot; class=&quot;main_buttons&quot;&gt;Персональные...

Выдвижная панель
Помогите новичку в javascripte!!! Создала хтмл страницу. Теперь надо сделать...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
9
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru