网址收藏夹：便捷管理您的网页链接 - 在线收藏工具
<!DOCTYPE html>
<html>
<head>
<title>网址收藏夹</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<h1>网址收藏夹</h1>
<div class="toolbar">
<button id="add-btn">添加</button>
<button id="delete-btn">删除</button>
<button id="lock-btn">锁定</button>
<button id="unlock-btn">解锁</button>
<input type="text" id="search-input" placeholder="搜索">
</div>
<table id="url-table">
<thead>
<tr>
<th></th>
<th><a href="#" id="name-sort">名称</a></th>
<th>网址</th>
<th>状态</th>
</tr>
</thead>
<tbody>
<?php
// 读取已保存的网址
$url_file = 'urls.txt';
if (file_exists($url_file)) {
$urls = file($url_file, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
} else {
$urls = array();
}
<pre><code> // 输出网址表格
foreach ($urls as $index => $url) {
$locked = strpos($url, 'locked:') === 0;
$url = $locked ? substr($url, 7) : $url;
$name = parse_url($url, PHP_URL_HOST) ?: $url;
echo '<tr>';
echo '<td><input type="checkbox" name="url-checkbox" value="' . $index . '" ' . ($locked ? 'disabled' : '') . '></td>';
echo '<td><a href="' . $url . '" target="_blank">' . $name . '</a></td>';
echo '<td>' . $url . '</td>';
echo '<td>' . ($locked ? '锁定' : '正常') . '</td>';
echo '</tr>';
}
?>
</tbody>
</table>
<div id="add-dialog" class="dialog">
<h2>添加网址</h2>
<form>
<label>网址：</label>
<input type="text" name="url-input" required>
<button type="submit">添加</button>
<button type="button" class="close-btn">取消</button>
</form>
</div>
<div id="delete-dialog" class="dialog">
<h2>删除网址</h2>
<form>
<p>确认删除选中的网址吗？</p>
<button type="submit">删除</button>
<button type="button" class="close-btn">取消</button>
</form>
</div>
<div id="lock-dialog" class="dialog">
<h2>锁定网址</h2>
<form>
<p>确认锁定选中的网址吗？</p>
<button type="submit">锁定</button>
<button type="button" class="close-btn">取消</button>
</form>
</div>
<div id="unlock-dialog" class="dialog">
<h2>解锁网址</h2>
<form>
<p>确认解锁选中的网址吗？</p>
<button type="submit">解锁</button>
<button type="button" class="close-btn">取消</button>
</form>
</div>
</code></pre>
</body>
</html>
<script>
$(document).ready(function() {
// 监听添加按钮点击事件
$('#add-btn').click(function() {
$('#add-dialog').show();
});
// 监听删除按钮点击事件
$('#delete-btn').click(function() {
var checked = $('input[name="url-checkbox"]:checked');
if (checked.length > 0) {
$('#delete-dialog').show();
}
});
// 监听锁定按钮点击事件
$('#lock-btn').click(function() {
var checked = $('input[name="url-checkbox"]:checked');
if (checked.length > 0) {
$('#lock-dialog').show();
}
});
// 监听解锁按钮点击事件
$('#unlock-btn').click(function() {
var checked = $('input[name="url-checkbox"]:checked');
if (checked.length > 0) {
$('#unlock-dialog').show();
}
});
// 监听搜索框输入事件
$('#search-input').on('input', function() {
var keyword = $(this).val().trim();
if (keyword !== '') {
$('#url-table tbody tr').hide();
$('#url-table tbody tr:contains("' + keyword + '")').show().addClass('highlight');
$('#url-table tbody tr:not(:contains("' + keyword + '"))').removeClass('highlight');
} else {
$('#url-table tbody tr').show().removeClass('highlight');
}
});
// 监听对话框提交事件
$('.dialog form').submit(function(e) {
e.preventDefault();
var dialogId = $(this).parents('.dialog').attr('id');
var action = '';
var checked = $('input[name="url-checkbox"]:checked');
switch (dialogId) {
case 'add-dialog':
action = 'add';
break;
case 'delete-dialog':
action = 'delete';
break;
case 'lock-dialog':
action = 'lock';
break;
case 'unlock-dialog':
action = 'unlock';
break;
}
if (action === 'add') {
var newUrl = $(this).find('input[name="url-input"]').val().trim();
if (newUrl !== '') {
var newName = parseUrlName(newUrl);
$.post('action.php', {action: action, name: newName, url: newUrl}, function(data) {
if (data === 'success') {
location.reload();
} else {
alert('添加网址失败，请重试');
}
});
} else {
alert('网址不能为空');
}
} else if (action === 'delete' || action === 'lock' || action === 'unlock') {
if (checked.length > 0) {
var selected = checked.map(function() {
return $(this).val();
}).get();
$.post('action.php', {action: action, urls: selected}, function(data) {
if (data === 'success') {
location.reload();
} else {
alert('操作失败，请重试');
}
});
} else {
alert('请选择要操作的网址');
}
}
});
// 监听对话框关闭按钮点击事件
$('.dialog .close-btn').click(function() {
$(this).parents('.dialog').hide();
});
// 监听名称排序链接点击事件
$('#name-sort').click(function(e) {
e.preventDefault();
var rows = $('#url-table tbody tr').detach().toArray();
rows.sort(function(a, b) {
var nameA = $(a).find('td:nth-child(2) a').text().toLowerCase();
var nameB = $(b).find('td:nth-child(2) a').text().toLowerCase();
return nameA.localeCompare(nameB);
});
$('#url-table tbody').append(rows);
});
// 监听网址输入框失去焦点事件
$('#add-dialog input[name="url-input"]').blur(function() {
var url = $(this).val().trim();
if (url !== '') {
var name = parseUrlName(url);
$(this).val(url);
$(this).parents('form').find('label').text('名称：');
$(this).attr('name', 'name-input');
$(this).after('<input type="hidden" name="url-input" value="' + url + '">');
$(this).val(name);
// 显示名称输入框
$(this).after('<input type="text" name="name-input" required>');
$(this).parents('form').find('label').text('名称：');
$(this).remove();
}
});
});
// 解析网址名称
function parseUrlName(url) {
var name = parseUrlHost(url) || url;
name = name.replace(/^www./, '');
return name;
}
// 解析网址主机名
function parseUrlHost(url) {
var a = document.createElement('a');
a.href = url;
return a.hostname;
}
/* style.css */
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
h1 {
margin: 0;
padding: 20px;
background-color: #3385ff;
color: #fff;
}
.toolbar {
margin: 20px;
}
button {
margin-right: 10px;
padding: 5px 10px;
border: none;
border-radius: 3px;
background-color: #3385ff;
color: #fff;
cursor: pointer;
}
input[type="text"] {
padding: 5px;
border: 1px solid #ccc;
border-radius: 3px;
}
#search-input {
width: 200px;
}
table {
margin: 20px;
border-collapse: collapse;
width: calc(100% - 40px);
}
th {
background-color: #3385ff;
color: #fff;
height: 40px;
text-align: left;
}
th a {
color: #fff;
text-decoration: none;
}
th a:hover {
text-decoration: underline;
}
td {
padding: 10px;
border-bottom: 1px solid #ccc;
}
td a {
color: #3385ff;
}
td a:hover {
text-decoration: underline;
}
.highlight {
background-color: #ffedcc;
}
.dialog {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 20px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
}
.dialog h2 {
margin: 0 0 20px;
}
.dialog label {
display: block;
margin-bottom: 10px;
}
.dialog input[type="text"] {
width: 100%;
}
.dialog button {
margin-top: 20px;
padding: 5px 10px;
border: none;
border-radius: 3px;
background-color: #3385ff;
color: #fff;
cursor: pointer;
}
.dialog .close-btn {
margin-left: 10px;
background-color: #ccc;
color: #fff;
}
.dialog .close-btn:hover {
background-color: #999;
}
原文地址: https://www.cveoy.top/t/topic/mPxi 著作权归作者所有。请勿转载和采集!