jQuery मोबाइल: स्लाइडर घटनाओं के साथ कैसे काम करें?

Question

मैं sliderjQueryMobile में ईवेंट का परीक्षण कर रहा हूं और मुझे कुछ याद आना चाहिए।

पेज कोड है:

<div data-role="fieldcontain"> 
    <label for="slider">Input slider:</label> 
    <input type="range" name="slider" id="slider" value="0" min="0" max="100" /> 
</div> 

और अगर मैं कार्य करें:

$("#slider").data("events"); 

मैं

blur, focus, keyup, remove 

पाने के लिए उपयोगकर्ता रिलीज एक बार मूल्य प्राप्त मुझे क्या करना चाहते है स्लाइडर हैंडल

और

$("#slider").bind("keyup", function() { alert('here'); }); 

के रूप में KeyUp घटना के लिए एक हुक होने बिल्कुल कुछ भी नहीं है :(

मुझे कहना पड़ेगा कि मैं को गलत तरीके से मान लिया कि jquerymobile jQueryUI कंट्रोल्स का प्रयोग के रूप में यह मेरा पहला विचार था करता है, लेकिन अब घटनाओं में गहरी काम कर रहा हूं, मैं देख सकता हूं कि यह मामला नहीं है, केवल सीएसएस डिजाइन के मामले में।

मैं क्या कर सकता हूं?

jQuery स्लाइडर मोबाइल source codeGit पर पाया जा सकता है, तो यह किसी को भी साथ ही साथ एक परीक्षण पृष्ठJSBin

---

मैं समझता हूँ के रूप में पाया जा सकता है में मदद करता है, #slider साथ पाठ बॉक्स है मान, इसलिए मुझे स्लाइडर हैंडल में हुक करने की आवश्यकता होगी क्योंकि इस स्लाइडर के लिए जेनरेट कोड है:

<div data-role="fieldcontain" class="ui-field-contain ui-body ui-br"> 
    <label for="slider" class="ui-input-text ui-slider" id="slider-label">Input slider:</label> 
    <input data-type="range" max="100" min="0" value="0" id="slider" name="slider" class="ui-input-text ui-body-null ui-corner-all ui-shadow-inset ui-body-c ui-slider-input" /> 
    <div role="application" class="ui-slider ui-btn-down-c ui-btn-corner-all"> 
     <a class="ui-slider-handle ui-btn ui-btn-corner-all ui-shadow ui-btn-up-c" href="#" data-theme="c" role="slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="54" aria-valuetext="54" title="54" aria-labelledby="slider-label" style="left: 54%;"> 
      <span class="ui-btn-inner ui-btn-corner-all"> 
       <span class="ui-btn-text"></span> 
      </span> 
     </a> 
    </div> 
</div> 

और हैंडलर लंगर में घटनाओं की जाँच मैं केवल click घटना

$("#slider").next().find("a").data("events"); 

---

फिक्स

इवान जवाब से, हम सिर्फ जरूरत है:

<div data-role="fieldcontain"> 
    <label for="slider">Input slider:</label> 
    <input type="range" name="slider" id="slider" value="0" min="0" max="100" /> 
</div> 

और उसके बाद

$(document).bind("pagecreate", function(event, ui) { 

    $('#slider').siblings('.ui-slider').bind('tap', function(event, ui){ makeAjaxChange($(this).siblings('input')); }); 
    $('#slider').siblings('.ui-slider a').bind('taphold', function(event, ui){ makeAjaxChange($(this).parent().siblings('input')); 

}); 

function makeAjaxChange(elem) { 
    alert(elem.val()); 
} 

धन्यवाद इवान के लिए इवान।

Answer 1

आपकी समस्या का मेरा समाधान टैप और टैपहोल्ड घटनाओं पर हैंडल हैंडल करना है। टैप स्लाइडर के div तत्व पर लगाया जाता है, जबकि टैपहोल्ड को तत्व (स्लाइडर नियंत्रण बटन) पर लगाया जाता है।स्लाइडर के

HTML मार्कअप:

<div class="ui-field-contain ui-body ui-br" data-role="fieldcontain" id="element-boravak3"> 
    <label class="ui-input-text ui-slider" id="boravak3-label" for="boravak3">strop</label> 
    <input class="ui-input-text ui-body-null ui-corner-all ui-shadow-inset ui-body-c ui-slider-input" name="boravak3" id="boravak3" value="0" min="0" max="100" data-type="range"> 
<!-- this is code that jQMobile generates --> 
    <div role="application" class="ui-slider ui-btn-down-c ui-btn-corner-all"> 
     <a class="ui-slider-handle ui-btn ui-btn-up-c ui-btn-corner-all ui-shadow" href="#" data-theme="c" role="slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" aria-valuetext="0" title="0" aria-labelledby="boravak3-label" style="left: 0%;"> 
      <span class="ui-btn-inner ui-btn-corner-all"> 
       <span class="ui-btn-text"></span> 
      </span> 
     </a> 
    </div> 
</div> 

जे एस:

$('#' + id).slider(); 
$('#' + id).siblings('.ui-slider').bind('tap', function(){ makeAjaxChange($(this).siblings('input')); }); 
$('#' + id).siblings('.ui-slider a').bind('taphold', function(){ makeAjaxChange($(this).parent().siblings('input')); }); 

समारोह makesAjaxChange (ELEM) सर्वर से अद्यतन करता है। यहां ध्यान देने योग्य एक और बात है, इनपुट फ़ील्ड में मूल्य बदलना सर्वर अपडेट नहीं करता है, इसलिए आपको इनपुट तत्व की स्थिति बदलने के लिए फ़ंक्शन बाध्य करना होगा। आपको यह भी ध्यान देना होगा कि ऐसा करने से प्रत्येक स्लाइडर नियंत्रण चाल इनपुट तत्व परिवर्तन को ट्रिगर करेगी, इसलिए आपको इसे भी काम करना होगा।

यही कारण है कि मोबाइल डिवाइस मोबाइल उपकरणों के लिए jQuery UI नहीं है। आपके पास इन चीजों को हल नहीं किया गया है और उन्हें स्वयं करना चाहिए।

मुझे उम्मीद है कि इससे मदद मिलती है।

संपादित करें: मैं समझाने के लिए भूल गया कि क्यों div.ui-स्लाइडर पर टैप करें और a.ui-स्लाइडर-हैंडल पर टैपहोल्ड करें। div.ui-हैंडलर टैप क्लिक/टैप ईवेंट के लिए है जब उपयोगकर्ता बस स्लाइडबार पर एक उंगली को क्लिक या टैप करता है। A.ui-स्लाइडर-हैंडल टैबहोल्ड उपयोगकर्ता के माउस या उंगली के साथ स्लाइडबार के नीचे बाएं/दाएं स्थानांतरित होने के बाद है और इसे जारी किया गया है।

इवान

Answer 2

मैं इस समस्या का बहुत सरल समाधान पाया। इस कोड का उपयोग करके, आप स्लाइडर पर ईवेंट को शुरू और रोक सकते हैं।

$('.ui-slider').live('mousedown', function(){$('#'+id).trigger('start');}); 
$('.ui-slider').live('mouseup', function(){$('#'+id).trigger('stop');}); 
$('.ui-slider').live('touchstart', function(){$('#volumeSlider').trigger('start');}); 
$('.ui-slider').live('touchend', function(){$('#volumeSlider').trigger('stop');}); 

Answer 3

मुझे पता चला कि इवान के समाधान का उपयोग करने में कुछ समस्याएं हैं। यदि आप स्लाइडर को खींचते हैं, तो थोड़ी देर के लिए रोकें (माउस बटन नहीं उठाएं) और स्लाइडर को खींचने पर रखें, टैपहोल्ड-अबवेंट ट्रिगर नहीं किया जाएगा।

स्लाइडर div में vmouseup और mouseup ईवेंट जोड़कर आपको एक सुधार मिलता है लेकिन स्लाइडर स्लाइडर के ऊपर से माउस कर्सर को स्थानांतरित करने पर स्लाइडर अभी भी ईवेंट को ट्रिगर करने में विफल रहता है।

Answer 4

यदि आप स्लाइडर जारी होने पर ईवेंट को पकड़ना चाहते हैं (संभवतः एजेक्स अनुरोधों को अनुकूलित करने के लिए)।

यह मेरे लिए काम किया:

var slider = $('#my_slider'); 
//as the answer from @nskeskin you have to remove the type range from your input on the html code 
slider.slider({create:function(){ 
    //maybe this is too much hacking but until jquery provides a reference to this... 
    $(this).next().children('a').bind('vmouseup', yourOnChangeCallback); 
} 
}); 

इसके अलावा इस से बचाता है कि आप घटनाओं जब नियंत्रण अभी तक प्रारंभ नहीं किया गया है (या बनाया) जोड़ते हैं, ताकि बनाने घटना के लिए इंतजार कर मुझे लगता है कि थोड़ा अधिक सही है।

Answer 5

$('#slider').next().children('a').bind('taphold', function() { 
     $('#slider').live("change", function (event, ui) { 
      //do these..... 
     }); 
    }); 

Answer 6

@ VTWood के समाधान के आधार पर; यहां सभी jQuery-Mobile 1.1 स्लाइडर्स के लिए एक सामान्य 'फिक्स' है, इसलिए वे उपयुक्त समय पर start और stop ईवेंट प्रेषित करते हैं। भविष्य में सभी स्लाइडर्स को पैच करने के लिए आपको बस इस कोड को अपने पृष्ठ में छोड़ना होगा।

$(document).on({ 
    "mousedown touchstart": function() { 
     $(this).siblings("input").trigger("start"); 
    }, 
    "mouseup touchend": function() { 
     $(this).siblings("input").trigger("stop"); 
    } 
}, ".ui-slider"); 

संक्षेप में, यह दस्तावेज़ वस्तु जो दोनों mousedown और touchstart घटनाओं .ui-slider तत्वों से शुरू हो रहा के लिए सुनता है करने के लिए एक घटना श्रोता बांधता है। एक बार हैंडलर फ़ंक्शन को ट्रिगर करने पर input तत्व मिलेगा जो .ui-slider नियंत्रण के साथ बैठता है जिसे क्लिक किया गया था और start ईवेंट ट्रिगर किया गया था।तुम इतनी तरह इस उपभोग कर सकते हैं:

$("#my-slider").on("start", function() { 
    console.log("User has started sliding my-slider!"); 
}); 

$("#my-slider").on("stop", function (event) { 
    var value = event.target.value; 
    console.log("User has finished sliding my slider, its value is: " + value); 
}); 

Answer 7

<input type="range" id="player-slider" value="25" min="0" max="100"/> 

$("#player-slider").bind("change", function(event, ui) { 
    alert ("changed!"); 
}); 

Answer 8

इस कोड का प्रयास करें:

$("#slider-1").on('slidestop', function(event) { 
    var slider_value=$("#slider-1").slider().val(); 
    alert('Value: '+slider_value); 
}); 

मैं इस काम आप

Answer 9

बेस्ट और आसान तरीका के लिए आप नीचे दिए लिंक की जाँच कर सकते उम्मीद है। आपको सभी मोबाइल उपकरणों के लिए कोड मिलेगा।

http://trentrichardson.com/2011/11/11/jquery-ui-sliders-and-touch-accessibility/