কীভাবে JQuery UI স্বয়ংক্রিয়রূপে সহায়ক সহায়ক পাঠ্য অপসারণ / পরিবর্তন করবেন?

Question

দেখে মনে হচ্ছে এটি JQuery UI 1.9.0 এ একটি নতুন বৈশিষ্ট্য, কারণ আমি এর আগে প্রচুরবার JQuery UI ব্যবহার করেছি এবং এই লেখাটি কখনই পপ আপ হয় নি।

এপিআই ডকুমেন্টেশনে সম্পর্কিত কোনও কিছু খুঁজে পাওয়া যায়নি।

সুতরাং স্থানীয় উত্স সহ একটি বুনিয়াদি স্বয়ংসম্পূর্ণ উদাহরণ ব্যবহার করা

$( "#find-subj" ).autocomplete({
    source: availableTags
});

অনুসন্ধানটি মিলে গেলে এটি সম্পর্কিত সহায়ক পাঠ্যটি দেখায়:

'1 ফলাফল উপলব্ধ, নেভিগেট করতে উপরে এবং ডাউন তীর কীগুলি ব্যবহার করুন' '

আমি কীভাবে এটিকে সুন্দর উপায়ে অক্ষম করতে পারি, এটি জিকুয়েরি নির্বাচকদের সাথে সরিয়ে না দিয়ে।

Comments

আপনি কোন ব্রাউজারে এটি দেখতে পাচ্ছেন? আপনি কি jquery ui ওয়েবসাইটে একই ডায়ালগটি দেখতে পাচ্ছেন

— ফুজিওনপ্রো

আমি এটি কখনও দেখিনি, আপনি সম্ভবত কোনও ফিজলার বা কিছু অতিরিক্ত কোড সরবরাহ করতে পারেন যাতে আমরা এটি আরও খতিয়ে দেখতে পারি?

— zmanc

আমার জন্য সমস্যাটি ছিল সেই অবস্থান: আপেক্ষিকভাবে, যে স্প্যানটিতে অ্যাক্সেসিবিলিটি স্টাফ প্রদর্শন করা হত তার জন্য ওভাররাইড করা হচ্ছিল ... আমি কেবল "গুরুত্বপূর্ণ" যুক্ত করেছি এবং এখন আমি অ্যাক্সেসযোগ্যতা রাখতে পারি

— iKode

আপনার সন্দেহ আমার সময় বাঁচায়। সুতরাং আপনার কাছে +1 :-)

— অশোক কুমার

Answer 1

আমি জানি এটির উত্তর দেওয়া হয়েছে তবে কেবল একটি বাস্তবায়ন উদাহরণ দিতে চেয়েছিলেন:

var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++"
    ];

$("#find-subj").autocomplete({
    source: availableTags,
    messages: {
        noResults: 'no results',
        results: function(amount) {
            return amount + 'results.'
        }
    }
});

Comments

আমি এটি চেষ্টা করেছিলাম এবং এটি একই জায়গায় "নাল" স্ট্রিংটি রাখে। সমাধানটি: noResults: '' এ পরিবর্তন করা হবে এবং আপনি কোনও বার্তা পাবেন না।

— প্যাট্রিক

কোনও ফলাফল ছাড়াই আমার জন্য কাজ করেছেন: ''। ভাবছেন কেন এটি api.jqueryui.com এ নথিভুক্ত করা হয়নি

— নীলস

নিশ্চিত না কি source: availableTagsকরে? আমি এটি সরিয়েছি এবং আমার এখনও কোনও বার্তা নেই।

— চক লে বাট

@ জ্যাঙ্গো রেইনহার্টকে ওপি-র প্রশ্নের উদাহরণ থেকে কেবল অনুলিপি করা হয়েছিল। উত্স নির্ধারণ করে যে স্বয়ংক্রিয়রূপের ডেটা কোথা থেকে আসছে। উদাহরণস্বরূপ availableTagsলোকাল ভেরিয়েবল হতে পারে ওয়ার্ড ম্যাপিংয়ের জন্য ইউআরএল-এর একটি জেএসওএন অবজেক্ট রয়েছে [{ '/tag/cats': 'Cats', etc... }]সুতরাং যখন ব্যবহারকারী টাইপ করুন Caবিড়ালরা ড্রপডাউনে প্রদর্শিত হবে এবং যখন নির্বাচিত বা ক্লিক করা হবে তা উদাহরণস্বরূপ ইউআরএল সহ একটি লুকানো ক্ষেত্রটি তৈরি করতে পারে।

— TK123

অনেক ধন্যবাদ. এপিআই ডকুমেন্টেশনে এটি খুঁজে পাওয়া যায়নি।

— Chorinator

Answer 2

