Здравствуйте, я хотел бы узнать как вы сделали такую панель BBcode-панель.
Комментарии: 5
- SpeedX
- Сообщения: 10
- Зарегистрирован: 21 июн 2014, 12:22
- Пол: Муж
Да, да.BOJIK писал(а):Наверное, имеются в виду раскрывающиеся менюшки :)
Ааа...
Принцип такой. Создаёте ббкод, но не ставите галочку в "Показывать на странице ответа".
Далее на примере ббкода
Использование BBCode:
Замена HTML:
Далее открываете шаблон
и перед найденным ставите:
Далее в конец шаблона ставите:
Открываете тему вашего стиля, в самый конец добавляете:
При создании ещё таких же ббкодов. Структура будет такой же, за исключением id:
давайте следующему тегу новое имя, например
через запятую:
Принцип такой. Создаёте ббкод, но не ставите галочку в "Показывать на странице ответа".
Далее на примере ббкода
[fоnt]
.Использование BBCode:
Код: Выделить всё
[font={SIMPLETEXT}]{TEXT}[/font]
Код: Выделить всё
<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;
}
Код: Выделить всё
<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') );
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!
- SpeedX
- Сообщения: 10
- Зарегистрирован: 21 июн 2014, 12:22
- Пол: Муж
Благодарю
Похожие темы
-
Здравствуйте.
Нужен простой ббкод для вставки youtube. Искал на просторах все не рабочие может у кого есть в наличии поделитесь пожалуйста.
Версия... -
CabinetAdmin , приветствую!
Использование BBCode
{TEXT}
Замена HTML
Spoiler :
{TEXT}
Подсказка
Spoiler с паролем: СООБЩЕНИЕ... -
{TEXT2}
{TEXT2} | + {TEXT1}
Стандартный BBcode скрытого текста. Хочу использовать его в качестве примечаний в тексте поста. То есть, во-первых...