কীভাবে jQuery ব্যবহার করে একটি অ্যাঙ্কর সক্ষম বা অক্ষম করবেন?
কীভাবে jQuery ব্যবহার করে একটি অ্যাঙ্কর সক্ষম বা অক্ষম করবেন?
উত্তর:
কোনও অ্যাঙ্করকে নির্দিষ্টভাবে অনুসরণ করা থেকে বিরত রাখতে href
, আমি এটি ব্যবহার করার পরামর্শ দেব preventDefault()
:
// jQuery 1.7+
$(function () {
$('a.something').on("click", function (e) {
e.preventDefault();
});
});
// jQuery < 1.7
$(function () {
$('a.something').click(function (e) {
e.preventDefault();
});
// or
$('a.something').bind("click", function (e) {
e.preventDefault();
});
});
দেখা:
http://docs.jquery.com/Events/jQuery.Event#event.preventDefault.28.29
এছাড়াও পূর্ববর্তী প্রশ্নটি এসও তে দেখুন:
$('a.something').on("click", function (e) { e.preventDefault(); });
?
আমি বর্তমানে যে অ্যাপটিতে কাজ করছি তাতে এটি জাভাস্ক্রিপ্টের সাথে সিএসএস শৈলীতে কাজ করে।
a.disabled { color:gray; }
তারপরে আমি যখনই কোনও লিঙ্কটি অক্ষম করতে চাই তখনই কল করি
$('thelink').addClass('disabled');
তারপরে, 'লিঙ্ক' ট্যাগের জন্য ক্লিক হ্যান্ডলারে আমি সর্বদা একটি চেক প্রথম জিনিস চালাই
if ($('thelink').hasClass('disabled')) return;
আমি একটি উত্তর পেয়েছি যা আমি এখানে আরও ভাল পছন্দ করি
এটা এমন দেখতে:
$(document).ready(function(){
$("a").click(function () {
$(this).fadeTo("fast", .5).removeAttr("href");
});
});
সক্ষম করাতে href বৈশিষ্ট্য নির্ধারণ করা জড়িত
$(document).ready(function(){
$("a").click(function () {
$(this).fadeIn("fast").attr("href", "http://whatever.com/wherever.html");
});
});
এটি আপনাকে চেহারাটি দেয় যে অ্যাঙ্কর উপাদানটি স্বাভাবিক পাঠ্য হয়ে যায় এবং বিপরীতে।
আমি মনে করি যে একটি উত্তম সমাধান হ'ল অক্ষম ডেটা অ্যাট্রিবিউট সেট করা এবং ক্লিকের জন্য এটির জন্য একটি চেক অ্যাঙ্কর করা। এইভাবে জাভা স্ক্রিপ্টটি অ্যাজাক্স কল বা কিছু গণনা সহ শেষ না হওয়া পর্যন্ত আমরা অস্থায়ীভাবে একটি অ্যাঙ্কর অক্ষম করতে পারি। যদি আমরা এটি অক্ষম না করি, তবে আমরা দ্রুত কয়েকবার এটি ক্লিক করতে পারি, যা অনাকাঙ্ক্ষিত ...
$('a').live('click', function () {
var anchor = $(this);
if (anchor.data("disabled")) {
return false;
}
anchor.data("disabled", "disabled");
$.ajax({
url: url,
data: data,
cache: false,
success: function (json) {
// when it's done, we enable the anchor again
anchor.removeData("disabled");
},
error: function () {
// there was an error, enable the anchor
anchor.removeData("disabled");
}
});
return false;
});
আমি একটি জিসফিল উদাহরণ তৈরি করেছি: http://jsfiddle.net/wgZ59/76/
নির্বাচিত উত্তরটি ভাল নয়।
পয়েন্টার-ইভেন্টগুলি সিএসএস স্টাইল ব্যবহার করুন । (রাশাদ আনারার পরামর্শ মতো)
MDN https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events দেখুন । এটি বেশিরভাগ ব্রাউজারগুলিতে সমর্থিত।
আপনার যদি বিশ্বব্যাপী সিএসএস নিয়ম নীচের মতো থাকে তবে অ্যাঙ্কারে সাধারণ "অক্ষম" বৈশিষ্ট্যটি কাজটি করবে:
a[disabled], a[disabled]:hover {
pointer-events: none;
color: #e1e1e1;
}
নীচের লাইনের চেষ্টা করুন
$("#yourbuttonid").attr("disabled", "disabled");
$("#yourbuttonid").removeAttr("href");
কোজ, এমনকি আপনি <a>
ট্যাগ অক্ষম করলেও href
কাজ করবে তাই আপনাকে অবশ্যই মুছে ফেলতে হবে href
।
আপনি যখন সক্ষম চান লাইনের নীচে চেষ্টা করুন
$("#yourbuttonid").removeAttr("disabled");
$("#yourbuttonid").attr("href", "#nav-panel");
এটি রিটার্ন মিথ্যা হিসাবে সহজ;
প্রাক্তন।
jQuery("li a:eq(0)").click(function(){
return false;
})
অথবা
jQuery("#menu a").click(function(){
return false;
})
$('#divID').addClass('disabledAnchor');
সিএসএস ফাইলে
.disabledAnchor a{
pointer-events: none !important;
cursor: default;
color:white;
}
$("a").click(function(event) {
event.preventDefault();
});
যদি এই পদ্ধতিটি বলা হয়, ইভেন্টের ডিফল্ট ক্রিয়াটি ট্রিগার করা হবে না।
আপনি যদি পৃষ্ঠার সাথে সমস্ত মিথস্ক্রিয়াটি ব্লক করার চেষ্টা করছেন তবে আপনি jQuery ব্লকইউআই প্লাগইনটি দেখতে চাইতে পারেন
আপনি কীভাবে তাদের অক্ষম করতে চেয়েছিলেন বা কী কারণে অক্ষম হওয়ার কারণ হবে তা আপনি কখনই সত্যই নির্দিষ্ট করেন নি।
প্রথমত, আপনি কীভাবে অক্ষমকে মান সেট করবেন তা নির্ধারণ করতে চান, তার জন্য আপনি JQuery এর অ্যাট্রিবিউট ফাংশন ব্যবহার করবেন এবং কোনও ফাংশনটি কোনও ইভেন্টে ঘটবে যেমন ক্লিক বা ডকুমেন্টের লোডের মতো।
অ্যাঙ্কর ট্যাগের মধ্যে আপনাকে অবশ্যই পাঠ্য বা এইচটিএমএল সামগ্রী রাখতে হবে তবে সেই উপাদানটি ক্লিক করা হলে আপনি কেবল কোনও পদক্ষেপ গ্রহণ করতে চান না (যেমন আপনি যখন প্যাগিনেটর লিঙ্কটি অক্ষম অবস্থায় থাকতে চান তবে এটি কারণ বর্তমান পৃষ্ঠা), কেবল href কেটে দিন। ;)
<a>3 (current page, I'm totally disabled!)</a>
@ মাইকেল-ঘাসের উত্তরগুলি আমাকে এ সম্পর্কে জানায়, তবে তিনি এখনও এমন পরিস্থিতিতেগুলিকে সম্বোধন করেছিলেন যেখানে আপনি এখনও jQuery / জেএস এর সাথে কাজ করছেন / করছেন। এই ক্ষেত্রে, যদি এইচটিএমএলটি নিজেই লেখার উপর আপনার নিয়ন্ত্রণ থাকে তবে কেবল href ট্যাগের এক্স-ইনগিংয়ের জন্য আপনাকে যা করতে হবে তা হল, তাই সমাধানটি একটি খাঁটি এইচটিএমএল!
জিকুয়েরি ফাইনগলিং ছাড়া অন্যান্য সমাধান যা হ্রেফকে রেখেছে আপনার জন্য একটি # টি href লাগানো দরকার, তবে এটি পৃষ্ঠায় শীর্ষে নেমে আসে এবং আপনি কেবল এটি প্লেইন পুরানো অক্ষম হওয়া চাই। বা এটিকে খালি রেখে দেওয়া, তবে ব্রাউজারের উপর নির্ভর করে এটি এখনও শীর্ষে লাফানোর মতো জিনিসগুলি করে এবং এটি আইডিই অনুসারে এটি অবৈধ এইচটিএমএল। তবে দৃশ্যত কোনও a
ট্যাগ এইচআরএফ ছাড়া সম্পূর্ণ বৈধ এইচটিএমএল।
শেষ অবধি, আপনি বলতে পারেন: ঠিক আছে, কেন কেবল একটি ট্যাগ পুরোপুরি না ফেলে? যেহেতু প্রায়শই আপনি পারবেন না, a
ট্যাগটি সিএসএস ফ্রেমওয়ার্কে স্টাইলিং উদ্দেশ্যে বা বুটস্ট্র্যাপের প্যাগিনেটারের মতো আপনি ব্যবহার করছেন নিয়ন্ত্রণের জন্য ব্যবহার করা হয়:
http://twitter.github.io/bootstrap/components.html#pagination
যদি আপনার অ্যাঙ্কর ট্যাগ হিসাবে আচরণ করার প্রয়োজন না হয় তবে আমি এটিকে একেবারে প্রতিস্থাপন করতে পছন্দ করব। উদাহরণস্বরূপ, যদি আপনার অ্যাঙ্কর ট্যাগটি পছন্দ হয়
<a class="MyLink" href="http://www.google.com"><span>My</span> <strong>Link</strong></a>
তারপরে jquery ব্যবহার করে আপনি এটি করতে পারেন যখন আপনাকে কোনও লিঙ্কের পরিবর্তে পাঠ্য প্রদর্শন করতে হবে।
var content = $(".MyLink").text(); // or .html()
$(".MyLink").replaceWith("<div>" + content + "</div>")
সুতরাং এইভাবে, আমরা কেবল একটি ডিভ ট্যাগের সাথে অ্যাঙ্কার ট্যাগটি প্রতিস্থাপন করতে পারি। এটি অনেক সহজ (মাত্র ২ টি লাইন) এবং শব্দার্থগতভাবেও সঠিক (কারণ আমাদের এখন কোনও লিঙ্কের প্রয়োজন নেই তাই লিঙ্কটি থাকা উচিত নয়)
অক্ষম সম্পত্তি সহ কোনও উপাদান অক্ষম বা সক্ষম করুন।
// Disable
$("#myAnchor").prop( "disabled", true );
// Enable
$( "#myAnchor" ).prop( "disabled", false );