You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
61 lines
2.3 KiB
JavaScript
61 lines
2.3 KiB
JavaScript
(function () {
|
|
$(function () {
|
|
$.getJSON('data.json', function (data) {
|
|
var listPanel = $('#list-panel');
|
|
$.each(data, function (index, item) {
|
|
var listItem = `
|
|
<div class="list-item">
|
|
<img class="list-item-image" src="${item.mainData.image}" alt="${item.name}">
|
|
<div class="list-item-content">
|
|
<span class="list-item-name">${item.name}</span>
|
|
<div class="list-item-actions">
|
|
<button class="action-btn">...</button>
|
|
<div class="action-menu">
|
|
<button class="copy-btn">复制</button>
|
|
<button class="delete-btn">删除</button>
|
|
<button class="edit-btn">编辑</button>
|
|
<button class="apply-btn">应用</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="list-item-date">
|
|
<span>更新时间：${item.updateTime}</span>
|
|
</div>
|
|
</div>
|
|
`;
|
|
listPanel.append(listItem);
|
|
});
|
|
|
|
// Action button click handler
|
|
listPanel.on('click', '.action-btn', function (e) {
|
|
e.stopPropagation();
|
|
var menu = $(this).siblings('.action-menu');
|
|
$('.action-menu').not(menu).hide();
|
|
menu.toggle();
|
|
});
|
|
|
|
// Hide menu when clicking outside
|
|
$(document).on('click', function () {
|
|
$('.action-menu').hide();
|
|
});
|
|
|
|
// Event handlers for action menu buttons
|
|
listPanel.on('click', '.copy-btn', function () {
|
|
console.log('复制');
|
|
});
|
|
|
|
listPanel.on('click', '.delete-btn', function () {
|
|
console.log('删除');
|
|
});
|
|
|
|
listPanel.on('click', '.edit-btn', function () {
|
|
console.log('编辑');
|
|
});
|
|
|
|
listPanel.on('click', '.apply-btn', function () {
|
|
console.log('应用');
|
|
});
|
|
});
|
|
});
|
|
})();
|