В я рассматривал блок со скроллингом, основанным на наведении курсора мыши на текст и содержимое блока начинало прокручиваться. Теперь же я хочу представить более простую, но не менее элегантную версию решения проблемы отображения всех смайлов на странице ответа (Блок со смайлам - это пример, можно сделать блок со скроллингом с любым содержимым). Пример реализации можете поглядеть у нас на форуме, в форме ответа - блок смайлов.
Скачиваем архив и распаковываем папку
Код: Выделить всё
<link type="text/css" rel="stylesheet" href="js/jscrollpane.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="js/jscrollpane.js"></script>
<script type="text/javascript">
jQuery(function()
{
jQuery('#pane').jScrollPane({scrollbarWidth:18, showArrows:true});
});
</script>
Код: Выделить всё
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
Код: Выделить всё
<!-- IF S_SMILIES_ALLOWED and .smiley -->
<strong>{L_SMILIES}</strong><br />
<!-- BEGIN smiley -->
<a href="#" onclick="insert_text('{smiley.A_SMILEY_CODE}', true); return false;"><img src="{smiley.SMILEY_IMG}" width="{smiley.SMILEY_WIDTH}" height="{smiley.SMILEY_HEIGHT}" alt="{smiley.SMILEY_CODE}" title="{smiley.SMILEY_DESC}" /></a>
<!-- END smiley -->
<!-- ENDIF -->
<!-- IF S_SHOW_SMILEY_LINK and S_SMILIES_ALLOWED-->
<br /><a href="{U_MORE_SMILIES}" onclick="popup(this.href, 300, 350, '_phpbbsmilies'); return false;">{L_MORE_SMILIES}</a>
<!-- ENDIF -->
Код: Выделить всё
<div class="scrollBox">
<div id="pane" class="scroll-pane">
<!-- IF S_SMILIES_ALLOWED and .smiley -->
<strong>{L_SMILIES}</strong><br />
<!-- BEGIN smiley -->
<a href="#" onclick="insert_text('{smiley.A_SMILEY_CODE}', true); return false;"><img src="{smiley.SMILEY_IMG}" width="{smiley.SMILEY_WIDTH}" height="{smiley.SMILEY_HEIGHT}" alt="{smiley.SMILEY_CODE}" title="{smiley.SMILEY_DESC}" /></a>
<!-- END smiley -->
<!-- ENDIF -->
<!-- IF S_SHOW_SMILEY_LINK and S_SMILIES_ALLOWED-->
<br /><a href="{U_MORE_SMILIES}" onclick="popup(this.href, 300, 350, '_phpbbsmilies'); return false;">{L_MORE_SMILIES}</a>
<!-- ENDIF --> </div></div>
Код: Выделить всё
<table width="100%" cellspacing="5" cellpadding="0" border="0" align="center">
<tr>
<td class="gensmall" align="center"><b>{L_SMILIES}</b></td>
</tr>
<tr>
<td align="center">
<!-- BEGIN smiley -->
<a href="#" onclick="insert_text('{smiley.A_SMILEY_CODE}', true); return false;" style="line-height: 20px;"><img src="{smiley.SMILEY_IMG}" width="{smiley.SMILEY_WIDTH}" height="{smiley.SMILEY_HEIGHT}" alt="{smiley.SMILEY_CODE}" title="{smiley.SMILEY_DESC}" hspace="2" vspace="2" /></a>
<!-- END smiley -->
</td>
</tr>
<!-- IF S_SHOW_SMILEY_LINK -->
<tr>
<td align="center"><a class="nav" href="{U_MORE_SMILIES}" onclick="popup(this.href, 300, 350, '_phpbbsmilies'); return false;">{L_MORE_SMILIES}</a></td>
</tr>
<!-- ENDIF -->
</table>
Код: Выделить всё
<div class="scrollBox">
<div id="pane" class="scroll-pane">
<table width="100%" cellspacing="5" cellpadding="0" border="0" align="center">
<tr>
<td class="gensmall" align="center"><b>{L_SMILIES}</b></td>
</tr>
<tr>
<td align="center">
<!-- BEGIN smiley -->
<a href="#" onclick="insert_text('{smiley.A_SMILEY_CODE}', true); return false;" style="line-height: 20px;"><img src="{smiley.SMILEY_IMG}" width="{smiley.SMILEY_WIDTH}" height="{smiley.SMILEY_HEIGHT}" alt="{smiley.SMILEY_CODE}" title="{smiley.SMILEY_DESC}" hspace="2" vspace="2" /></a>
<!-- END smiley -->
</td>
</tr>
<!-- IF S_SHOW_SMILEY_LINK -->
<tr>
<td align="center"><a class="nav" href="{U_MORE_SMILIES}" onclick="popup(this.href, 300, 350, '_phpbbsmilies'); return false;">{L_MORE_SMILIES}</a></td>
</tr>
<!-- ENDIF -->
</table></div></div>
Код: Выделить всё
.scroll-pane {
width: 250px; /* Ширина видимой области*/
height: 400px; /* Высота видимой области*/
overflow: auto; /* Если отключены скрипты это правило позволит отобразить обычный скролл */ }