もはや無視できないタブレット端末や、スマホ端末において、小さな領域でいかに見せるのかと頭を悩ませるところです。
今回は、海外でも人気の「ブートストラップニュースボックス」を手軽に導入することが出来る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
それでは、また。