- Стиль - просильвер.
- Необходимое расширение - Pages.
- собирать статью из нескольких топиков.
- сделать удобное древовидное меню статей.
Тематика моего форума подразумевает большой объём информации и в одном топике Осветить все вопросы не возможно. По этой причине появилась необходимость дать возможность делать отдельные главы в статье.
И так, задача поставлена. Но как её решить? Сервис форума не даёт возможности делать прямые запросы к БД и получить интересующие топики. Как обойти это препятствие? Ну, во первых, у нас есть замечательное расширение - Pages! Устанавливаем его. Теперь мы имеем возможность сделать из нашего форума настоящий сайт. Остался один нюанс - как вытащить текст из БД? Адрес страницы просмотра темы выглядит таким образом - .../viewtopic.php?f=25&t=247. Что нас тут интересует? Выражение t=247, где 247 это порядковый номер темы. Подставляя нужное значение можем вызвать любую тему. Но нам не нужно выводить всю страницу... берём бубен и начинаем танцевать...
Код: Выделить всё
var adress = ('http://адрес вашего форума/viewtopic.php?t='+topic_namber); //где topic_namber номер темы, которую ищем
xmlhttp.open('GET', adress, false);
xmlhttp.send(null);
var response = xmlhttp.responseText;
Код: Выделить всё
var nsearch = response.search('<h2 class="topic-title">'); //найдём заголовок темы
response = response.substr(nsearch);
var nsearch = response.search('</h2>');
var name_post = response.substr(0, nsearch+5);
name_post = name_post.replace('topic-title"', 'topic-title" style="text-align: center;" title="перейти к обсуждению статьи" '); //поправим css и атрибуты
Код: Выделить всё
document.getElementById('caption').innerHTML = name_post ; // где caption - иди контейнера для названия темы
Оказывается всё достаточно просто. Оформим всё это подобающим образом, создадим меню в виде простенькой анимированной тривьюшки.
Код: Выделить всё
<div class="nodes" topic = "" posts="" nodes-active=false onclick = "nodeClick('popup1')">
<span>Название статьи</span>
<div class="nodes-left"> </div>
</div>
<ul id="popup1">
<li><span class='node' topic = '3' posts='2' onclick = "selectNode(this)">Глава 1</span></li>
<li><span class='node' topic = '3' posts='3' onclick = "selectNode(this)">Глава 2</span></li>
</ul>
</li>
Как это выглядит можно посмотреть ТУТ.
Как это реализовать? Заходим в расширение Pages. Создаём страницу. Ставим галочку "Обрабатывать HTML" внизу окна редактирования кода и вставляем туда этот код. Я специально не стал редактировать код, приведу его в исходном виде для моего форума.
Код: Выделить всё
<style>
#content pages-content {
background: white;
}
#tree_view > ul{
width: 90%;
margin:25px auto 0;
list-style: square outside url(http://distillate.rx22.ru/store/distillate_rx22_ru/images/book2_1917.png);
border: 1px solid #DFF8DF;
border-radius: 4px 4px 4px 4px;
box-shadow: 2px 2px 2px rgba(223,248,223,0.5), -2px -2px 2px rgba(223,248,223,0.5)
}
#tree_view > ul > li{
font-weight: normal;
display: block;
position:relative;
padding:0px;
}
#tree_view > ul > li > div > span{
font-size:12px;
font-weight: normal;
padding:5px;
background-color: transparent;
color:#383333;
cursor: pointer;
}
#tree_view li ul{
position:relative;
list-style: square outside url(http://distillate.rx22.ru/store/distillate_rx22_ru/images/tree1.png);
text-align:left;
top:3px;
font-size:11px;
font-weight: normal;
left:0;
margin:0;
padding-left: 35px;
max-height:0px;
overflow:hidden;
-webkit-transition:max-height 0.4s linear;
-moz-transition:max-height 0.4s linear;
transition:max-height 0.4s linear;
}
#tree_view li ul li{
background-color:transparent;
font-weight: normal;
}
#tree_view li ul li span{
font-weight: normal;
padding: 3px 0px;
color:#383333;
display:block;
cursor: pointer;
}
#tree_view li ul li:hover{
text-decoration:underline;
}
.nodes [nodes-active="false"] {
background: linear-gradient(to right, #D7D8D3, #FFFFFF);
}
.nodes [nodes-active="true"] {
background: steelblue;
}
.nodes-left {
width: 0;
height: 0;
border: 10px solid transparent;
border-left-color: steelblue;
border-right: 0;
float: right;
margin-right: -10px;
}
.loading {
position: fixed;
display: block;
background: #555 ;
opacity: 0.7;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 100;
}
#facebook{
top:50%;
left:50%;
position: relative;
}
.facebook_block{
background-color:#FFFFFF;
border:2px solid #3B5998;
float:left;
height:30px;
margin-left:5px;
width:8px;
opacity:0.1;
-webkit-transform:scale(0.7);
-webkit-animation-name: facebook;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: linear;
}
#block_1{
-webkit-animation-delay: .3s;
}
#block_2{
-webkit-animation-delay: .4s;
}
#block_3{
-webkit-animation-delay: .5s;
}
@-webkit-keyframes facebook{
0%{-webkit-transform: scale(1.2);opacity:1;}
100%{-webkit-transform: scale(0.7);opacity:0.1;}
}
#caption {
width: 80%;
left: 10%;
height: 25px;
background-color: #ceccca;
position: relative;
border-radius: 0 0 5px 5px;
color: black;
}
#newsi {
float:right; width: 77%;
left: 21%;
height: avto;
padding-left: 10px;
padding-right: 20px;
text-shadow: 1px 1px 3px #adadad;
font-weight: 500;
font-size: 1.2em;
font-family: 'Tahoma', Arial, sans-serif;
line-height: 1.3;
}
</style>
<div id="book_caption" style="width: 100%; height: 130px; background: linear-gradient(to top, #FFFFFF, #A1A29C);">
<div id="autor" style="width: 10%; height: avto; padding-left: 5px; float: left; margin-top: 5px;">
</div>
<div id="caption" style="background: linear-gradient(to top, #FFFFFF, #CECCCA); height: 130px;"></div>
</div>
<div id="book_menu" style="float:left; width: 20%; height: auto;">
<div id="tree_view" style="height: avto; min-height: 300px;">
<ul>
<li >
<div class="nodes" topic = "" posts="" nodes-active=false onclick = "nodeClick('popup1')">
<span>Начало начал</span>
<div class="nodes-left"> </div>
</div>
<ul id="popup1">
<li><span class='node' topic = '3' posts='2' onclick = "selectNode(this)">Этиловый спирт</span></li>
<li><span class='node' topic = '3' posts='3' onclick = "selectNode(this)">Процесс брожения</span></li>
<li><span class='node' topic = '3' posts='4' onclick = "selectNode(this)">Содержание спирта</span></li>
<li><span class='node' topic = '3' posts='5' onclick = "selectNode(this)">Занимательная дистилляция</span></li>
<li><span class='node' topic = '3' posts='6' onclick = "selectNode(this)">Простой дистиллятор</span></li>
<li><span class='node' topic = '3' posts='7' onclick = "selectNode(this)">Укрепление дистиллята</span></li>
<li><span class='node' topic = '3' posts='8' onclick = "selectNode(this)">Непрерывная дистилляция </span></li>
<li><span class='node' topic = '3' posts='9' onclick = "selectNode(this)">Холодильники и дефлегматоры</span></li>
</ul>
</li>
<li>
<div class="nodes" topic = "" posts="" nodes-active="false" onclick = "nodeClick('popup2')">
<span>пункт 2</span>
<div class="nodes-left"> </div>
</div>
<ul id="popup2">
<li><span class='node' topic = '211' posts='1' onclick = "selectNode(this)">Выпадающий пункт 1</span></li>
<li><span class='node' topic = '210' posts='1,2,3' onclick = "selectNode(this)">Выпадающий пункт 2</span></li>
<li><span class='node' onclick = "selectNode(this)">Выпадающий пункт 3</span></li>
</ul>
</li>
</ul>
</div>
</div>
<div id="newsi">
</div>
<div class="loading" id="face" style='display: none;'>
<div id='facebook' >
<div id='block_1' class='facebook_block'></div>
<div id='block_2' class='facebook_block'></div>
<div id='block_3' class='facebook_block'></div>
</div>
</div>
<script>//<!--
function getXmlHttp() {
var xmlhttp;
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");} catch (E) {
xmlhttp = false;
}
}
if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
}
function print_topic(topic_namber, posts)
{
var adress = ('http://distillate.rx22.ru/viewtopic.php?t='+topic_namber);
var xmlhttp = getXmlHttp();
var printtext = "" ;
var sting = "";
var forautor = "";
face.style.display='block';
xmlhttp.open('GET', adress, false);
xmlhttp.send(null);
var response = xmlhttp.responseText;
var nsearch = response.search('<h2 class="topic-title">'); //найдём заголовок темы
response = response.substr(nsearch);
var nsearch = response.search('</h2>');
var name_post = response.substr(0, nsearch+5);
name_post = name_post.replace('topic-title"', 'topic-title" style="text-align: center;" title="перейти к обсуждению статьи" ');
for (var i = 1; i <=10; i++) { // поищем нужные посты
nsearch = response.search('<div class="content">');
if (nsearch>0) {
forautor = response ;
response = response.substr(nsearch+21);
nsearch = response.search('<div id=');
if (posts.indexOf(i)>=0) {
if (printtext.length == 0) {get_autor(forautor);}
else {sting = '<br> -------------------------------------------------------------------------------------------------------<br>';};
printtext = printtext + sting + response.substr(0, nsearch);};
}
}
document.getElementById('newsi').innerHTML = printtext ;
name_post = name_post.replace(/href="./g, 'href="http://distillate.rx22.ru'); // поправим битые ссылки
document.getElementById('caption').innerHTML = name_post ;
face.style.display='none';
return true ;
}
function get_autor(post)
{
var search = post.search('<div class="avatar-container">'); //найдём и заберём аватарку
post = post.substr(search);
search = post.search('</div>');
var avatar = post.substr(0, search+6);
post = post.substr(search+6); //найдём имя аффтора
search = post.search('</a>');
var autor = avatar + '<h3>Автор - ' + post.substr(0, search+4) + '</h3>';
autor = autor.replace(/href="./g, 'href="http://distillate.rx22.ru'); // поправим битые ссылки
autor = autor.replace(/src="./g, 'src="http://distillate.rx22.ru');
document.getElementById('autor').innerHTML = autor ;
}
function nodeClick(Id) {
var obj = document.getElementById(Id) ;
if (obj.offsetHeight==0) {obj.style.maxHeight = '300px';} else {obj.style.maxHeight = '0px';} ;
var obj = obj.previousElementSibling;
var topic_num = obj.getAttribute('topic') ;
var post_num = obj.getAttribute('posts') ;
var state = obj.getAttribute('nodes-active') ;
if (state == "false") {state = "true";} else {state = "false";};
obj.setAttribute('nodes-active', state) ;
if (topic_num.length != 0) {
print_topic(topic_num, post_num) ;
};
}
function selectNode(obj) {
if ( obj.style.fontWeight != 'bold') {
$(".node").each(function () {
if (this.style.fontWeight == 'bold') {this.style.fontWeight = 'normal'; this.style.color='#424242';};
});
obj.style.fontWeight= 'bold';
var topic_num = obj.getAttribute('topic') ;
var post_num = obj.getAttribute('posts') ;
print_topic(topic_num, post_num) ;
}
}
--></script>
Может у ког-то будут пожелания или дополнительные идеи - пишите, будем дорабатывать!