SpeedX 10 авг 2014, 19:00

bbcode style

Здравствуйте, я хотел бы узнать как вы сделали такую панель BBcode-панель.
Комментарии: 5

CabinetAdmin 11 авг 2014, 09:12 Сообщение

Какую панель?
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

silver073000Василий 11 авг 2014, 09:36 Сообщение

Наверное, имеются в виду раскрывающиеся менюшки :)
  • 0

SpeedX 11 авг 2014, 10:06 Сообщение

BOJIK писал(а):Наверное, имеются в виду раскрывающиеся менюшки :)
Да, да.
  • 0

CabinetAdmin 11 авг 2014, 11:03 Сообщение

Ааа...

Принцип такой. Создаёте ббкод, но не ставите галочку в "Показывать на странице ответа".

Далее на примере ббкода [fоnt].
Использование BBCode:

Код: Выделить всё

[font={SIMPLETEXT}]{TEXT}[/font]
Замена HTML:

Код: Выделить всё

<span style="font-family:{SIMPLETEXT};">{TEXT}</span>
Далее открываете шаблон posting_buttons.html находите:

Код: Выделить всё

<!-- BEGIN custom_tags -->
и перед найденным ставите:

Код: Выделить всё

<div id="dd_f" class="wrapper-dropdown" tabindex="1">
	<span title="Стили шрифтов">Arial</span>
	<ul class="dropdown">
		<li><a onclick="bbfontstyle('[font=Arial]', '[/font]'); return false;" title="[font=Arial]Arial[/font]" style="font-family: Arial;">Arial</a></li>
		<li><a onclick="bbfontstyle('[font=Arial Black]', '[/font]'); return false;" title="[font=Arial Black]Arial Black[/font]" style="font-family: 'Arial Black';">Arial Black</a></li>
		<li><a onclick="bbfontstyle('[font=Arial Narrow]', '[/font]'); return false;" title="[font=Arial Narrow]Arial Narrow[/font]" style="font-family: 'Arial Narrow';">Arial Narrow</a></li>
		<li><a onclick="bbfontstyle('[font=Book Antiqua]', '[/font]'); return false;" title="[font=Book Antiqua]Book Antiqua[/font]" style="font-family: 'Book Antiqua';">Book Antiqua</a></li>
		<li><a onclick="bbfontstyle('[font=Comic Sans Ms]', '[/font]'); return false;" title="[font=Comic Sans Ms]Comic Sans Ms[/font]" style="font-family: 'Comic Sans Ms';">Comic Sans Ms</a></li>
		<li><a onclick="bbfontstyle('[font=Courier New]', '[/font]'); return false;" title="[font=Courier New]Courier New[/font]" style="font-family: 'Courier New';">Courier New</a></li>
		<li><a onclick="bbfontstyle('[font=Fixedsys]', '[/font]'); return false;" title="[font=Fixedsys]Fixedsys[/font]" style="font-family: Fixedsys;">Fixedsys</a></li>
		<li><a onclick="bbfontstyle('[font=Franklin Gothic Medium]', '[/font]'); return false;" title="[font=Franklin Gothic Medium]Franklin Gothic Medium[/font]" style="font-family: 'Franklin Gothic Medium';">Franklin Gothic Medium</a>
		<li><a onclick="bbfontstyle('[font=Garamond]', '[/font]'); return false;" title="[font=Garamond]Garamond[/font]" style="font-family: Garamond;">Garamond</a></li>
		<li><a onclick="bbfontstyle('[font=Georgia]', '[/font]'); return false;" title="[font=Georgia]Georgia[/font]" style="font-family: Georgia;">Georgia</a></li>
	</ul>
</div>
Далее в конец шаблона ставите:

Код: Выделить всё

<script type="text/javascript">
function DropDown(el) {
this.dd = el;
this.initEvents();
}
DropDown.prototype = {
initEvents : function() {
var obj = this;
obj.dd.on('click', function(event){
$(this).toggleClass('active');
event.stopPropagation();
});
}
}
$(function() {
var dd = new DropDown( $('#dd_f') );
$(document).click(function() {
$('.wrapper-dropdown').removeClass('active');
});
});
</script>
Открываете тему вашего стиля, в самый конец добавляете:

Код: Выделить всё

/* Dropdown button */
.wrapper-dropdown {
background-image: url("{T_THEME_PATH}/images/bg_button.gif");
color: #000;
border: 1px solid #666;
cursor: pointer;
display: inline-block;
position: relative;
padding: 1px 15px 1px 3px;
outline: 0;
margin-top: 3px;
vertical-align: middle;
}
.wrapper-dropdown:hover {
color: #BC2A4D;
box-shadow: none;
background-position: 0 100%;
}
.wrapper-dropdown:after {
content: "";
width: 0;
height: 0;
position: absolute;
right: 3px;
top: 50%;
margin-top: -1px;
border-width: 4px 4px 0 4px;
border-style: solid;
border-color: #525252 transparent;
}
.wrapper-dropdown .dropdown {
position: absolute;
top: 140%;
left: 0;
right: 0;
width: 150px;
background: white;
border-radius: inherit;
border: 1px solid rgba(0,0,0,0.17);
box-shadow: 0 0 5px rgba(0,0,0,0.1);
font-weight: normal;
transition: all 0.5s ease-in;
list-style: none;
z-index: 1;
/* Hiding */
opacity: 0;
pointer-events: none;
}
.wrapper-dropdown .dropdown li a {
display: block;
padding: 7px;
text-decoration: none;
color: #646464;
border-bottom: 1px solid #e6e8ea;
box-shadow: inset 0 1px 0 rgba(255,255,255,1);
-moz-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.wrapper-dropdown .dropdown li:first-of-type a {
border-radius: 7px 7px 0 0;
}
.wrapper-dropdown .dropdown li:last-of-type a {
border-radius: 0 0 7px 7px;
border: none;
}
/* Hover state */
.wrapper-dropdown .dropdown li:hover a {
background: #f3f8f8;
}
.wrapper-dropdown .dropdown:after {
content: "";
width: 0;
height: 0;
position: absolute;
bottom: 100%;
left: 15px;
border-width: 0 6px 6px 6px;
border-style: solid;
border-color: #fff transparent;
}
.wrapper-dropdown .dropdown:before {
content: "";
width: 0;
height: 0;
position: absolute;
bottom: 100%;
left: 13px;
border-width: 0 8px 8px 8px;
border-style: solid;
border-color: rgba(0,0,0,0.1) transparent;
}
.wrapper-dropdown.active .dropdown {
opacity: 1;
pointer-events: auto;
}
.wrapper-dropdown.active:after {
border-width: 0 4px 4px 4px;
}
При создании ещё таких же ббкодов. Структура будет такой же, за исключением id:

Код: Выделить всё

<div id="dd_f" class="wrapper-dropdown" tabindex="1">
давайте следующему тегу новое имя, например id="dd_a" или id="dd_t". И добавляйте это имя в скрипт:

Код: Выделить всё

var dd = new DropDown( $('#dd_f') );
через запятую:

Код: Выделить всё

var dd = new DropDown( $('#dd_f, #dd_a') );
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

SpeedX 11 авг 2014, 13:17 Сообщение

Благодарю
  • 0

Похожие темы