स्पर्श उपकरणों पर jQuery के यूआई स्लाइडर्स

95

मैं jQuery UI का उपयोग करके एक वेबसाइट विकसित कर रहा हूं, और मेरी साइट पर कई तत्व हैं जो टचस्क्रीन डिवाइस पर देखे जाने पर असंगत प्रतीत होते हैं; वे किसी भी त्रुटि का कारण नहीं है, लेकिन व्यवहार वह नहीं है जो होना चाहिए।

प्रश्न में तत्व jQuery यूआई द्वारा परिभाषित स्लाइडर्स और रेंजलाइडर हैं; टच स्क्रीन पर, टच को रजिस्टर करने के बजाय हैंडल और स्लाइडर को ड्रैग के रूप में ड्रैग करने के बजाय, यह पूरे वेबपेज को स्क्रीन के किनारे पर स्लाइड करता है। यह काम करता है यदि आप हैंडल को टैप करते हैं और फिर स्लाइडर पर उस स्थान पर टैप करें जहां आप हैंडल को समाप्त करना चाहते हैं, लेकिन यह बहुत धीमा है और आदर्श नहीं है। कोई विचार?

मैंने jqtouch प्लगइन डाउनलोड करने की कोशिश की और फिर .touch([...])सभी कॉल को स्लाइडर () और रेंजलाइडर () से जोड़ दिया, लेकिन यह काम नहीं किया।

धन्यवाद!

अद्यतन: मुझे यह "पैच" jQuery यूआई वेबसाइट पर मिला

http://bugs.jqueryui.com/ticket/4143

यह कहता है कि यह iPhone पर स्लाइडर की सुविधा देता है, लेकिन अब एक और बेवकूफ सवाल के लिए: मैं इस "पैच" को अपने कोड में कैसे शामिल करूं? क्या मैं इसे एक प्लगइन की तरह कोड की शुरुआत में शामिल करता हूं?

slider touch jqtouch

— jqcoder
स्रोत

140

इस लाइब्रेरी की पेशकश करने के लिए लगता है कि आप क्या देख रहे हैं:

https://github.com/furf/jquery-ui-touch-punch#readme

इसका कुछ उदाहरण उपयोग कोड भी है (बस प्लगइन जोड़ें):

<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>
<script>
  $('#widget').draggable();
</script>

— dazbradbury
स्रोत

28

जनता को ध्यान दें: इसे स्लाइडर हैंडल से संलग्न करें, न कि पूरी बात। (JQuery स्लाइडर के लिए जो होगा$('.ui-slider-handle').draggable();

— पॉलस्किनर

17

अब मैं स्लाइडर को पूरे पृष्ठ पर ले जा सकता हूँ !! यह मज़ाकीय है।

— dezman

मैं फ़ायरफ़ॉक्स मैक में पूरे पृष्ठ पर हैंडल को स्थानांतरित कर सकता हूं। मैं सोच रहा था कि क्या हमें एक सशर्त जगह चाहिए अगर (ipad | iphone) ... तो draggable ()।

— जो हाइड

13

ऊपर मेरी मूल टिप्पणी को खरोंचें। यह HEAD में इस प्लग-इन को शामिल करके काम करता है। $ (चयनकर्ता) .draggable () जोड़कर <स्क्रिप्ट src> न जोड़ें; स्लाइडर हैंडल बनाने के लिए काम करते हैं।

— जो हाइड

6

आपको केवल टच पंच स्क्रिप्ट को शामिल करना होगा और यही वह है। जैसे @JoeHyde ने अपनी दूसरी टिप्पणी में कहा, किसी भी तत्व पर .dragable () कॉल करने की आवश्यकता नहीं है। बस स्क्रिप्ट शामिल है और यह काम करना चाहिए।

— जैक शीशी

22

बस इसके बारे में कुछ नई जानकारी जोड़ना चाहते थे। टच-पंच आईपैड और एंड्रॉइड डिवाइस के लिए ठीक काम करेगा। लेकिन स्लाइडर विंडोज मोबाइल उपकरणों पर काम नहीं करेगा, जहां तक मैं परीक्षण कर सकता हूं (jQuery के नवीनतम संस्करणों के साथ और टच पंच)

यह फिक्स काफी सरल है, बस निम्नलिखित सीएसएस-नियमों को .ui-स्लाइडर-हैंडल में जोड़ें:

-ms-touch-action: none;
touch-action: none;

उम्मीद है की यह मदद करेगा

— Stijn_d
स्रोत

मेरे लिए काम नहीं कर रहा है? कोई भी उदाहरण लिंक @Stijn_d

— ShibinRagh

उह, लेकिन यह वास्तविक स्पर्श पंच के कामकाज को बर्बाद कर देता है

— user151496

इससे मेरा मुद्दा ठीक हो गया। धन्यवाद!

— पार्कर_कोड्स

न ही मुझे एक Dell लैपटॉप पर काम कर प्रपत्र एक टचस्क्रीन के साथ jsfiddle.net/jhtcqbqo

— जीन फ़्राँस्वा बेऔचंप

6

जैसा कि @dazbradbury ने सुझाव दिया है, टचपंच लाइब्रेरी माउस घटनाओं को छूने के लिए अनुवाद करने में मदद कर सकती है। .Draggable () में पैरामीटर स्लाइडर की गति को सीमित करता है ताकि इसे उसके स्लाइडर माता-पिता से आगे नहीं बढ़ाया जा सके।

<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>
<script>
$(".ui-slider-handle").draggable({ 
    axis: "x",
    containment: "parent"
});
</script>

EDIT: यदि आप पहले से ही एक Jquery UI स्लाइडर का उपयोग कर रहे हैं , तो आपको केवल टचपंच लाइब्रेरी को शामिल करना होगा। .Ui-स्लाइडर-हैंडल के लिए .ragable () को कॉल न करें क्योंकि यह मौजूदा कार्यक्षमता को अधिलेखित कर देगा।

— DPH ट्रेडिंग डेनिश प्लेट हाउस
स्रोत

यह मेरे लिए काम कर गया। एकमात्र मुद्दा अब यह है कि पृष्ठभूमि क्षेत्र (जब रेंज: "मिनट" सेट है) स्लाइडर स्थिति का पालन नहीं कर रहा है।

— इजेक्टाटा

यह स्वीकृत उत्तर होना चाहिए।

— इलियकेमिस्ट

3

मुझे भी यही समस्या थी। मैंने केवल jQuery UI के स्लाइडर पर एक विस्तृत स्लाइडर UI बिल्डिंग विकसित की है, यह महसूस करने के लिए कि यह मोबाइल पर बिल्कुल भी काम नहीं करता है। मैंने यहां सूचीबद्ध सुझावों की कोशिश की, लेकिन जब से मेरे पास एक कस्टम समाधान है जो केवल jQuery UI स्लाइडर पर आधारित है, तो यह काम नहीं किया।

बस noUiSlider का उपयोग करें ।

यह सभी विस्तृत विशेषताएं (और भी बहुत कुछ) करता है, जैसा कि मैंने jQuery UI स्लाइडर के ऊपर बनाया था। यह मोबाइल उपकरणों पर खूबसूरती से काम करता है और स्टाइल करने में भी आसान है।

— एडम करकसोनी
स्रोत