এটি অ্যাক্সেসযোগ্যতার জন্য ব্যবহৃত হয়, এটি আড়াল করার একটি সহজ উপায় সিএসএস সহ:

.ui-helper-hidden-accessible { display:none; }

বা (ড্যানিয়েলের মন্তব্যটি নমুনা দেখুন)

.ui-helper-hidden-accessible { position: absolute; left:-999em; }

Comments

যেমনটি আপনি বলেছেন, এটি অ্যাক্সেসযোগ্যতার জন্য ব্যবহার করা হয়েছে যাতে স্ক্রিন পাঠকরা লোকেরা উইজেট আরও ভাল বুঝতে পারে। প্রদর্শন ব্যবহার করে: কিছুই নয়; আপনি এটিকে স্ক্রিন পাঠকদের থেকেও গোপন করুন। পজিশনের সাথে এটিকে পর্দার স্থানান্তরিত করা আরও ভাল: অবধি; বাম: -999 ম;

— ড্যানিয়েল গ্যারানসন

পরিবর্তে left: -9999px, আপনি left: 200%(200% বনাম 100% কোনও সম্ভাব্য ব্রাউজার quirks যেখানে 100% স্ক্রিন থেকে একেবারে না পেতে) জন্য অ্যাকাউন্ট করতে ব্যবহার করতে পারেন )।

— jbyrd

Answer 3

এখানে শীর্ষ উত্তরটি পছন্দসই চাক্ষুষ প্রভাব অর্জন করে তবে jQuery এর এআরআইএ সমর্থন থাকার বিষয়টিকে পরাভূত করে এবং এটি নির্ভর করে এমন ব্যবহারকারীদের কাছে কিছুটা দ্বিধাহীন! যারা jQuery CSS উল্লেখ করেছেন তারা আপনার জন্য এটি লুকিয়ে রাখে সঠিক, এবং এটি এমন স্টাইল যা এটি করে:

.ui-helper-hidden-accessible {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

বার্তাটি সরিয়ে না দেওয়ার পরিবর্তে এটি আপনার স্টাইলশিটে অনুলিপি করুন, দয়া করে :)।

Comments

2019 আপডেট: clipসম্পত্তিটি এখন

— অবহেলিত

Answer 4

এই ব্লগ অনুযায়ী :

ফলাফলগুলি কখন উপলভ্য হয় এবং কীভাবে পরামর্শের তালিকার মাধ্যমে নেভিগেট করতে হয় তা ঘোষণা করতে আমরা এখন এআরআইএ লাইভ অঞ্চলগুলি ব্যবহার করি। ঘোষণাগুলি বার্তাগুলির বিকল্পের মাধ্যমে কনফিগার করা যেতে পারে, যার দুটি বৈশিষ্ট্য রয়েছে: কোনও আইটেম ফেরত দেওয়া হবে না এর জন্য ফলাফল এবং কমপক্ষে একটি আইটেম কখন ফিরে আসে তার ফলাফল results সাধারণভাবে, আপনি যদি কেবল স্ট্রিংটি ভিন্ন ভাষায় রচনা করতে চান তবে এই বিকল্পগুলি পরিবর্তন করতে হবে। আমরা সমস্ত প্লাগইন জুড়ে স্ট্রিং ম্যানিপুলেশন এবং আন্তর্জাতিকীকরণের জন্য একটি সম্পূর্ণ সমাধানে কাজ করার সময় বার্তাগুলির বিকল্পটি ভবিষ্যতের সংস্করণগুলিতে পরিবর্তিত হতে পারে। আপনি যদি বার্তা বিকল্পে আগ্রহী হন, আমরা আপনাকে উত্সটি পড়তে উত্সাহিত করব; প্রাসঙ্গিক কোড স্বয়ংক্রিয়রূপে প্লাগইনের একেবারে নীচে এবং কয়েকটি লাইন।

...

তাহলে কীভাবে এটি স্বয়ংক্রিয়ভাবে সম্পূর্ণ উইজেটের ক্ষেত্রে প্রযোজ্য? ঠিক আছে, এখন আপনি যখন কোনও আইটেম অনুসন্ধান করেন, আপনার যদি স্ক্রিন রিডার ইনস্টল থাকে তবে এটি আপনাকে "1 ফলাফল উপলব্ধ, নেভিগেট করতে আপ এবং ডাউন তীরচিহ্নগুলি ব্যবহার করুন" এর মতো কিছু পড়বে। খুব সুন্দর, হাহ?

সুতরাং আপনি যদি গিথুব এ যান এবং স্বয়ংসম্পূর্ণ উত্স কোডের দিকে তাকান, 571 লাইনের আশেপাশে আপনি দেখতে পাবেন যেখানে এটি আসলে বাস্তবায়িত হয়েছে।

Answer 5

