টাচ ডিভাইসে jQuery ইউআই স্লাইডার

Question 1

আমি jQuery UI ব্যবহার করে একটি ওয়েবসাইট বিকাশ করছি এবং আমার সাইটে বেশ কয়েকটি উপাদান রয়েছে যা টাচস্ক্রিন ডিভাইসে দেখার সময় বেমানান বলে মনে হচ্ছে; তারা কোনও ত্রুটি সৃষ্টি করে না, তবে আচরণটি যা হওয়া উচিত তা নয়।

প্রশ্নের উপাদানসমূহ হ'ল স্লাইডার এবং রেঞ্জস্লাইডারগুলি jQuery ইউআই দ্বারা নির্ধারিত হিসাবে; টাচ স্ক্রিনে, কোনও হ্যান্ডেল বাছাই হিসাবে কোনও টাচ এবং স্লাইডারটি জুড়ে হ্যান্ডেলটিকে টেনে আনার জন্য একটি স্পর্শ নিবন্ধের পরিবর্তে এটি পুরো ওয়েবপৃষ্ঠাকে স্ক্রিনের পাশের দিকে স্লাইড করে। আপনি যদি হ্যান্ডেলটি ট্যাপ করেন এবং তারপরে স্লাইডারে অবস্থানটি ট্যাপ করেন যেখানে আপনি হ্যান্ডেলটি শেষ করতে চান তবে এটি খুব ধীর এবং আদর্শ নয়। কোন ধারনা?

আমি jqtouch প্লাগইন ডাউনলোড করার চেষ্টা করেছি এবং তারপরে .touch([...])স্লাইডার () এবং রেঞ্জস্লাইডার () এ সমস্ত কল সংযুক্ত করেছি , কিন্তু এটি কার্যকর হয়নি।

ধন্যবাদ!

আপডেট: jQuery UI ওয়েবসাইটে আমি এই "প্যাচ" পেয়েছি

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

এটি বলছে যে এটি আইফোনে স্লাইডারটি সহজতর করে, কিন্তু এখন অন্য বোকা প্রশ্নের জন্য: আমি কীভাবে এই কোডটি "কোড" সংযুক্ত করব? আমি কি কোডের শুরুতে একটি প্লাগিনের মতো অন্তর্ভুক্ত করব?

Question 2

এই গ্রন্থাগারটি আপনি যা খুঁজছেন তা প্রস্তাবিত বলে মনে হচ্ছে:

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>

Question 3

এই সম্পর্কে কিছু নতুন তথ্য যুক্ত করতে চেয়েছিলেন। টাচ-পাঞ্চ আইপ্যাডস এবং অ্যান্ড্রয়েড ডিভাইসের জন্য দুর্দান্ত কাজ করবে। তবে স্লাইডারটি উইন্ডোজ মোবাইল ডিভাইসে কাজ করবে না, যতদূর আমি পরীক্ষা করতে পারি (jquery ui এবং টাচ পাঞ্চের সর্বশেষ সংস্করণ সহ)

সমাধানটি বেশ সহজ, কেবলমাত্র .ui-স্লাইডার-হ্যান্ডেলটিতে নিম্নলিখিত সিএসএস-বিধিগুলি যুক্ত করুন:

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

আশাকরি এটা সাহায্য করবে

Question 4

@ ড্যাজব্র্যাডবুরির পরামর্শ অনুসারে, টাচপঞ্চ লাইব্রেরি মাউসের ইভেন্টগুলিকে স্পর্শ করতে অনুবাদ করতে সহায়তা করতে পারে। .ড্যাজেগাবল () এর পরামিতিগুলি স্লাইডারের চলন সীমাবদ্ধ করে তাই এটির স্লাইডার পিতামাতার বাইরে স্থানান্তরিত করা যায় না।

<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>

সম্পাদনা: আপনি যদি ইতিমধ্যে Jquery UI স্লাইডার ব্যবহার করে থাকেন তবে আপনাকে কেবল টাচপঞ্চ লাইব্রেরি অন্তর্ভুক্ত করতে হবে। .Ui-স্লাইডার-হ্যান্ডেলের জন্য .dggable () কল করবেন না কারণ এটি বিদ্যমান কার্যকারিতা ওভাররাইট করে দেবে।

Question 5

আমারও একই সমস্যা ছিল। আমি কেবল মোবাইলে কাজ করে না তা বুঝতে jQuery UI এর স্লাইডারে একটি বিস্তৃত স্লাইডার UI বিল্ডিং তৈরি করেছি developed আমি এখানে তালিকাবদ্ধ পরামর্শগুলি চেষ্টা করেছি তবে যেহেতু আমার কাছে একটি কাস্টম সমাধান রয়েছে যা কেবলমাত্র jQuery UI স্লাইডার ভিত্তিক, এটি কার্যকর হয়নি।

শুধু noUiSlider ব্যবহার করুন ।

আমি jQuery UI স্লাইডারের শীর্ষে যেটি তৈরি করেছি সে হিসাবে এটি সমস্ত বিস্তৃত বৈশিষ্ট্যগুলি (এবং আরও অনেক কিছু) করে। এটি মোবাইল ডিভাইসে সুন্দর করে কাজ করে এবং স্টাইল করাও সহজ।