console
$(function() {
const DataKey = 'cache_data';
var storage = (data) => {
try{
if (data == undefined) return window.localStorage.getItem(DataKey);
else window.localStorage.setItem(DataKey, data);
}catch(e){
}
return '';
};
var cacheData = storage();
if (cacheData) {
cacheData = JSON.parse(cacheData);
}else{
cacheData = [];
}
$('#doc-prompt-toggle').on('click', function() {
$('#my-prompt').modal({
relatedTarget: this,
onConfirm: function(e) {
let index = cacheData.length + 1;
let data = {};
let s = e.data.search(/\s+/);
data.title = s > 0 ? e.data.substring(0, s) : e.data;
data.text = s > 0 ? e.data.substring(s, e.data.length) : '';
data.title = data.title.trim();
data.text = data.text.trim();
top.window.console.log(data);
cacheData.unshift(data);
renderList(0);
},
onCancel: function(e) {
}
});
});
var renderList = (index) => {
if (index == undefined) index = 0;
let html = '';
cacheData.forEach((item, i)=>{
html += '<div class="am-panel am-panel-default">';
html += '<div class="am-panel-hd">';
html += '<h4 class="am-panel-title" data-am-collapse="{parent: \'#accordion\', target: \'#do-not-say-'+i+'\'}">...</h4>'.replace('...',item.title);
html == '</div>';
html += '<div id="do-not-say-'+i+'" class="am-panel-collapse am-collapse '+(i == index ? 'am-in' : '')+'">';
html += '<div class="am-panel-bd">...'.replace('...',item.text);
html += '<div class="am-cf">';
html += '<button type="button" class="am-btn am-btn-danger btn-loading-example am-btn-xs am-round am-fr">删除</button>';
html += '</div></div>';
html += '</div></div>';
});
$('#accordion').html(html);
storage(JSON.stringify(cacheData));
};
renderList();
$('#accordion').on('click', 'button', (that) => {
let btn = $(that.target);
let index = btn.parents('.am-panel-collapse').attr('id').match(/do-not-say-(\d+)/)[1];
cacheData.splice(index, 1);
index--;
renderList(index > 0 ? index : 0);
});
});
<header data-am-widget="header"
class="am-header am-header-default">
<div class="am-header-left am-header-nav">
<a href="#left-link" id="doc-prompt-toggle">
<i class="am-header-icon am-icon-plus"></i>
</a>
</div>
<h1 class="am-header-title">
<a href="#title-link">
Book Mark
</a>
</h1>
</header>
<nav data-am-widget="menu" class="am-menu am-menu-offcanvas1"
data-am-menu-offcanvas
>
<a href="javascript: void(0)" class="am-menu-toggle">
<i class="am-menu-toggle-icon am-icon-bars"></i>
</a>
<div class="am-offcanvas" >
<div class="am-offcanvas-bar am-offcanvas-bar-flip">
<ul class="am-menu-nav am-avg-sm-1">
<li class="am-parent">
<a href="##" >公司</a>
<ul class="am-menu-sub am-collapse am-avg-sm-2 ">
<li>
<a href="##" >公司</a>
</li>
<li>
<a href="##" >人物</a>
</li>
<li>
<a href="##" >趋势</a>
</li>
<li>
<a href="##" >投融资</a>
</li>
<li>
<a href="##" >创业公司</a>
</li>
<li>
<a href="##" >创业人物</a>
</li>
<li class="am-menu-nav-channel"><a href="##" title="公司">进入栏目 »</a></li>
</ul>
</li>
<li class="am-parent">
<a href="##" >人物</a>
<ul class="am-menu-sub am-collapse am-avg-sm-3 ">
<li>
<a href="##" >公司</a>
</li>
<li>
<a href="##" >人物</a>
</li>
<li>
<a href="##" >趋势</a>
</li>
<li>
<a href="##" >投融资</a>
</li>
<li>
<a href="##" >创业公司</a>
</li>
<li>
<a href="##" >创业人物</a>
</li>
</ul>
</li>
<li class="am-parent">
<a href="#c3" >趋势</a>
<ul class="am-menu-sub am-collapse am-avg-sm-4 ">
<li>
<a href="##" >公司</a>
</li>
<li>
<a href="##" >人物</a>
</li>
<li>
<a href="##" >趋势</a>
</li>
<li>
<a href="##" >投融资</a>
</li>
<li>
<a href="##" >创业公司</a>
</li>
<li>
<a href="##" >创业人物</a>
</li>
<li class="am-menu-nav-channel"><a href="#c3" title="趋势">泥煤 »</a></li>
</ul>
</li>
<li class="am-parent">
<a href="##" >投融资</a>
<ul class="am-menu-sub am-collapse am-avg-sm-3 ">
<li>
<a href="##" >公司</a>
</li>
<li>
<a href="##" >人物</a>
</li>
<li>
<a href="##" >趋势</a>
</li>
<li>
<a href="##" >投融资</a>
</li>
<li>
<a href="##" >创业公司</a>
</li>
<li>
<a href="##" >创业人物</a>
</li>
</ul>
</li>
<li>
<a href="##" >创业公司</a>
</li>
<li>
<a href="##" >创业人物</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="am-panel-group" id="accordion">
<div class="am-panel am-panel-default">
<div class="am-panel-hd">
<h4 class="am-panel-title" data-am-collapse="{parent: '#accordion', target: '#do-not-say-1'}">
...
</h4>
</div>
<div id="do-not-say-1" class="am-panel-collapse am-collapse am-in">
<div class="am-panel-bd">
...
</div>
</div>
</div>
<div class="am-panel am-panel-default">
<div class="am-panel-hd">
<h4 class="am-panel-title" data-am-collapse="{parent: '#accordion', target: '#do-not-say-2'}">
...
</h4>
</div>
<div id="do-not-say-2" class="am-panel-collapse am-collapse">
<div class="am-panel-bd">
...
</div>
</div>
</div>
<div class="am-panel am-panel-default">
<div class="am-panel-hd">
<h4 class="am-panel-title" data-am-collapse="{parent: '#accordion', target: '#do-not-say-3'}">...</h4>
</div>
<div id="do-not-say-3" class="am-panel-collapse am-collapse">
<div class="am-panel-bd">
...
</div>
</div>
</div>
</div>
<div class="am-modal am-modal-prompt" tabindex="-1" id="my-prompt">
<div class="am-modal-dialog">
<div class="am-modal-hd">新建书签</div>
<div class="am-modal-bd">
可以输入标题、简写
<input type="text" name="a" class="am-modal-prompt-input">
</div>
<div class="am-modal-footer">
<span class="am-modal-btn" data-am-modal-cancel>取消</span>
<span class="am-modal-btn" data-am-modal-confirm>新建</span>
</div>
</div>
</div>