Jquery সিএসএস যুক্ত করা নির্দেশমূলক পাঠ্য সরাতেও কাজ করেছিল।

<link
 rel="stylesheet"
 href="http://code.jquery.com/ui/1.9.0/themes/smoothness/jquery-ui.css" />

Comments

আমার জন্যও কাজ করেছেন।

— ইন্দিকা কে

Answer 6

যেহেতু এটি অ্যাক্সেসযোগ্যতার কারণে রয়েছে তাই এটি সিএসএসের সাহায্যে লুকানো ভাল।

তবে, আমি পরামর্শ দেব:

.ui-helper-hidden-accessible { position: absolute; left: -9999px; }

বরং:

.ui-helper-hidden-accessible { display:none; }

প্রাক্তনটি আইটেমটি অফ-স্ক্রিনটি লুকিয়ে রাখবে, তবে এখনও স্ক্রিন-পাঠকদের এটি পড়ার অনুমতি দেয়, যেখানে display:noneনেই।

Comments

বদলে left: -9999pxশুধু ব্যবহার left: 200%(200% বনাম কোন সম্ভাব্য ব্রাউজার quirks যেখানে 100% না জন্য 100% ঠিক অ্যাকাউন্টে বেশ স্ক্রীন বন্ধ এটি পেতে)।

— jbyrd

Answer 7

ঠিক আছে, এই প্রশ্নটি কিছুটা বড়, তবে আপনি যখন সিএসএস ফাইলটি অন্তর্ভুক্ত করবেন তখন পাঠ্যটি মোটেও প্রদর্শিত হবে না:

<link
 rel="stylesheet"
 href="http://code.jquery.com/ui/1.9.0/themes/YOUR_THEME_HERE/jquery-ui.css" />

অবশ্যই আপনাকে প্রকৃত থিম instead YOUR_THEME_HEREোকাতে হবে যেমন "" মসৃণতা "

Answer 8

কীভাবে jQuery থিম এটি স্টাইল করে তা স্টাইল করুন। অন্যান্য উত্তরগুলির মধ্যে অনেকগুলি পুরো স্টাইলশীট সহ পরামর্শ দেয় তবে আপনি যদি কেবল প্রাসঙ্গিক সিএসএস চান তবে এটি এখানে কিভাবে হয় http://code.jquery.com/ui/1.9.0/themes/smoothness/jquery-ui.css:

.ui-helper-hidden-accessible { 
    position: absolute !important; 
    clip: rect(1px 1px 1px 1px); 
    clip: rect(1px,1px,1px,1px);
}

Answer 9

আপনার স্ক্রিপ্টে স্বতঃস্মরণ হওয়ার ঠিক পরে এই কোডটি যুক্ত করা বিরক্তিকর সহায়ককে পৃষ্ঠাটি সরিয়ে ফেলবে, তবে পর্দার পাঠক ব্যবহারকারীরা এখনও এতে উপকৃত হবেন:

$(document).ready(function() { //pushing the autocomplete helper out of the visible page
    $(".ui-helper-hidden-accessible").css({"position": "absolute", "left":"-999em"}) //{"display","none"} will remove the element from the page
});

আমি জেএসের সাথে সিএসএস চালানোর ভক্ত নই তবে এই ক্ষেত্রে আমি মনে করি এটি বোধগম্য। জেএস কোডটি প্রথম স্থানে সমস্যা তৈরি করেছিল এবং একই ফাইলের নীচে কয়েক লাইন সমস্যার সমাধান হবে। আইএমও এটি আলাদা সিএসএস ফাইলে সমস্যা সমাধানের চেয়ে ভাল যা অন্য লোকেরাও সম্পাদনা করতে পারে যারা জানেন না কেন .ui-সহায়ক-লুকানো-অ্যাক্সেসযোগ্য শ্রেণিটি সেভাবে সংশোধন করা হয়েছিল।

Comments

আমি এই সমস্যাটি সমাধান করার জন্য চিরতরে অনুসন্ধান করে যাচ্ছি এবং আপনার সমাধানটি কাজ করেছে।

— টিমোথি জি

বদলে left: -9999pxশুধু ব্যবহার left: 200%(200% বনাম কোন সম্ভাব্য ব্রাউজার quirks যেখানে 100% না জন্য 100% ঠিক অ্যাকাউন্টে বেশ স্ক্রীন বন্ধ এটি পেতে)।

— jbyrd

Answer 10

JQuery CSS .ui-helper- লুকানো-অ্যাক্সেসযোগ্য থিম / বেস / কোর.css ফাইলে। ফরোয়ার্ড সামঞ্জস্যের জন্য আপনার স্টাইলশিটে এই ফাইলটি (নূন্যতম) অন্তর্ভুক্ত করা উচিত।