JavaScript를 사용하여 목록 및 그리드 보기를 만드는 방법
3289 단어 cssbeginnersjavascripthtml
여기서는 jquery를 사용하여 예제 목록 및 그리드 보기를 제공합니다. 따라서 아래 코드를 복사하여 javascript에서 목록 및 그리드 보기 예제의 출력을 가져옵니다.
이 예제에서는 하나의 파일을 만들고 HTML 코드 CSS 코드와 javascript를 추가했습니다.
Create HTML file
파일에 HTML 파일과 아래 코드를 만듭니다.
<div id="container">
<center><h1>
How To Create List And Grid View Using JavaScript - Techsolutionstuff
</h1><br>
<div class="buttons">
<button class="grid">Grid View</button>
<button class="list">List View</button>
</div></center>
<ul class="list">
<li style="background:lightgray">Item 1</li>
<li>Item 2</li>
<li style="background:lightgray">Item 3</li>
<li >Item 4</li>
<li style="background:lightgray">Item 5</li>
<li>Item 6</li>
</ul>
</div>
읽기 : 탄소의 StartOf 및 EndOf 함수 예
Add CSS
이제 목록 보기 및 그리드 보기에 대한 CSS를 추가하십시오.
h1 {font-size:22px; margin-top:20px;}
.grid, .list {padding:15px;}
#container ul { list-style: none; }
#container .buttons { margin-bottom: 20px; }
#container .list li { width: 100%; border-bottom: 1px; margin-top:5px; margin-bottom: 5px; padding: 5px; }
#container .grid li { float: left; width: 20%; height: 50px; border: 1px solid #CCC; padding: 20px; }
Add JavaScript
이 단계에서는 변경 목록 및 그리드 보기를 위한 자바스크립트를 추가합니다.
$('button').on('click',function(e) {
if ($(this).hasClass('grid')) {
$('#container ul').removeClass('list').addClass('grid');
}
else if($(this).hasClass('list')) {
$('#container ul').removeClass('grid').addClass('list');
}
});
그리고 마지막으로 아래 이미지와 같은 출력을 얻을 것입니다.
다음을 좋아할 수도 있습니다.
Reference
이 문제에 관하여(JavaScript를 사용하여 목록 및 그리드 보기를 만드는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/techsolutionstuff/how-to-create-list-and-grid-view-using-javascript-3h2c텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)