페이지 매김 및 poptrosta의 경우 페이지 매김은 어느 정도 채워진 사이트의 중요한 요소입니다. 다양한 시스템대부분의 경우 사이트 관리에는 페이지 매김을 구현하기 위한 도구가 내장되어 있습니다. 이 유용한 기능을 위해 작성된 별도의 플러그인도 많이 있으며, 대부분의 경우 . 이러한 모든 플러그인은 실행 스타일과 기능, 그러나 가장 중요한 것은 이 모든 것이 사이트의 대량 콘텐츠 페이지 매김의 서버 측 구현에 대한 훌륭한 대안이라는 것입니다.
내 생각에 가장 쉬운 것 중 하나를 고려할 것을 제안합니다. jQuery 플러그인, 매력적이고 빠른 페이지 매김을 구성하는 데 도움이되는 페이지 매김을 만듭니다.
매우 가볍고, 모든 면에서, 무게가 가벼우며 연결, 설정, 페이지 매김을 만드는 데 필요한 모든 것, 세 가지 디자인 스타일로 완성되고 지원이 가득합니다.
그건 그렇고, 표준 스타일에 만족하지 않으면 를 사용할 수 있습니다. 나사로 조이기 어렵지 않습니다. .css플러그인.
이제 플러그인 자체와 스타일 파일을 문서에 올바르게 연결하는 방법, 즉 사이트의 페이지에 직접 삽입하고 사용 가능한 플러그인 설정을 살펴보는 방법을 자세히 살펴보겠습니다.
물론 시작하려면 플러그인, 즉 소스 코드가 있어야 합니다. 제이쿼리 자바스크립트및 CSS 스타일 파일.
플러그인을 사용하는 방법을 단계별로 살펴보겠습니다.
1단계 jQuery 포함
섹션의 페이지 본문에서
... jQuery 프레임워크, 가급적이면 버전 1.7.2 이상을 연결해야 합니다. 특별한 Google 저장소를 사용하여 이 작업을 수행할 수 있습니다.사이트에서 이미 jQuery가 활성화되어 있고 Might 및 Main에서 작동하는 경우 위에서 설명한 모든 제스처를 안전하게 건너뛸 수 있습니다. 중요한 것은 jQuery 버전이 너무 조밀하지 않은지 확인하는 것입니다. 그런데 WordPress에서는 이것이 좋습니다.
다음으로 우리는 우리의 일꾼인 플러그인을 연결합니다. jquery.simplePagination.js:
정원을 울타리로 묶을 수는 없지만 필요한 스타일(밝음, 어둡거나 컴팩트)을 선택하고 템플릿의 .css 파일에 규칙 세트를 삽입하기만 하면 됩니다. 자신의 스타일을 작성하거나 사용 부트스트랩, 또한 독창성과 사이트 구축 기술 개발 측면에서 옵션이 훨씬 더 바람직합니다.
3단계 HTML
배치하려는 사이트의 페이지에 페이지 매김 막대를 표시하려면 더 논리적이며 가장 자주 주요 내용의 맨 아래에 있으므로 다음을 작성해야 합니다.
밝은 배경의 경우:
컴팩트 테마:
$(function() ( $(#light-pagination).pagination(( 항목: 100, itemsOnPage: 10, cssStyle: "light-theme" )); ));
이 예에서는 밝은 테마 페이지 매김에 #light-pagination initialization을 사용했지만 선택기를 다른 것으로 변경할 수 있습니다. 컴팩트의 경우 #compact-pagination , 어두운 스타일의 경우 #dark-pagination 입니다. 이 경우 함수에서 클래스를 변경하는 것을 잊지 마십시오. CSS 스타일.
위에서 이미 썼듯이 플러그인은 설정이 매우 유연하며 다음 옵션을 변경할 수 있습니다.
- 아이템- 페이지를 계산하는 데 사용할 총 요소 수입니다. 기본: 1 .
- 항목의 페이지- 각 페이지에 표시되는 항목 수. 기본: 1 .
- 페이지- 선택사항. 값이 지정되면 items 및 itemsOnPage 옵션이 무시됩니다. 목록의 페이지 수를 설정합니다.
- 표시된 페이지- 탐색 중에 표시되어야 하는 페이지 번호 수. 최저한의 허용 값: 3 , 기본: 5 .
- 가장자리— 번호 매기기 시작과 끝에 표시되는 페이지 번호 수. 기본값: 2 .
- 현재 페이지- 런칭 직후 어떤 페이지가 선택될지. 논리적으로 기본값은 다음과 같습니다. 1 .
- hrefTextPrefix- HREF 속성에 사용된 문자열은 페이지 번호 앞에 추가됩니다. 기본: "#페이지".
- hrefTextSuffix- HREF 속성에 사용된 문자열은 페이지 번호 뒤에 삽입됩니다. 기본값은 빈 문자열입니다.
- 이전 텍스트— 버튼 텍스트를 이전 페이지로 이동합니다. 기본: "이전".
- 다음텍스트— 다음 페이지의 버튼 텍스트. 기본: 다음
- CSS 스타일- 결정하다 CSS 스타일. 기본: "빛 테마"
- 셀렉트온클릭- 클릭 후 페이지 선택, 기본적으로 활성화됨( 진실), 비활성화하는 이유를 이해하지 못했지만 그러한 기회가 있으며 값은 "거짓"입니다.
가장 기본적인 설정을 다루었습니다. 영형 추가 기능그리고 사용 가능한 방법개발자 페이지에서 직접 문서를 읽으면 이 플러그인을 사용하는 방법을 찾을 수 있습니다.
새로운 프로젝트 작업에 행운과 성공을 기원하는 것만 남아 있습니다.
페이지 탐색을 포함한 페이지 매김은 상당히 간단한 일이지만 초보자는 종종 그것을 만드는 데 어려움을 겪습니다. 가장 중요한 것은 작동 방식을 이해하는 것입니다...
페이지 매김의 작업 중 하나는 모든 요소를 동시에 표시하는 것은 아니지만 $pp 요소 이하의 제한된 수와 표시되는 요소 그룹은 다음에 따라 다릅니다. 입력 매개변수$pn은 이 그룹의 번호입니다. 이 번호는 실제로 페이지 번호입니다. 다음과 같은 요청이 있습니다.
SELECT * FROM `테이블` LIMIT(($pn-1)*$pp),($pp)
$pn의 값은 1만큼 감소하므로, 예를 들어 $pp 값이 10인 목록의 첫 번째 페이지의 경우 10에서 19가 아닌 0에서 9까지의 요소가 선택됩니다. 당연히, 페이지가 0부터 번호가 매겨지면 $ 값을 1만큼 감소시킵니다. pn은 요청에 필요하지 않습니다.
다음 문제, 즉 페이지 탐색을 작성하려면 먼저 목록의 총 페이지 수를 알아야 합니다. 이렇게 하려면 먼저 총 요소 수를 쿼리할 수 있습니다. 또는 쿼리에서 직접 총 요소 수를 기반으로 총 페이지 수를 계산합니다.
SELECT FLOOR((COUNT(*)+($pp-1))/($pp)) FROM `테이블`
총 페이지 수 $pc를 구하려면 여기에서 잘 알려진 공식 $pc=(count+per_page-1) div per_page를 사용하지만 정수 나누기(div) 대신 FLOOR 함수를 사용하도록 조정되었습니다. 오랫동안 MySQL에서 지원해온 DIV 연산자를 사용할 수도 있습니다.
페이지당 하나의 요소만 표시해야 하는 경우 위의 쿼리를 단순화할 수 있습니다.
총 페이지 수 $pc를 받은 후 1에서 $pc 범위의 카운터를 사용하여 제한된 수의 숫자가 있는 페이지만 반복하여 목록의 모든 페이지에 대한 링크를 즉시 표시할 수 있습니다. 현재 페이지범위. 예를 들어, 은행 탐색이라고 하는 $first 및 $last의 범위 제한 값을 가져오는 공식은 다음과 같습니다.
$first=$pn-1-($pn-2)%$범위; $last=$first+$범위<$pc?$first+$range:$pc;
$range에는 필요한 범위 너비보다 작은 값 1을 입력해야 합니다. 예를 들어 페이지에 대한 일반 링크를 7개 이하로 표시하려면 $range에 값 6을 입력해야 합니다. 그것은 다음과 같이 보일 것입니다:
$pp=10; if ($result=mysqli_query($link,"SELECT FLOOR((COUNT(*)+".($pp-1).")/".$pp.") FROM `table`")) ( list($ pc)=mysqli_fetch_row($result); mysqli_free_result($result); // 페이지 번호 0과 1에 대한 회전자를 여기에 배치 if ($pn==0||$pn>$pc) error(404); elseif ($result =mysqli_query($link,"SELECT * FROM `table` LIMIT ".(($pn-1)*$pp).",".$pp)) ( $range=6; $first=$pn-1- ($pn-2)%$범위; $last=$first+$범위<$pc?$first+$range:$pc; } else error(503); } else error(503);
탐색 모음을 표시하는 것만 남아 있습니다.
표시된 구현에서 첫 번째 일반 링크(첫 번째 페이지에 대한 링크가 아닌 경우)를 사용하면 이전 페이지 뱅크로 전환할 수 있습니다. 마지막 일반 링크를 사용하여 다음 페이지 뱅크로 전환할 수 있도록 하려면(즉, "자세히" 링크와 유사하게 작동하며 이를 대체할 수 있음) 다음에서 표현식($range-1)을 지정할 수 있습니다. $range 변수 대신 제수로 첫 번째 공식을 사용합니다.
pagelink 함수는 페이지 번호를 지정하는 링크 부분을 생성하는 역할을 합니다. 페이지 번호 회전자 0과 1을 사용할 때 이 기능은 회전자 옆에 가장 잘 배치됩니다. $pn 입력 매개변수의 0 값과 일치하도록 링크에서 /?p=1 대신 / 주소를 얻을 수 있도록 회전자의 영향을 보상해야 합니다.
함수 pagelink($p) ( return $p>1?"?p=".$p:""; ) if ($pn==0) $pn++; elseif ($pn==1) $pn--;
무료 컬렉션 HTML 및 CSS 페이지 매김코드 예: 반응형, 단순, 머티리얼 디자인, 탐색 점, 등. 2018년 6월 컬렉션 업데이트. 5개의 새로운 아이템.
관련 기사
코드 정보
HTML 및 CSS의 반응형 페이지/페이저. 흥미로운 효과를 표시하려면 브라우저의 크기를 조정하십시오.
응답: 예
종속성: bootstrap.css
코드 정보
라인 팔로우 페이지 매김
CSS 라인은 페이지 매김을 따릅니다.
응답: 예
종속성:-
코드 정보
페이지 매김 버튼
순수 CSS 페이지 매김 버튼.
호환 브라우저: 크롬, 파이어폭스, 오페라, 사파리
응답: 예
종속성:-
코드 정보
호버로 줄 바꿈
호버 효과가 있는 순수 CSS 라인 페이지 매김.
호환 브라우저: 크롬, 엣지, 파이어폭스, 오페라, 사파리
응답: 예
종속성:-
코드 정보
팩맨 페이지 매김
HTML, CSS 및 JS를 사용한 페이지 매김 애니메이션.
호환 브라우저: 크롬, 엣지, 파이어폭스, 오페라, 사파리
응답: 예
종속성:-
코드 정보
간단한 CSS.
코드 정보
순수한 CSS 팩맨 페이지 매김호버에 애니메이션과 함께.
코드 정보
간단한 반응형 페이지 매김.
코드 정보
HTML 및 CSS 페이지 매김.
코드 정보
다른 페이지 사이를 탐색할 수 있는 페이지 매김 예제입니다. 이 예제에는 페이지 매김이 필요한 실제 응용 프로그램과 함께 작동하기 위해 href 속성이 있어야 합니다.
코드 정보
CSS 사용자 정의 속성을 사용한 페이지 매김.
페이지 매김 옵션 및 디자인.
모조엠에서 만든
2017년 5월 25일
데모 GIF: SVG 페이지 호퍼
HTML, CSS 및 SVG 페이지 호퍼.
크리스 개넌이 만든
2017년 5월 14일
데모 GIF: 무한 페이지 매김
HTML 및 CSS의 무한 페이지 매김.
Mariusz Dabrowski 제작
2017년 4월 27일
코드 정보
CSS 구성 요소: .
HTML 및 CSS를 사용한 웹사이트 페이지 매김을 위한 12가지 아이디어.
로사에서 만든
2016년 11월 3일
데모 GIF: 페이지 매김
HTML/CSS/JavaScript로 페이지 매김.
JP Nothard 제작
2016년 10월 9일
데모 GIF: 페이지 매김 호버 애니메이션
HTML 및 CSS 페이지 매김 호버 애니메이션.
Elena Nazarova 제작
2016년 9월 12일
호버 효과가 있는 페이지 매김.
Andre Wichert가 만든
2016년 8월 27일
HTML, CSS 및 JavaScript를 사용한 페이지 매김 표시기.
모세 홈스트롬이 만든
2016년 8월 19일
Brendan Mullins가 만든
2016년 8월 16일
반응형 매직 라인 페이지 매김
페이지 매김을 위한 매직 라인을 만듭니다. 굉장해 보인다.
제작사 Ryan Yu
2015년 2월 18일
반응형, 액세스 가능, 대체 페이지 매김 실험.
사이먼 고엘너가 만든
2014년 11월 11일
데모 GIF: 페이지 매김 화살표
페이지 매김 화살표를 구부립니다.
Hakim El Hattab 제작
2013년 10월 18일
이 기사에서는 페이지 매김을 위한 탐색 블록과 같은 웹 인터페이스 요소를 만드는 프로세스를 고려할 것입니다. Bootstrap 3 및 4에서 이 UI 요소는 Pagination 구성 요소를 사용하여 구현됩니다.
페이지 매김이란 무엇입니까?
페이지 매김은 데이터의 페이지 매김입니다. 저것들. 이것이 결론이다 데이터가 출력될 때한꺼번에는 아니지만 작은 부품(페이지).
이러한 부분(페이지)을 탐색하기 위해 탐색 블록이 사용됩니다.
Bootstrap 프레임워크의 Pagination 구성 요소는 이 인터페이스 요소를 생성하도록 설계되었습니다. 탐색 블록.
페이지 매김을 위한 탐색 블록 만들기
Bootstrap 3에서 nav 블록의 구조는 다음과 같습니다.
이 프래그먼트의 nav 요소는 래퍼 컨테이너 역할을 합니다. 이 구조에서는 보조 기술이 이 HTML 코드 조각을 탐색으로 인식했습니다..
또한 어떤 종류의 탐색 블록인지를 보조 기술이 설명하는 것이 바람직합니다. 이 작업은 aria-label 속성을 통해 수행됩니다.
Bootstrap에서 페이지 매김을 위한 탐색 블록 마크업은 다음을 사용하여 수행됩니다. 글머리 기호 목록. 이 블록의 각 탐색 링크는 li로 래핑되고 ul에 배치된 요소입니다.
Bootstrap에서 탐색 상자의 시각적 디자인은 ul에 추가되어야 하는 페이지 매김 클래스를 사용하여 수행됩니다.
Bootstrap 4의 탐색 블록 구조:
Bootstrap 4에서 li 및 a 요소에는 . li 는 page-item 이고 a 는 page-link 입니다. 이러한 클래스는 요소에 대한 CSS 스타일을 설정하고 탐색 블록을 올바르게 표시하는 데 필요합니다.
텍스트 레이블 대신 아이콘 또는 아이콘 사용
일부 링크의 콘텐츠로 아이콘을 사용하는 페이지 매김을 위한 탐색 모음의 예:
탐색 링크의 상태 변경
탐색 모음의 링크 상태 변경은 비활성화된 클래스와 활성 클래스를 사용하여 수행됩니다. 첫 번째 클래스( disabled )는 비활성화된(클릭할 수 없는) 링크를 만드는 데 사용됩니다. 강조 표시(표시)하려면 두 번째 클래스( 활성 )가 필요합니다. 현재 페이지. 링크 자체가 아니라 li 요소에 활성 및 비활성화된 클래스를 추가해야 합니다.
비활성화된 클래스는 CSS 링크 선언 pointer-events: none 을 설정합니다. 이 선언은 링크의 기능을 비활성화하기 위한 것입니다. 그러나 키보드를 사용하여 전환을 비활성화하지는 않습니다. 따라서 프로젝트에서 이러한 링크의 기능을 완전히 비활성화하려면 JavaScript를 사용하여 추가로 추적하고 tabindex="-1" 속성을 추가해야 합니다.
링크 기능을 비활성화하는 또 다른 방법은 요소를 사용하지 마십시오.
탐색 블록 크기 조정
부트스트랩 3 및 4에서는 pagination-lg 및 pagination-sm 클래스를 사용하여 탐색 상자의 크기를 조정할 수 있습니다. 이것은 페이지 매김 클래스에 이러한 클래스 중 하나를 추가하여 수행됩니다.
첫 번째 클래스( pagination-lg )는 탐색 크기를 늘려야 할 때 사용하고 두 번째 클래스( pagination-sm )는 탐색 크기를 줄여야 할 때 사용합니다.
탐색 블록 정렬
Bootstrap 3에서 페이지 매김을 위한 탐색 모음 정렬은 다음과 같이 수행됩니다. 텍스트 정렬 클래스.
Bootstrap 4에서 페이지 매김을 위한 navbar 정렬은 flex 클래스를 사용하여 수행됩니다.
호출기 구성 요소(부트스트랩 3)
Pager는 페이지 또는 기타 사이트 콘텐츠를 통해 간단한 탐색을 생성하도록 설계된 Bootstrap 3 구성 요소입니다. 이 구성 요소는 2개의 버튼(링크)으로 구성됩니다.
이 탐색의 가장 일반적인 용도 중 하나는 다음과 같이 만드는 것입니다. 첫 번째 버튼은 사이트의 최신 항목으로 이동하고 두 번째 버튼은 이전 항목으로 이동합니다..
호출기 구성 요소 구문:
버튼 레이아웃 변경
기본적으로 호출기 구성 요소 단추 중앙 정렬. 그러나 이 옵션 외에도 Bootstrap 3을 사용하면 다른 가장자리에 정렬할 수 있습니다. 이것은 첫 번째 버튼 이전과 두 번째 버튼 옆에 클래스를 추가하여 수행됩니다. 이전 클래스는 링크를 왼쪽과 오른쪽 옆에 정렬합니다.
버튼 기능 비활성화
버튼을 비활성화 상태로 전환하려면 비활성화된 클래스를 버튼에 추가하면 됩니다.
웹 사이트에는 일반적으로 여러 페이지가 있습니다. 예를 들어 랜딩 페이지에서 3-5페이지로 위치할 수 있으며 그 이상일 수도 있습니다.
모든 좋은 사이트에는 사용자가 사이트 페이지 사이를 적절하게 탐색하고 이동할 수 있는 탐색 기능이 포함되어야 합니다. JavaScript를 사용하여 이러한 페이지 매김을 만들 수 있습니다. 이 기사에서는 이러한 탐색을 만드는 방법에 대해 설명합니다.
또 다른 점은 이 예제에서는 일반 JavaScript 외에 Bootstrap 4를 사용합니다. 부트스트랩 페이지 매김 구성 요소는 JQuery 라이브러리, 즉 특수 Buzina 페이지 매김 플러그인과 결합됩니다. 그것은 당신이 그들 사이의 탐색 생성과 함께 여러 페이지로 모든 정보를 나눌 수 있습니다.
필요한 프레임워크 연결
Bootstrap 및 JQuery로 작업하려면 이들을 포함해야 합니다. 이것은 태그를 사용하여 HTML 문서에서 수행할 수 있습니다.