makhatsha 2 Опубликовано: 28 января 2013 Рассказать Опубликовано: 28 января 2013 (изменено) JavaScript для постраничной навигаций. Во всех браузерах работает кроме IE8/IE9/ люди добрые помогите. Ниже описания и код скрипта В html-head прописано так: <!--табы страниц --> <script type="text/javascript" src="{THEME}/js/imtech_pager.js"></script> <script type="text/javascript"> var pager = new Imtech.Pager(); $(document).ready(function() { pager.paragraphsPerPage = 1; // определение количества элементов на странице pager.pagingContainer = $('#content'); // выбор блока content в котором находиться текст pager.paragraphs = $('a', pager.pagingContainer); //выбор тега для разделения текста pager.showPage(1); }); </script> <script type="text/javascript"> $(function () { var tabContainers = $('div.tabsContent > div'); tabContainers.hide().filter(':first').show(); $('div.tabsContent ul.tabNavigation a').click(function () { tabContainers.hide(); tabContainers.filter(this.hash).show(); $('div.tabsContent ul.tabNavigation a').removeClass('selected'); $(this).addClass('selected'); return false; }).filter(':first').click(); }); </script> <!--/табы страниц --> А в самом файле imtech_pager.js: var Imtech = {}; Imtech.Pager = function() { this.paragraphsPerPage = 3; this.currentPage = 1; this.pagingControlsContainer = "#pagingControls"; this.pagingContainerPath = "#content"; this.numPages = function() { var numPages = 0; if (this.paragraphs != null && this.paragraphsPerPage != null) { numPages = Math.ceil(this.paragraphs.length / this.paragraphsPerPage); } return numPages; }; this.showPage = function(page) { this.currentPage = page; var html = ""; for (var i = (page-1)*this.paragraphsPerPage; i < ((page-1)*this.paragraphsPerPage) + this.paragraphsPerPage; i++) { if (i < this.paragraphs.length) { var elem = this.paragraphs.get(i); html += "<" + elem.tagName + ">" + elem.innerHTML + "</" + elem.tagName + ">"; } } $(this.pagingContainerPath).html(html); renderControls(this.pagingControlsContainer, this.currentPage, this.numPages()); } var renderControls = function(container, currentPage, numPages) { var pagingControls = "Страницы: <ul>"; for (var i = 1; i <= numPages; i++) { if (i != currentPage) { pagingControls += "<li><a href='#' onclick='pager.showPage(" + i + "); return false;'>" + i + "</a></li>"; } else { pagingControls += "<li>" + i + "</li>"; } } pagingControls += "</ul>"; $(container).html(pagingControls); } } А новостях: <div class="example"> <div id="dle-content"> <div id="content"> <a>Страница 1</a> <a>Страница 2</a> </div> </div> <div id="pagingControls"> </div> </div> В CSS: #content p{text-indent:20px;text-align:justify;} #pagingControls {display: inline-block; width: 780px; border-bottom: 1px solid #ccc; padding: 0px; color: #000; font-family: tanoma; font-size: 15px;} #pagingControls li{display:inline-block; padding: 4px; font-family: tanoma; font-size:14px; color: #1AB1E8; } #pagingControls a{display:inline-block; color: #000; } #pagingControls a:hover {display:inline-block; color: #1AB1E8;} Изменено 28 января 2013 пользователем makhatsha Цитата Ссылка на сообщение Поделиться на других сайтах
Рекомендованные сообщения
Присоединяйтесь к обсуждению
Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.