SelectPage v 2.4 신규 드 롭 다운 목록 발표 및 페이지 닫 기 기능

드 롭 다운 페이지 선택 플러그 인 SelectPage v 2.4 발표,플러그 인 업데이트 내용:

pagination 파 라 메 터 를 추가 하고 원고 가 페이지 별로 데 이 터 를 불 러 올 지 여 부 를 지정 하 며 페이지 표시 줄 을 표시 합 니 다

listSize 인 자 를 추가 하고 페이지 를 사용 하지 않 는 목록 을 지정 합 니 다.표시 높이,단 위 는 개(옵션 개수)이 고 10 개 항목 의 높이 를 기본 으로 표시 합 니 다

selectOnly:true 를 설정 한 경우 입력 상 자 는 읽 기 전용 모드 이 고 검색 필 터 를 입력 할 수 없습니다

다 중 선택 모드 를 복원 하고 최대 선택 항목 을 설정 할 때 선택 한 항목 을 다시 클릭 하면'전체 선택 페이지'단 추 를 누 르 면 선택 한 항목 의 개 수 를 최대 선택 항목 으로 추가 합 니 다

드 롭 다운 목록 스타일 및 위치 조정

단일 선택 모드 에서 항목 을 선택 하면 자동 으로 비우 기 버튼 이 표 시 됩 니 다

다 중 선택 모드 에서 이 페이지 를 제거 하고 두 단 추 를 모두 제거 한 후 오류 가 발생 한 문 제 를 되 돌려 줍 니 다

검색 결과 가 없 을 때 알림 정보 가 표 시 됩 니 다

플러그 인 프로필:
다기 능 드 롭 다운 선택 플러그 인 SelectPage
autocomplete,키보드 조작,페이지,태그 다 중 선택 등 다기 능 선택 기 플러그 인 을 지원 합 니 다.
플러그 인 효과
다 중 선택 모드 효과 그림:

기본 선택 모드 효과 그림:

입문 안내서,실례,문서
더 많은 인 스 턴 스,문 서 를 방문 하 십시오.
프로젝트 GitHub 주소:https://terryz.github.io
프로젝트 가 괜찮다 고 생각 하 시 면 프로젝트(Github/  스타 를 추가 하여 지 지 를 표시 하 다.
SelectPage 가 무엇 입 니까?
기능 특징
jQuery,Bootstrap 2,3 개발 기반4.567917.어떠한 UI 프레임 워 크 도 없 는 원생 HTML 환경 에 도 사용 할 수 있다.

입력 상자 입력 키워드 빠 른 검색(autocomplete)

결과 목록 페이지 별 전시
키보드 빠 른 조작 기본 기능 및 페이지 기능 사용

정적 json 데이터 원본 이나 ajax 동적 요청 데이터 원본 을 사용 할 수 있 습 니 다

여러 가지 선택 은 라벨(Tag)형식 으로 보 여 준다

결과 목록 은 화면 가장 자 리 를 자동 으로 판단 하고 내용 이 시각 범 위 를 초과 하지 않도록 합 니 다풍부 한 매개 변수 설정 및 기능 API 호출브 라 우 저 호 환:IE8+,Chrome,Firefox 등
플러그 인 은 jQuery 개발 을 바탕 으로 Bootstrap 2,3 환경 에서 사용 할 수 있 으 며,원생 UI 프레임 워 크 가 없 는 환경 에서 직접 사용 할 수 있 습 니 다.
왜 SelectPage 가 있어 야 돼 요?
때때로 우 리 는 하나의 플러그 인 이 필요 합 니 다.키 워드 를 입력 하여 빠 른 검색 을 할 수 있 고 드 롭 다운 으로 선택 할 수 있 습 니 다.대량의 데 이 터 를 보 여줄 때 페이지 를 나 누 어 표시 할 수 있 습 니 다.키 보드 를 사용 하여 빠 른 조작 을 할 수 있 고 각종 UI 환경 에 적응 할 수 있 으 며 유연 하 게 맞 춤 형 제작 을 할 수 있 습 니 다.상기 상황 은 실제 프로젝트 의 수요 에 나타 납 니 다.
이것 이 바로 SelectPage 플러그 인 이 있 는 이유 입 니 다.
SelectPage 를 어떻게 사용 합 니까?
또는  https://github.com/TerryZ/SelectPage최신 버 전 을 다운로드 하여 압축 을 풀 고 사용 해 야 할 항목 에 넣 습 니 다.
인용 파일

< !--          -- >
< !-- Bootstrap UI       -- >
< link rel="stylesheet" href="bootstrap.min.css" rel="external nofollow" type="text/css">
< !--        font-awesome   ，          -- >
< link rel="stylesheet" href="font-awesome.min.css" rel="external nofollow" type="text/css">
< !-- jQuery，Bootstrap        -- >
< script type="text/javascript" src="bootstrap.min.js" >< /script >
< script type="text/javascript" src="jquery.min.js" >< /script >
< !--           ，       Bootstrap       -- >
< !-- Bootstrap2   -- >
< link rel="stylesheet" href="selectpage.css" rel="external nofollow" type="text/css">
< !-- Bootstrap3   -- >
< link rel="stylesheet" href="selectpage.bootstrap3.css" rel="external nofollow" type="text/css">
< !--  Bootstrap         -- >
< link rel="stylesheet" href="selectpage.base.css" rel="external nofollow" type="text/css">
< !--                     ，         -- >
< !--        -- >
< script type="text/javascript" src="selectpage.js" >< /script >
HTML      
< !--              -- >
< input type="text" id="selectPage" >
       
//    ，                ：Array[{Object},{...}]
var tag_data = [
 {id:1 ,name:'Chicago Bulls',desc:'     '},
 {id:2 ,name:'Cleveland Cavaliers',desc:'      '},
 {id:3 ,name:'Detroit Pistons',desc:'     '},
 {id:4 ,name:'Indiana Pacers',desc:'       '}
];
//     
$('#selectPage').selectPage({
 showField : 'desc',
 keyField : 'id',
 data : tag_data
});

총결산
위 와 같이 소 편 이 소개 한 SelectPage v 2.4 는 순 드 롭 다운 목록 을 추가 하고 페이지 를 닫 는 기능 을 발표 하여 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.소 편 은 제때에 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!