|
|
|
|
@ -1,13 +1,58 @@ |
|
|
|
|
<!DOCTYPE html> |
|
|
|
|
<html xmlns:th="http://www.thymeleaf.org" lang="en"> |
|
|
|
|
<head th:replace="admin/common::header(~{::title},~{},~{})"> |
|
|
|
|
<head th:replace="admin/common::header(~{::title},~{},~{::style})"> |
|
|
|
|
<title>新增文章</title> |
|
|
|
|
<style> |
|
|
|
|
#selected-tags { |
|
|
|
|
border: 1px solid #cccccc; |
|
|
|
|
padding: 0; |
|
|
|
|
border-radius: 2px; |
|
|
|
|
list-style: none; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
#selected-tags li { |
|
|
|
|
background-color: #ffffff; |
|
|
|
|
padding: 6px 10px; |
|
|
|
|
margin-bottom: 2px; |
|
|
|
|
position: relative; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
#selected-tags li a { |
|
|
|
|
position: absolute; |
|
|
|
|
right: 10px; |
|
|
|
|
text-decoration: none; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
#unselected-tags { |
|
|
|
|
list-style: none; |
|
|
|
|
padding: 0; |
|
|
|
|
background-color: #fff; |
|
|
|
|
border: 1px solid #cccccc; |
|
|
|
|
position: absolute; |
|
|
|
|
width: 100%; |
|
|
|
|
z-index: 9; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
#unselected-tags li { |
|
|
|
|
border-bottom: 1px solid #cccccc; |
|
|
|
|
padding: 10px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
#unselected-tags li:hover { |
|
|
|
|
background-color: #5bc0de; |
|
|
|
|
cursor: pointer; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
#unselected-tags li:last-child { |
|
|
|
|
border-bottom: none; |
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|
</head> |
|
|
|
|
<body> |
|
|
|
|
<th:block th:include="admin/common::nav('article')"></th:block> |
|
|
|
|
<div class="container lw-main"> |
|
|
|
|
<div class="row"> |
|
|
|
|
<form class="form-horizontal"> |
|
|
|
|
<form id="form-data" class="form-horizontal"> |
|
|
|
|
<div class="col-md-9"> |
|
|
|
|
<h3 style="padding-left: 10px">创建新的文章</h3> |
|
|
|
|
<hr/> |
|
|
|
|
@ -55,9 +100,13 @@ |
|
|
|
|
<!-- </div>--> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="form-group" style="margin: 10px 0 0;"> |
|
|
|
|
<div class="form-group" style="margin: 10px 0 0;position:relative;"> |
|
|
|
|
<label>标签</label> |
|
|
|
|
<input type="text" class="form-control"> |
|
|
|
|
<ul id="selected-tags"> |
|
|
|
|
</ul> |
|
|
|
|
<input type="text" id="tag-input" class="form-control"> |
|
|
|
|
<ul id="unselected-tags"> |
|
|
|
|
</ul> |
|
|
|
|
</div> |
|
|
|
|
<div class="form-group" style="margin: 10px 0 0;"> |
|
|
|
|
<label>其它设置</label> |
|
|
|
|
@ -92,5 +141,95 @@ |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<th:block th:include="admin/common::footer"></th:block> |
|
|
|
|
<script> |
|
|
|
|
$(function () { |
|
|
|
|
// 被选中的标签 |
|
|
|
|
let selectTags = {}; |
|
|
|
|
// 未选中的标签 |
|
|
|
|
let unSelectTags = {}; |
|
|
|
|
|
|
|
|
|
// 实现搜索功能 |
|
|
|
|
unSelectTags.search = function (keyword) { |
|
|
|
|
let result = []; |
|
|
|
|
Object.keys(unSelectTags).forEach(x => { |
|
|
|
|
if (x.indexOf(keyword) > -1 && typeof unSelectTags[x] !== 'function') { |
|
|
|
|
result.push(unSelectTags[x]); |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
return result; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// 返回所有标签 |
|
|
|
|
$.ajax({ |
|
|
|
|
url: '/admin/tag/', |
|
|
|
|
method: 'GET', |
|
|
|
|
dataType: 'json', |
|
|
|
|
success(res) { |
|
|
|
|
res.data.forEach(x => unSelectTags[x.name] = x); |
|
|
|
|
console.log(unSelectTags); |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
// 监听键盘的输入事件,在输入时搜索未选中的标签列表,将匹配到的标签显示在ul里 |
|
|
|
|
$('#tag-input').on('input', function () { |
|
|
|
|
let ust = $('#unselected-tags'); |
|
|
|
|
ust.html(''); |
|
|
|
|
// 进入input是否有输入,有则使用搜索方法 |
|
|
|
|
unSelectTags.search($(this).val()).forEach(x => ust.append(`<li>${x.name}</li>`)); |
|
|
|
|
}).on('keydown', function (e) { |
|
|
|
|
if (e.keyCode === 13) { |
|
|
|
|
let key = $(this).val() |
|
|
|
|
if (key) { |
|
|
|
|
if (!selectTags[key]) { // 不可以重复输入同一个标签 |
|
|
|
|
if (unSelectTags[key]) { |
|
|
|
|
selectTags[key] = unSelectTags[key] |
|
|
|
|
delete unSelectTags[key] |
|
|
|
|
} else { // 如果该标签从未出现过 |
|
|
|
|
selectTags[key] = {name: key} |
|
|
|
|
} |
|
|
|
|
console.log(key); |
|
|
|
|
$('#selected-tags').append(`<li data-value="${key}">${key} <a href="javascript:void(0)">x</a></li>`) |
|
|
|
|
} |
|
|
|
|
$(this).val("") |
|
|
|
|
$('#unselected-tags').html('') |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
$('body').on('click', function () { |
|
|
|
|
// 给body一个点击事件,点击body时清空搜索列表的内容 |
|
|
|
|
$('#unselected-tags').html('') |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
// 从未选中的标签中选择标签 |
|
|
|
|
$("#unselected-tags").on('click',"li", function () { |
|
|
|
|
let key = $(this).text(); |
|
|
|
|
selectTags[key] = unSelectTags[key]; |
|
|
|
|
delete unSelectTags[key]; |
|
|
|
|
$("#selected-tags").append(`<li data-value="${key}">${key} <a href="javascript:void(0)">x</a></li>`) |
|
|
|
|
$('#tag-input').val(''); // 添加一个标签就将输入框清空 |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
// 删除已选择的标签 |
|
|
|
|
$("#selected-tags").on('click',"a", function () { |
|
|
|
|
let tagLi = $(this).parent(); |
|
|
|
|
let key = tagLi.data('value'); |
|
|
|
|
unSelectTags[key] = selectTags[key]; |
|
|
|
|
delete selectTags[key]; |
|
|
|
|
tagLi.remove(); |
|
|
|
|
}) |
|
|
|
|
// 给表单一个监听回车的事件,我们按下回车后直接返回false,阻止表单提交 |
|
|
|
|
$("#form-data").on('keydown', function (e) { |
|
|
|
|
if (e.keyCode === 13) { |
|
|
|
|
return false; |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
</body> |
|
|
|
|
</html> |
