फाउंडेशन स्लाइडर इनपुट अद्यतन नहीं करता है - ज़र्ब-फाउंडेशन, पग

पर यह पन्ना उदाहरण के लिए एचटीएमएल कोड के साथ एक इनपुट बॉक्स अद्यतन एक स्लाइडर है। आप स्रोत में वही कोड भी देख सकते हैं।

मैं इसे अपने आवेदन में उपयोग करना चाहता हूं इसलिए मैंने इसे अपने कोड में ट्रांसप्लांट किया और इसे जेड (उर्फ पग) में परिवर्तित कर दिया। स्रोत अब इस तरह दिखता है:

    div.row
div.small-10.columns
div.range-slider(data-slider data-options="display_selector: #days-off-count; initial: 28;")
span.range-slider-handle(role="slider" tabindex="0")
span.range-slider-active-segment
div.small-2.columns
input(type="number" id="days-off-count" value="28")

और परिणामस्वरूप एचटीएमएल इस तरह दिखता है (इसे सुंदर करने के बाद):

<div class="row">
<div class="small-10 columns">
<div data-slider data-options="display_selector: #days-off-count; initial: 28;" class="range-slider">
<span role="slider" tabindex="0" class="range-slider-handle"></span>
<span class="range-slider-active-segment"></span>
</div>
</div>
<div class="small-2 columns">
<input type="number" id="days-off-count" value="28">
</div>
</div>

जो बहुत करीब है जो दस्तावेज़ों में दिखाया गया है। हालांकि परिणामस्वरूप पृष्ठ पर इनपुट बॉक्स अपडेट नहीं किया गया है। अगर मैं इनपुट बॉक्स को एक अवधि में बदलता हूं जैसे कि "लेबल के साथ" उदाहरण यह अद्यतन करता है।

span(id="days-off-count" value="28")

हो जाता है

<span id="days-off-count" value="28"></span>

मेरे पास है foundation.js और यह .slider.js पेज के निचले हिस्से में शामिल है।

इसके अतिरिक्त, यदि मैं कीबोर्ड के माध्यम से इनपुट बॉक्स के मैन्युअल रूप से मूल्य को बदलता हूं तो स्लाइडर उस स्थिति पर कूद जाएगा, इसलिए वहां कुछ प्रकार का लिंक है।

इस्तेमाल किया जा रहा सॉफ्टवेयर:

  • उबंटू 14_04
  • क्रोम
  • नोड v0.10.25
  • एक्सप्रेस 4.14.0
  • जेड 1.11.0
  • फाउंडेशन v5.5.0

अन्य बातों को ध्यान में रखना:

  • पृष्ठ में एक से अधिक स्लाइडर हैं इसलिए किसी भी जावास्क्रिप्ट समाधान को इसे ध्यान में रखना आवश्यक है।

उत्तर:

उत्तर № 1 के लिए 1

मुझे लगता है कि यह एक बग है (हैटऑनप्रॉपर्टी के बजाय हैट्रिब्यूट # 6221 है) फाउंडेशन (5.5.0) के संस्करण में आप "उपयोग कर रहे हैं। ऐसा लगता है कि प्रारंभ में केवल फ़ायरफ़ॉक्स पर ही लागू किया गया था, यह अब क्रोम पर भी लागू होता है।

5.5.0 से स्लाइडर के साथ उदाहरण (टूटा हुआ) jsfiddle.net/tymothytym/jth99pkw/3

5.5.3 से स्लाइडर्स (काम कर रहे) स्लाइडर के साथ उदाहरण: jsfiddle.net/tymothytym/tw1we8fk/3

बग यहां तय किया गया था: https://github.com/zurb/foundation-sites/commit/896e81f1275eefbbdb84ce4da9004ab059b26d45

असल में, जाओ foundation.slider.js और इसे बदलें (लाइन 157):

if (settings.display_selector != "") {
$(settings.display_selector).each(function(){
if (this.hasOwnProperty("value")) { // this is the mistake / bug
$(this).val(value);
} else {
$(this).text(value);
}
});
}

इसके लिए:

if (settings.display_selector != "") {
$(settings.display_selector).each(function(){
if (this.hasAttribute("value")) { // this should fix it
$(this).val(value);
} else {
$(this).text(value);
}
});
}

यह मेरा फिक्स नहीं है, यह पैच जैसा ही है, लेकिन इसका मतलब यह होना चाहिए कि जब आप अपग्रेड करते हैं तो आपको कामकाज के लिए अपने आवेदन कोड को संशोधित करने की आवश्यकता नहीं होती है।


जवाब के लिए 0 № 2

1) शायद मैं गलत हूं ... लेकिन आपने संस्करण निर्दिष्ट नहीं किया है, तो आप फाउंडेशन v5 से एक उदाहरण देते हैं ... क्या आपने फाउंडेशन v6 स्थापित नहीं किया है?

इस उदाहरण का प्रयास करें: https://foundation.zurb.com/sites/docs/slider.html

2) अपनी जेएस फाइलों को शामिल करने के बाद, आपको यह होना चाहिए:

  <script>
$(document).foundation();
</script>

संपादित करें: क्षमा करें, पहली बार मैंने सभी को नहीं पढ़ा, शायद समस्या यह है कि फाउंडेशन "मान" विशेषता का उपयोग करता है, जो कि एक विशेषता है <input> टैग: मूल्य <button>, <input>, <li>, <option>, <meter>, <progress>, <param> तत्व का मान निर्दिष्ट करता है

स्रोत: https://www.w3schools.com/tags/ref_attributes.asp


संबंधित सवाल
सबसे लोकप्रिय