2015-04-14 2 views
2

Как добавить «показать дополнительные ссылки» после показа 10-15 ссылок вместо того, чтобы показывать 100-200 ссылок? Сначала я хочу показать только 10-15 ссылок, а затем, когда кто-то нажимает, отображает остальные скрытые ссылки для сохранения пространства страниц.Smarty - Как я могу добавить ссылку «показать больше ссылок»

{if $listing_styles.links} 
    <div id="link_list" {if $listing_styles.embeds}style="display:none"{/if}> 
    {foreach from=$thisepisode.embeds key=id item=val name=titles} 

     <div class="span-16 inner-16 notopmargin embed-selector" style="background: #F1F2F1 url('{$embed_languages[$val.lang].flag}') 15px 17px no-repeat;" onclick="changeEmbed({$val.id},{$global_settings.countdown});"> 

     <h5 class="left"> 
      {$embed_languages[$val.lang].language} 
      {if $val.type} - 
      <a class="link" href="javascript:void(0);" {if $smarty.foreach.titles.first}class="current"{/if} id="selector{$val.id}"><span>{$val.type}</span></a> 
      {/if} 
     </h5> 

     <ul id="filter" style="width:200px;float:right;margin-top: 0px;"> 
      {if $val.link} 
      {if $global_settings.adfly.id} 
       <li class="current" style="float:right"> 
       <a href="http://**f.ly/{$global_settings.**fly.id}/{$val.link|replace:"http://":""}" target="_blank">{$lang.open_video}</a> 
       </li> 
      {else} 
       <li class="current" style="float:right"> 
       <a href="{$val.link}" target="_blank">{$lang.open_video}</a> 
       </li> 
      {/if} 
      {/if} 
     </ul> 
     </div> 

    {/foreach} 
    </div> 
{/if} 

ответ

1

Проверьте этот плагин. Прекрасно работает для того, что вы хотите сделать:

http://jedfoster.com/Readmore.js/

Основы вашего HTML, вот скрипка, показывая это работает с ЧИТАТЬ плагин. Я только что скопировал полный код readmore в скрипту, но вы, вероятно, захотите добавить его в качестве ссылочного js-файла (код из строки 8 в javascript - это код плагина).

http://jsfiddle.net/6px7qso0/1/

В принципе, скачать и добавить ссылку на файл readmore.js на странице (получить файл из GitHub по ссылке я разместил в комментариях). Затем добавьте следующий код на свою страницу.

{literal} 
<script type="text/javascript"> 
    jQuery(function(){ 
     jQuery('#link_list').readmore({ 
      speed: 75, 
      collapsedHeight: 400, 
      lessLink: '<a href="#">Read less</a>' 
     }); 
    }); 
</script>  
{/literal} 

Посмотрите варианты плагинов для большего контроля над плагином.

+0

У меня нет беседки. – 1337

+0

Загрузите исходные файлы из GitHub 0 https://github.com/jedfoster/Readmore.js – garethb

+0

попробовал не работать, я хочу его для smarty engine engine, приведенный выше код очень умный. – 1337

Смежные вопросы