iOSライクに各見出しを上部で固定して見やすくするjQueryプラグイン「jQuery List Plugin」

iOSライクに各見出しを上部で固定して見やすくするjQueryプラグイン「jQuery List Plugin」サンプル リストを表示していくと長くなって見難くなることがあります。
そこでjQuery List Pluginを利用するとiOSみたいに上部で各見出しを固定してくれるので、自分がいまどの項目を見ているのか見やすくなります。

使用方法 jQuery List Pluginからファイルをダウンロード。
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="jquery.list.js"></script>
<script type="text/javascript">
$(function () {
$('#id名').list();
});
</script>

次にリストと見出しを下記のようにdl,dt,ddで記述します。
<dl id="id名">
<dt>A</dt>
<dd>Afghanistan</dd>
<dt>B</dt>
<dd>Bahamas, The</dd>
<!-- 以下項目分 -->
</dl>

最後にCSSで見た目を整えて上げれば完成です。
<style type="text/css">
dl{
border: 1px solid #2683BD;
max-height: 350px;
overflow: auto;
position: relative;
}
dl dt{
margin: 0;
background: #2683BD;
font-weight: bold;
color: white;
padding: 8px 5px;
border-bottom: 1px solid #1D6FA2;
}
dl dd{
padding: 5px;
margin: 0;
border-bottom: 1px solid #F2F6FB;
color: #2A5673;
}
</style>

iOSライクに各見出しを上部で固定して見やすくするjQueryプラグイン「jQuery List Plugin」サンプル

sponsors

「iOSライクに各見出しを上部で固定して見やすくするjQueryプラグイン「jQuery List Plugin」」をシェアする

記事作成:
記事URL:

TOP > > > iOSライクに各見出しを上部で固定して見やすくするjQueryプラグイン「jQuery List Plugin」