用途
新着
履歴
分類

jQuery ローカルでリンク集

jQuery ローカルでリンク集
ただのリンク集のHTMLですが、JSの配列を読み込むように作られたシンプルに整形したサンプルです。

業務用PCなどでウェブサービスの利用に制限がある時、あるいは自分用のリンクメモだからネットにあげたくないような時、ローカルでリンク集を作ることがよくありました。

JSの配列で記述しているので編集がとても楽になるように作っています。

デザインは簡素なので、使う時はアレンジしてください。

機能は名前とリンクとメモエリアが3つ、カテゴリー分けができるようになっています。

イメージ

以下のソースをローカルにHTMLファイルで置くだけでサンプルが実行できます。

JS

<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>

$(document).ready(function() {

    const arr = [
        [
            {
                category: 'カテゴリー1',
                name: '名前', 
                link: 'URL',
                memo1:'memo1',
                memo2:'memo2',
            },

            {
                category: 'カテゴリー1',
                name: '名前', 
                link: 'URL',
                memo1:'memo1',
                memo2:'memo2',
                memo3:'memo3'
            },

            {
                category: 'カテゴリー2',
                name: '名前', 
                link: 'URL',
                memo1:'memo1',
                memo2:'memo2',
                memo3:'memo3'
            },

            {
                category: 'カテゴリー3',
                name: '名前', 
                link: 'URL',
                memo1:'memo1',
                memo2:'memo2',
                memo3:'memo3'
            },

        ]
    ];

    categorys = [];
    for (  var i = 0;  i < arr.length;  i++  ) {
        for (  var i2 = 0;  i2 < arr[i].length;  i2++  ) {
            if(arr[i][i2].category){
                categorys.push(arr[i][i2].category);
            }
        }
    }
    c_arr = uniq(categorys).sort();
    //appned navi
    for (  var i = 0;  i < c_arr.length;  i++  ) {
        $("#navi").append('<a href="#cate_box_'+c_arr[i]+'">'+c_arr[i]+'</a>');
    }

    //append result
    for (  var i = 0;  i < c_arr.length;  i++  ) {
        $("#result").append('<div class="cate" id="cate_box_'+c_arr[i]+'">'+c_arr[i]+'</div>');
    }


    for (  var i = 0;  i < arr.length;  i++  ) {
        for (  var i2 = 0;  i2 < arr[i].length;  i2++  ) {
            cate_box = "#cate_box_"+arr[i][i2].category;
            box = "#box_"+i+"_"+i2;
            $(cate_box).append('<div class="item" id="box_'+i+'_'+i2+'"></div>');
            $(box).append('<div class="link"><a href="'+arr[i][i2].link+'" target="_blank">'+arr[i][i2].name+'</a></div>');
            $(box).append('<div class="memo1" title="'+arr[i][i2].memo1+'">'+arr[i][i2].memo1+'</div>');
            $(box).append('<div class="memo2" title="'+arr[i][i2].memo2+'">'+arr[i][i2].memo2+'</div>');
            if(arr[i][i2].memo3){
                $(box).append('<div class="memo3" title="'+arr[i][i2].memo3+'">'+arr[i][i2].memo3+'</div>');
            }
        }
    }

    $(".navi_toggle").on("click",function(){
		$("#navi").slideToggle();
        $(".navi_toggle .close").toggleClass("none");
        $(".navi_toggle .open").toggleClass("none");
	});
});


function uniq(array) {
  const knownElements = {};
  const uniquedArray = [];
  for (let i = 0, maxi = array.length; i < maxi; i++) {
    if (array[i] in knownElements)
      continue;
    uniquedArray.push(array[i]);
    knownElements[array[i = true;
  }
  return uniquedArray;
};

HTML

<div id="navi"></div>
<div class="navi_toggle">
    <div class="close">close</div><div class="open none">open</div>
</div>

<div id="result">
</div>

CSS


<style>
    body{
        padding: 0;
        margin: 0;
    }
    #result{
        font-size:12px;
    }
    .cate{
        border:solid 1px #CCC;
        padding:10px;
        margin: 30px 20px 0px;
    }
    .item{
        display: flex;
        white-space: nowrap;
    }
    .item div {
        padding:0 10px 0 10px;
        margin:0 0 10px;
        height: 18px;
        line-height: 18px;
        font-size: 12px;
    }
    .item div:nth-child(1) {overflow-x: hidden;width:200px;}
    .item div:nth-child(1) a {
        display:block;width: 100%;background-color: #ccdfff;
        padding:0 10px 0 10px;
        border-radius: 5px;
        box-sizing: border-box;
    }
    .item div:nth-child(1) a:hover {
        opacity: 0.8;
    }

    .item div:nth-child(n+2) {
        overflow-x: hidden;width:300px;
        border-bottom: 1px solid #CCC;
        box-sizing: border-box;
        overflow: hidden;margin:0 10px 0 0;
    }

    #navi{
        position: fixed;
        right: 20px;
        top: 20px;
        background-color: #ddd;
        padding: 12px;
        border-radius: 5px;
        width: 20%;
    }
    #navi a{
        border-radius: 5px;
        display: block;
        float: left;
        color: #444;
        height: 18px;
        line-height: 18px;
        font-size: 12px;
        background-color: #FFF;
        padding: 3px 6px;
        margin: 0 6px 6px 0;
    }
    .navi_toggle{
        position: fixed;
        right: 20px;
        top: 10px;
        border-radius: 5px;
        height: 18px;
        line-height: 18px;
        font-size: 12px;
        width: 60px;
        text-align: center;
        background-color: #ddd;
        float: right;
        cursor: pointer;
        user-select: none;
    }
    .none{
        display: none;
    }
</style>
公開 2022-06-12 22:35:43
更新 2022-07-20 21:39:25
このページの二次元コード
jQuery ローカルでリンク集

人気のサンプル

search -  category -  about
© 2024 kipure
Top