業務用PCなどでウェブサービスの利用に制限がある時、あるいは自分用のリンクメモだからネットにあげたくないような時、ローカルでリンク集を作ることがよくありました。
JSの配列で記述しているので編集がとても楽になるように作っています。
デザインは簡素なので、使う時はアレンジしてください。
機能は名前とリンクとメモエリアが３つ、カテゴリー分けができるようになっています。
イメージ
以下のソースをローカルにHTMLファイルで置くだけでサンプルが実行できます。
UIサンプルギャラリー「キプレ」
MENU
用途
新着
履歴
分類
★
jQuery ローカルでリンク集
ただのリンク集のHTMLですが、JSの配列を読み込むように作られたシンプルに整形したサンプルです。
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>
同じカテゴリーのサンプル
人気のサンプル
Top