HTML, CSS, jQuery: 아름다운 즐겨찾기 인터페이스 구축-JS 튜토리얼-php.cn

HTML, CSS, jQuery: 아름다운 즐겨찾기 인터페이스 구축

王林

풀어 주다： 2023-10-27 13:02:09

원래의

854명이 탐색했습니다.

HTML, CSS, jQuery: 아름다운 즐겨찾기 인터페이스 구축

HTML, CSS 및 jQuery: 아름다운 즐겨찾기 인터페이스 구축

현대 웹 브라우징 시대에 즐겨찾기는 사용자가 즐겨찾는 웹 페이지를 저장하고 구성하는 데 중요한 도구가 되었습니다. 아름답고 사용하기 쉬운 즐겨찾기 인터페이스는 사용자 경험을 향상시키는 데 매우 중요합니다. 이 기사에서는 HTML, CSS 및 jQuery를 사용하여 아름다운 즐겨찾기 인터페이스를 구축하는 방법을 소개하고 특정 코드 예제를 제공합니다.

먼저 즐겨찾기 인터페이스를 구축하려면 기본 HTML 파일을 만들어야 합니다. 다음은 간단한 HTML 구조입니다.

<!DOCTYPE html>
<html>
<head>
   <title>我的收藏夹</title>
   <link rel="stylesheet" type="text/css" href="styles.css">
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <script src="script.js"></script>
</head>
<body>
   <h1>我的收藏夹</h1>
   <div id="bookmarks"></div>
   <button id="addBookmark">添加收藏</button>
</body>
</html>

로그인 후 복사

위의 HTML 구조에는 외부 CSS 파일(styles.css)과 외부 JavaScript 파일(script.js)이 도입되었습니다. 이러한 파일은 즐겨찾기 인터페이스를 아름답게 하고 대화형으로 만드는 데 도움이 됩니다. .

다음으로 즐겨찾는 인터페이스를 아름답게 만들기 위해 CSS 스타일을 정의해 보겠습니다. 다음은 styles.css 파일의 샘플 코드입니다.

body {
   font-family: Arial, sans-serif;
   background-color: #f5f5f5;
}

h1 {
   text-align: center;
   color: #333;
}

#bookmarks {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   grid-gap: 20px;
   margin: 20px;
}

.bookmark {
   background-color: #fff;
   padding: 10px;
   border-radius: 5px;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.bookmark .title {
   font-weight: bold;
   margin-bottom: 5px;
}

.bookmark .url {
   color: #666;
}

로그인 후 복사

위 CSS 코드에서는 즐겨찾기 인터페이스를 아름답게 하기 위해 몇 가지 기본 스타일을 정의합니다. 우리는 폭포 스타일의 즐겨찾기 레이아웃을 만들기 위해 그리드 레이아웃을 사용했습니다. 각 컬렉션에는 흰색 배경, 둥근 테두리 및 그림자 효과가 있습니다.

이제 초기 즐겨찾기 데이터가 필요합니다. 다음은 백엔드에서 얻은 즐겨찾기 데이터를 시뮬레이션하는 JavaScript 개체의 간단한 배열입니다.

var bookmarksData = [
   {
       title: "Google",
       url: "https://www.google.com"
   },
   {
       title: "GitHub",
       url: "https://www.github.com"
   },
   {
       title: "Medium",
       url: "https://www.medium.com"
   }
];

로그인 후 복사

다음으로 초기 데이터를 기반으로 즐겨찾기 인터페이스를 동적으로 생성하고 새 즐겨찾기를 추가하는 기능을 구현하는 JavaScript 코드를 작성해야 합니다. . 다음은 script.js 파일의 샘플 코드입니다.

$(document).ready(function() {
   // 生成初始的收藏夹界面
   generateBookmarks(bookmarksData);
   
   // 添加收藏夹
   $("#addBookmark").click(function() {
       var title = prompt("请输入收藏夹标题:");
       var url = prompt("请输入收藏夹链接:");
       var bookmark = {
           title: title,
           url: url
       };
       bookmarksData.push(bookmark);
       generateBookmarks([bookmark]);
   });
});

function generateBookmarks(bookmarks) {
   var bookmarksContainer = $("#bookmarks");
   bookmarks.forEach(function(bookmark) {
       var bookmarkHtml = '<div class="bookmark"><div class="title">' + bookmark.title + '</div><a class="url" href="' + bookmark.url + '">' + bookmark.url + '</a></div>';
       bookmarksContainer.append(bookmarkHtml);
   });
}

로그인 후 복사

위 JavaScript 코드에서는 페이지가 로드된 후 해당 코드가 실행되도록 jQuery의 Ready 함수를 사용했습니다. 즐겨찾기 데이터를 기반으로 즐겨찾기 인터페이스를 생성하기 위해 generateBookmarks 함수를 정의합니다. 또한 jQuery의 클릭 기능을 사용하여 새로운 즐겨찾기를 추가하는 기능도 구현했습니다.

이제 HTML 파일을 열면 아름다운 즐겨찾기 인터페이스가 표시되며 "즐겨찾기 추가" 버튼을 클릭하여 새 즐겨찾기를 추가할 수 있습니다.

요약하자면, 이 기사에서는 HTML, CSS 및 jQuery를 사용하여 아름다운 즐겨찾기 인터페이스를 구축하는 방법을 소개합니다. 인터페이스를 아름답게 하기 위해 그리드 레이아웃과 일부 CSS 스타일을 사용하고, 즐겨찾기 인터페이스를 동적으로 생성하고 새로운 즐겨찾기를 추가하기 위해 jQuery를 사용합니다. 이 기사가 여러분이 즐겨찾는 인터페이스를 구축하는 데 도움이 되기를 바랍니다.

위 내용은 HTML, CSS, jQuery: 아름다운 즐겨찾기 인터페이스 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!