vanillaSelectBox
1.0.0
NPM I Vanillaselectbox
إذا قمت بتحديد جميع العناصر عندما يتم ترشيح القائمة بواسطة مربع النص ، فستضع القيمة كلها على العنصر النائب حتى عندما لا يتم تحديد كل القيم المحددة ، إذا قمت بإغلاقها وفتحت مرة أخرى ، فستلاحظ أنه لا يتم فحص جميع القيم وأن العنصر النائب يقول الجميع
تتمثل الفكرة في استخدام عنصر محدد دنيوي وإخفائه وتوفير منسدل لطيف بدلاً من ذلك. لكن البيانات تأتي من العنصر الأصلي ويتم تحديث هذا العنصر مع الخيارات المتخذة ولا تزال تتلقى حدث تغيير. الاستثناء هو init () عن بُعد ووظائف البحث عن بُعد () (اختياري) تمت إضافته باستخدام V 0.75 ولكنها تتطلب على الأقل عنصر تحديد فارغ ولا تزال النتيجة متوفرة في العنصر الأصلي. لا تتردد في طرح المزيد من التفسيرات في علامة التبويب المناقشات. نراكم قريبا
Demo Classic: https://philippemarcmeyer.github.io/vanillaselectbox/index.html؟v=1.05
Demo Remote: 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 () fonction جديدة للحصول على القيم المحددة في صفيف
v1.02: إضافة خيارين جديدين "itemsseparator" لتغيير الافتراضي "، فاصل العنصر الذي يظهر في الزر والترجمات. item لإظهار العنصر في المفرد إذا كان هناك واحد فقط.
v1.01: إزالة السطر الكود عديمة الفائدة 550،551 العدد 71 بواسطة chchch
v1.00: بسبب الطلب: تمت إضافة ملف package.json وتم التبديل إلى 1.0.0 استعدادًا للتحميل إلى NPM
v0.78: توقف عن استخدام الأنماط المضمنة في الزر الرئيسي. يمكنك سرقة استخدام keepinystemles: صحيح لاستخدام السلوك القديم
v0.77: حامل العمل مع Bastoune Help => لا يزال يبدو أنه يفقد قيمة العناوين الأساسية في checkall متعددة من القائمة المنسدلة
v0.76: إمكانية تغيير شجرة القائمة المنسدلة وتغيير وظيفة البحث عن بُعد + وظيفة التصحيح الفارغة ()
V0.75: البحث عن بُعد جاهزًا + تعديل البحث المحلي: عند فحص OptGroup ، يتحقق Optgroup من الأطفال فقط إذا لم يتم استبعادهم من البحث.
v0.72: البحث عن بُعد (WIP) bugfix [x] حدد كل المكررات
V0.71: البحث عن بُعد (WIP) رمز أفضل => يجب أن تُرجع وظيفة مستخدم البحث عن بُعد وعدًا
v0.70: يمكن اختبار البحث عن بُعد (WIP). يعمل فقط على قوائم مستوى واحد (وليس مجموعات optgroups)
v0.65: مستويان: إصلاح الأخطاء: يتم فحص المجموعات/عدم تحديدها عند التحقق من كل/إلغاء تحديد كل شيء
v0.64: مستويان: المجموعات الآن يمكن فحصها للتحقق/إلغاء تحديد خيارات الأطفال
v0.63: مستويان: نقرة واحدة على المجموعة تحدد / إلغاء تحديد الأطفال
v0.62: الخيار الجديد: MaxOptionWidth حدد عرضًا أقصى لكل خيار للقوائم الضيقة (troncature ellipsis)
v0.61: الخيار الجديد: MaxSelect ، قم بتعيين الحد الأقصى على الخيارات القابلة للتحديد في قائمة الاختيار من متعدد
v0.60: مستويان: يتم استخدام مجموعات OptGroups الآن لإظهار منسدلة مستويين
V0.59: إصلاح الأخطاء: مربع البحث كان متداخلًا عن العنصر الأول في محددات واحدة
v0.58: إصلاحات الأخطاء
v0.57: إصلاح الأخطاء (خيار Minwidth غير محترم)
v0.56: خنازير الاختيار متعددة المراكز أصغر قليلاً ، ويعمل MaxWidth Corre
v0.55: يتم نسخ جميع السمات من خيارات التحديد الأصلية إلى عنصر SelectBox. revended => "محدد" ، "تعطيل" ، "نص البيانات" ، "قيمة البيانات" ، "النمط"
v0.54: إذا تم تحديد جميع خيارات SELECT من قبل المستخدم ، فسيتم التحقق من مربع الاختيار Check All.
v0.53: إذا تم تحديد جميع خيارات التحديد ، فسيتم التحقق
v0.52: دعم أفضل لـ Select ('all') => يتسق الأمر مع مربع الاختيار وتحديد / إلغاء تحديده أثناء البحث
v0.51: ترجمات لتحديد All/مسح All + CSS تصحيحات + لا تحدد العناصر المعطلة
v0.50: PR بواسطة https://github.com/jaguerra2017 إضافة مجموعة محددة All/مسح زر الدعم + OptGroup!
V 0.41: تم تصحيح الأخطاء ، تم وضع محتوى القائمة في غير محله إذا تم تطبيق تحويل CSS على أحد الوالدين
V 0.40: انقر فوق One Selectbox أغلق الصناديق المفتوحة الأخرى
V 0.35: يمكنك تمكين وتعطيل العناصر. كما يتم استخدام خيارات SELECT التي تم توضيحها بالفعل في وقت البداية.
v 0.30: تتوقف القائمة عن التحرك في تغيير حجم النافذة وتمرير + z-ondex بترتيب إنشاء مثيلات متعددة
V 0.26: خطأ تصحيح في وضع الإقامة مع وظيفة Disable ()
V 0.25: خيار جديد Stayopen ، و Dropbox لم يعد صندوقًا ولكنه متعدد الاختيار
V 0.22: ترحيل الوظيفة إلى النموذج الأولي لـ vanillaselectbox => عدة مثيلات من VanillasElectbox () ولكن مجموعة واحدة من الوظائف في الذاكرة
v 0.21: أي 11 التوافق
V 0.20: Working Selectbox على حد سواء خيارات واحدة ومتعددة ، مع مربع البحث!
V 0.10: البرنامج المساعد الوظيفي لكل من الاختيار الفردي والمتعدد ، دون مربع بحث في الوقت الحالي
V 0.02: حدث تغيير في الإرسال المضافة لتحديد + علامة فحص أجمل
V 0.01: First Commice => أساسيات لمربع تحديد واحد + يتم تنظيف 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 متعددة و Size = "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" }
});
مستويين: فقط استخدم علامات OptGroup لجعلها مستويين
<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: يحد من عرض خيارات القائمة لجعل القائمة أكثر ضيقًا باستخدام Ellipis
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();
});
}
