スマホやタブレットにも便利なブートストラップニュースボックス実装手順

もはや無視できないタブレット端末や、スマホ端末において、小さな領域でいかに見せるのかと頭を悩ませるところです。

今回は、海外でも人気の「ブートストラップニュースボックス」を手軽に導入することが出来るjQueryプラグインのご紹介です。

ブートストラップニュースボックスって何？

決められたスペースでニュースフィード等を次々と表示する専用スペースです。

決められたスペースにおいて、動的にニュースを流すことが手軽に出来ます。タイル型のサイトや、ブロック型など、様々なサイトに使えそうですね。

実際にどんな動きなのかは、こちらのデモで確認出来ます。

jQuery Bootstrap News Box Plugin Demos

導入はCSSとJavaScriptの読み込みから

2つのCSSと、query.bootstrap.newsbox.min.js は、ダウンロードしたファイルを指定します。このままのコードだと、他のサーバーのCSSを読み込むことになってしまうのでやめましょう。jquery.min.jsは、Googleからロードして問題ありません。

<!-- CSS -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap-theme.min.css">
<!-- JavaScript -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="scripts/jquery.bootstrap.newsbox.min.js" type="text/javascript"></script>

HTMLはこんな感じ

<div>
<div> <span></span><b>News</b></div>
<div>
<div>
<div>
<ul>

<li>
<table cellpadding="4">
<tr>
<td><img src="images/1.png" width="60" /></td>
<td> News 1<a href="#">Read more...</a></td>
</tr>
</table>
</li>

<li>
<table cellpadding="4">
<tr>
<td><img src="images/2.png" width="60" /></td>
<td> News 2<a href="#">Read more...</a></td>
</tr>
</table>
</li>

<li>
<table cellpadding="4">
<tr>
<td><img src="images/3.png" width="60" /></td>
<td> News 3<a href="#">Read more...</a></td>
</tr>
</table>
</li>

...

</ul>
</div>
</div>
</div>
<div> </div>
</div>

JavaScriptに設定項目はありますが、ひとまずダウンロードしてみるとわかりやすいかと思います。
ダウンロードはこちらのページのダウンロードボタンから出来ます。
Collection of Top jQuery Plugins for 2015 | jQueryHouse

それでは、また。