vanillaSelectBox
1.0.0
NPM I vanillaselectbox
텍스트 상자에 의해 목록이 필터링 될 때 모든 요소를 선택하면 모든 값이 선택되지 않은 경우에도 모든 값을 자리 표시 자에게 넣습니다. 다시 닫고 다시 열면 모든 값이 확인되지는 않으며 자리 표시자가 모든 말을합니다.
아이디어는 평범한 선택 요소를 사용하여 숨기고 대신 멋진 드롭 다운을 제공하는 것입니다. 그러나 데이터는 원래 요소에서 비롯되며 선택 사항으로 업데이트되며 변경 이벤트를 여전히받습니다. v 0.75와 함께 추가 된 원격 init () 및 원격 검색 () 함수 (옵션)는 예외이지만 최소한 빈 선택 요소가 필요하며 결과는 원래 요소에 여전히 제공됩니다. 토론 탭에서 더 많은 설명을 요청하십시오. 곧 봐요
데모 클래식 : https://philippemarcmeyer.github.io/vanillaselectbox/index.html?v=1.05
데모 리모컨 : https://philippemarcmeyer.github.io/vanillaselectbox/ajaxdemo.html?v=1.05
let selectBox = new vanillaSelectBox("#brands",{"maxHeight":200,search:true});
<select id="brands" multiple size="3">
selectBox = new vanillaSelectBox("#brandsOne", { "maxHeight": 200, "search": true, "placeHolder": "Choose a brand..." });
selectBox.disableItems(['Lamborghini','Land Rover']);
v1.05 : 단일 모드에서 setValue () 버그 수정. 값을 설정할 수 없었습니다
v1.04 : https://github.com/arthur911016에 의해 고정 된 모든 문제를 선택하십시오
v1.03 : getResult () 배열에서 선택한 값을 얻기위한 새로운 팬션
v1.02 : 두 가지 새로운 옵션 추가 "항목 separator"를 기본값을 변경하기 위해 "버튼 및 번역에 표시하는 항목 분리기.
v1.01 : 쓸모없는 코드 라인 제거 550,551 문제 71 by Chchch
v1.00 : 수요로 인해 : package.json 파일을 추가하고 NPM에 업로드하기 위해 1.0.0으로 전환했습니다.
v0.78 : 기본 버튼에서 인라인 스타일 사용을 중지하십시오. 당신은 regacy 동작을 사용하기 위해 true keepinlineStyles 사용을 훔칠 수 있습니다.
v0.77 : Bastoune 도움말을 가진 장소 보유자에서 작업 => 다중 드롭 다운 checkall에서 자리 표시 자 가치를 잃는 것 같습니다.
v0.76 : 드롭 다운 트리를 변경하고 원격 검색 기능을 변경할 수있는 가능성 + 비어있는 () 기능 수정
v0.75 : 원격 검색 준비 + 로컬 검색 수정 : OptGroup에서 확인하면 검색에서 제외되지 않은 경우에만 어린이를 확인합니다.
v0.72 : 원격 검색 (WIP) 버그 문제 [X] 모든 복제 선택을 선택하십시오.
v0.71 : 원격 검색 (WIP) 더 나은 코드 => 원격 검색 사용자가 약속을 반환해야합니다.
v0.70 : 원격 검색 (WIP)을 테스트 할 수 있습니다. 1 레벨 메뉴에서만 작동합니다 (옵트 그룹 아님)
v0.65 : 두 레벨 : 버그 수정 : 모두를 확인할 때 그룹이 확인/선택 해제됩니다.
v0.64 : 두 가지 레벨 : 이제 그룹을 확인/선택 해제하여 그룹을 확인할 수 있습니다.
v0.63 : 두 레벨 : 그룹을 한 번 클릭하여 어린이를 선택 / 선택하지 않음
v0.62 : 새로운 옵션 : Maxoptionwidth가 좁은 메뉴에 대한 각 옵션에 대해 최대 너비를 설정합니다 (Ellipsis Troncature)
v0.61 : 새로운 옵션 : Maxselect, 객관식 메뉴에서 선택 가능한 옵션에 최대 옵션을 설정하십시오.
v0.60 : 두 레벨 : OptGroups는 이제 두 개의 레벨 드롭 다운을 표시하는 데 사용됩니다.
v0.59 : 버그 수정 : 검색 상자가 겹치는 첫 번째 항목에서 단일 선택
v0.58 : 버그 수정
v0.57 : 버그 수정 (Minwidth 옵션은 영광스럽지 않음)
v0.56 : 다중 선택 확인란이 조금 더 작으며 MaxWidth 옵션이 작동 중입니다. 이제 최소한 옵션 옵션뿐만 아니라 버튼에는 외관을 보호하기위한 스타일 속성이 있습니다.
v0.55 : 원래 선택 옵션의 모든 속성은 SelectBox 요소에 복사됩니다. 예외 => "selected", "disabled", "data-text", "data-value", "style"
v0.54 : SELECT의 모든 옵션이 사용자가 선택한 경우 모든 확인란을 확인합니다.
v0.53 : SELECT의 모든 옵션이 선택되면 모든 확인란 확인이 확인됩니다 => Demo "모든 테스트 선택"참조
v0.52 : select의 더 나은 지원 ( 'all') => 명령은 선택 / 선택 / 선택을 검색하는 동안 확인란과 선택 / 선택 / 선택 / 선택 / 선택 항목 만 확인합니다.
v0.51 : 모든 선택에 대한 번역/모든 All + Minor CSS 수정 + 장애인 항목을 선택하지 않음
v0.50 : PR의 https://github.com/jaguerra2017 선택 ALL/CLEAR ALL Check Button + OptGroup 지원 추가!
v 0.41 : 버그 수정, CSS 변환이 부모에게 적용된 경우 메뉴 내용이 잘못 배치되었습니다.
v 0.40 : 하나의 selectbox를 클릭하여 다른 하나의 열린 상자를 닫습니다.
v 0.35 : 항목을 활성화하고 비활성화 할 수 있습니다. SELECT의 이미 불일치 옵션은 초기 시간에도 사용됩니다.
v 0.30 : 메뉴는 창 크기 조정 및 스크롤 + z-index가 여러 인스턴스의 생성 순서대로 이동하지 않습니다.
v 0.26 : disable () 함수를 사용하여 StayOpen 모드에서 수정 된 버그
v 0.25 : 새로운 옵션 StayOpen 및 Dropbox는 더 이상 Dropbox가 아니라 멋진 다중 선택입니다.
v 0.22 : 기능을 VanillasElectbox 프로토 타입으로 마이그레이션합니다.
v 0.21 : IE 11 호환성
v 0.20 : 검색 상자와 함께 단일 및 다중 선택 모두에서 작동하는 작업!
v 0.10 : 단일 및 다중 선택에 대한 기능 플러그인, 현재 검색 창없이
v 0.02 : + 더 좋은 체크 마크를 선택하기 위해 디스패치 변경 이벤트가 추가되었습니다.
v 0.01 : 첫 번째 커밋 => 단일 선택 상자의 기본 사항 + 두 번 시작하면 DOM이 청소됩니다.
단일 선택 메뉴 :
<select id="singleTest">
<option value="Abarth" >Abarth</option>
<option value="Alfa Romeo">Alfa Romeo</option>
<option value="Alpine">Alpine</option>
<option value="Aston Martin" >Aston Martin</option>
<option value="Audi" >Audi</option>
<option value="Bentley" >Bentley</option>
<option value="BMW" >BMW</option>
<option value="Cadillac">Cadillac</option>
<option value="Chevrolet">Chevrolet</option>
<option value="Citroën">Citroën</option>
<option value="Cupra">Cupra</option>
<option value="DACIA">Dacia</option>
</select>
let selectCars = new vanillaSelectBox(
"#singleTest",
{
"placeHolder":"Choose your car",
translations: { "all": "All", "items": "Cars" }
});
다중 선택 메뉴 : "다중"속성에 주목하십시오. ge en 다중 선택 메뉴와 크기 = "2"에 주목하십시오. 쉼표로 선택한 항목의 구분 된 문자열을 대체하여 크기 항목 이상을 선택하는 "3 항목"(여기서 항목은 자동차로 변환됨).
<select id="multiTest" multiple size="2">
<option value="Abarth" >Abarth</option>
<option value="Alfa Romeo">Alfa Romeo</option>
<option value="Alpine">Alpine</option>
<option value="Aston Martin" >Aston Martin</option>
<option value="Audi" >Audi</option>
<option value="Bentley" >Bentley</option>
<option value="BMW" >BMW</option>
<option value="Cadillac">Cadillac</option>
<option value="Chevrolet">Chevrolet</option>
<option value="Citroën">Citroën</option>
<option value="Cupra">Cupra</option>
<option value="DACIA">Dacia</option>
</select>
let selectCars = new vanillaSelectBox(
"#multiTest",
{
"placeHolder":"Choose up to 3 cars",
"maxSelect":3,
"translations": { "all": "All", "items": "Cars" }
});
두 가지 레벨 : 옵트 그룹 태그를 사용하여 두 레벨로 만듭니다.
<div>
<label for="dino-select">Choose dinosaurs :</label>
<select id="dino-select" multiple size="3" >
<optgroup label="Theropods">
<option>Tyrannosaurus</option>
<option>Velociraptor</option>
<option>Deinonychus</option>
</optgroup>
<optgroup label="Sauropods">
<option>Diplodocus</option>
<option>Saltasaurus</option>
<option>Apatosaurus</option>
</optgroup>
</select>
</div>
<script>
// How to get the result from the original select tag :
let chosenDinos = [];
function getValues(id) {
let result = [];
let collection = document.querySelectorAll("#" + id + " option");
collection.forEach(function (x) {
if (x.selected) {
result.push(x.value);
}
});
return result;
}
let selectDinos = new vanillaSelectBox("#dino-select",
{"maxHeight": 300,
"search": true,
translations: { "all": "All", "items": "Dinos" }
});
document.getElementById("dino-select").addEventListener("change", function (e) {
chosenDinos = getValues("dino-select");
console.log(chosenDinos);
});
</script>
MaxSelect 옵션 : 선택할 수있는 옵션 수를 제한합니다.
let selectCars = new vanillaSelectBox("#demoShort",
{"maxSelect": 4,
"maxHeight": 200,
"search": true,
translations: { "all": "All", "items": "Cars" }
});
maxoptionwidth 옵션 : 엘리피스를 사용하여 메뉴를 더 좁게하기 위해 메뉴 옵션의 너비를 제한합니다.
let selectCars = new vanillaSelectBox("#demoShort",
{"maxOptionWidth":70,
"maxHeight": 200,
"search": true,
translations: { "all": "All", "items": "Cars" }
});
원격 검색 예 :
<select id="demoM1" multiple="true" size="3">
</select>
let selectDemoM1 = new vanillaSelectBox("#demoM1",
{
"maxHeight": 300,
"search": true,
"placeHolder" : "search to load more data",
"translations": { "all": "everybody", "items": "people" },
"remote": {
"onSearch": doSearch, // used fro search and init
"onInitSize": 10, // if > 0 onSearch is used for init to populate le select element with the {onInitSize} first elements
}
}
);
function doSearch(what, datasize) {
let valueProperty = "id";
let textProperty = "name";
return new Promise(function (resolve, reject) {
var xhr = new XMLHttpRequest();
xhr.overrideMimeType("application/json");
xhr.open('GET','./data.json', true);
xhr.onload = function () {
if (this.status >= 200 && this.status < 300) {
var data = JSON.parse(xhr.response);
if (what == "" && datasize != undefined && datasize > 0) { // for init to show some data
data = data.slice(0, datasize);
data = data.map(function (x) {
return {
value: x[valueProperty],
text: x[textProperty]
}
});
} else {
data = data.filter(function (x) {
let name = x[textProperty].toLowerCase();
if (name.indexOf(what.toLowerCase()) != -1)
return {
value: x[valueProperty],
text: x[textProperty]
}
});
}
resolve(data);
} else {
reject({
status: this.status,
statusText: xhr.statusText
});
}
};
xhr.onerror = function () {
reject({
status: this.status,
statusText: xhr.statusText
});
};
xhr.send();
});
}
