জাভাস্ক্রিপ্ট / jquery এ অপেক্ষা কর্সার পরিবর্তন

119

এখানে চিত্র বর্ণনা লিখুন

যখন কোনও ফাংশন ডাকা হবে তখন কীভাবে আমি আমার কার্সারটিকে এই লোডিং আইকনে পরিবর্তন করতে পারি এবং কীভাবে জাভাস্ক্রিপ্ট / জ্যাকুরিতে এটি একটি সাধারণ কার্সারে ফিরে যেতে পারি?

javascript jquery html

— Ahmet
সূত্র

7

যদি আপনি ঠিক এই কার্সারটি চান তবে আপনার একটি ইউআরএল নির্দিষ্ট করা দরকার, অন্যথায় (রবার্টস সমাধান সহ) প্রতিটি ব্যবহারকারী তার ওএসের উপর নির্ভর করে লোডিং কার্সারটি দেখতে পাবে।

— ক্রিস্টোফ

1

ক্রিস্টোফ, আমি বর্তমানে অন্য অপারেটিং সিস্টেমগুলির জন্য 'অপেক্ষার' অনুষ্ঠানটি প্রদর্শন করব যা আমি বর্তমানে উইন্ডোজ on এ আছি, কারণ এই মুহুর্তে এটি দুর্দান্ত দেখা যাচ্ছে

— আহমেট

2

ঠিক আছে, ভিস্তার মধ্যে এটি উইন্ডোজ in-এর মতো একই কার্সারটি দেখায়, তবে এটি অবিচ্ছিন্ন অ্যানিমেশন সহ, পুরানো উইন্ডোজ ওএসে এটি ভাল ওল'ঘড়িঘড়ি দেখায় এবং লিনাক্স বা ম্যাক ওএসে এটি তাদের নিজ নিজ "ওয়েটিং" কার্সারটি দেখায়। এছাড়াও আমি ব্যবহারকারীদের কার্সারটি কৌশলগত না করার পরামর্শ দেব, যেহেতু এটি সাধারণত ওএস-অপারেশনগুলির সাথে সম্পর্কিত, তবে আপনার ওয়েবপৃষ্ঠায় এটির মতো সামান্য অপেক্ষাকৃত অ্যানিমেশন সরবরাহ করে যা ব্যবহারকারীকে প্রথম নজরে দেখতে সহায়তা করে, অপেক্ষার ক্রিয়াটি আপনার সাইটের কারণে এবং ওএস দ্বারা নয়।

— ক্রিস্টোফ

1

এছাড়াও দেখুন স্ট্যাকওভারফ্লো.com

— ব্রায়ান বার্নস

1

ডেস্কটপের জন্য ভাল ধারণা, মোবাইলের জন্য

— বিএডি

195

আপনার jQuery ব্যবহার:

$("body").css("cursor", "progress");

এবং তারপরে আবার স্বাভাবিক অবস্থায় ফিরে আসুন

$("body").css("cursor", "default");

— রবার্ট স্ট্যানলি
সূত্র

8

আমি ব্যবহার করেছি $("html,body")কারণ আমার পৃষ্ঠার দেহটি উইন্ডোর অর্ধেক ফিট করে তাই নীচের অর্ধেকের উপর ঘুরে বেড়ানোর সময় কার্সরটি এখনও ডিফল্ট ছিল।

— কিথ

পৃষ্ঠার অন্যান্য উপাদান (অর্থাত্ বুটস্ট্র্যাপ বোতাম) যা কার্সারটিকে একটি অ-ডিফল্ট ডিসপ্লেতে ওভাররাইড করে approach এই ক্ষেত্রে, আমি !importantনীচে @ হারাবিনউইটজ এর সমাধানটি ব্যবহার করা ভাল বলে মনে করেছি

— অ্যাডিসন

82

একজন সহকর্মী এমন একটি পদ্ধতির পরামর্শ দিলেন যা আমি এখানে নির্বাচিত সমাধানের চেয়ে পছন্দনীয় মনে করি। প্রথমে, সিএসএসে, এই নিয়মটি যুক্ত করুন:

body.waiting * {
    cursor: progress;
}

তারপরে, অগ্রগতি কার্সারটি চালু করতে, বলুন:

$('body').addClass('waiting');

এবং অগ্রগতি কার্সারটি বন্ধ করতে, বলুন:

$('body').removeClass('waiting');

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

— hrabinowitz
সূত্র

দুর্দান্ত সমাধান!

— কেন্টন ডি জং

31

2018 এর জন্য দয়া করে jQuery ব্যবহার করবেন না! এই এক ক্রিয়াটি সম্পাদন করার জন্য একটি সম্পূর্ণ বাহ্যিক গ্রন্থাগারকে অন্তর্ভুক্ত করার কোনও কারণ নেই যা এক লাইনের মাধ্যমে অর্জন করা যেতে পারে:

স্পিনারে কার্সার পরিবর্তন করুন: document.body.style.cursor = 'wait';

কার্সারটিকে স্বাভাবিক অবস্থায় ফেরা: document.body.style.cursor = 'default';

— kchuang7
সূত্র

3

সম্ভবত সেই পৃষ্ঠায় এমন কিছু আছে যা কাস্টম প্রসেসিং কার্সারের প্রয়োজনীয়তা যুক্ত করে, আপনি কি ভাবেন না? অবশ্যই কোনও খারাপ বিষয় নয়, তবে ইতিমধ্যে অন্য কোনও কিছুর জন্য বোঝানো হচ্ছে jQuery এর পরিবর্তনটি হবে ... এহেম ... 100%?

— প্যাট্রিক

@ অহমেট জাভাস্ক্রিপ্ট / জ্যাকোয়ারি সমাধানের জন্য জিজ্ঞাসা করার সাথে সাথে আমার ধারণা আপনারও উত্তর হওয়া উচিত। +1 টি

— জাভিয়ের

8

নিম্নলিখিতটি আমার পছন্দের উপায়, এবং প্রতিটি পৃষ্ঠার অর্থ পরিবর্তন করতে যাওয়া প্রতিটি সময় কার্সারটি পরিবর্তন করবে beforeunload

$(window).on('beforeunload', function(){
   $('*').css("cursor", "progress");
});

— shaneparsons
সূত্র

1

এটি এখন পর্যন্ত সবচেয়ে সহজ এবং সহজ বাস্তবায়ন যা আপনি করতে পারেন। অনেক ধন্যবাদ.

— JC203

7

Jquery এবং CSS ব্যবহার:

$("#element").click(function(){ 
    $(this).addClass("wait");
});

এইচটিএমএল: <div id="element">Click and wait</div>

সিএসএস: .wait {cursor:wait}

এখানে ডেমো

— tusar
সূত্র

এটি প্রমাণ করে যে পুরো পৃষ্ঠার চেয়ে কম পাত্রে অপেক্ষার কার্সারটি দেখানো যেতে পারে - পৃষ্ঠার অন্যান্য অংশগুলির সাথে এখনও যোগাযোগ করা গেলে তা বোঝা যায়। এখানে, শুধুমাত্র যখন উপর hovered div। অনুশীলনে, অপেক্ষা কর্সার দেখানোর জন্য নির্বাচিত আইটেমটি ক্লিক করা আইটেমের চেয়ে বড় হওয়া উচিত। প্রায়শই, গৃহীত উত্তরের মতো পুরো পৃষ্ঠায় প্রদর্শন করা সেরা।

— টুলমেকারস্টেভ

6

সমস্ত একক উপাদানকে ওভাররাইড করুন

$("*").css("cursor", "progress");

— จ๊ะ เขต นะ จ๊ะ
সূত্র

6

এই পদ্ধতির সমস্যাটি হ'ল আপনি সিএসএস স্টাইলকে এই জাতীয় নির্বাচনের জন্য হারাবেন: সক্রিয় /: হোভার, একবার অপেক্ষা শেষ হলে

— আহমদ

6

$('#some_id').click(function() {
  $("body").css("cursor", "progress");
  $.ajax({
    url: "test.html",
    context: document.body,
    success: function() {
      $("body").css("cursor", "default");
    }
  });
});

আপনার এজ্যাক্স কল সফল না হওয়া পর্যন্ত এটি একটি লোডিং কার্সার তৈরি করবে।

— কণিশক পানামালদিনিয়া
সূত্র

1

@ ক্রিসটফ, আপনি কেন আমাদের আরও ভাল কোড সহ একটি উত্তর সরবরাহ করবেন না, দয়া করে? আমি অবশ্যই সর্বদা ভাল কোড পছন্দ করব।

— বোবার্ট

এই ছবিটির ইতিমধ্যে ইতিমধ্যে প্রচুর শালীন উত্তর রয়েছে। এছাড়াও এটিকে 4 বছর বয়সী এবং এদিকে হয় successএবং completejQ3 সরানো, তাই আপনার সাথে যেতে হবে $.ajax(...).always(...);অগ্রগতি কার্সার স্থাপন করা যেতে পারে beforeSendফাংশন।

— ক্রিস্টোফ

6

JQuery:
$("body").css("cursor", "progress");

ফিরে আবার
$("body").css("cursor", "default");

বিশুদ্ধ:
document.body.style.cursor = 'progress';

ফিরে আবার
document.body.style.cursor = 'default';

— xoxn-- 1'w3k4n
সূত্র

5

এর জন্য আপনার জাভাস্ক্রিপ্টের দরকার নেই। আপনি সিএসএস ব্যবহার করে যে কোনও কিছুতে কার্সারটি পরিবর্তন করতে পারেন:

selector {
    cursor: url(myimage.jpg), auto;
}

ব্রাউজার সমর্থনের জন্য এখানে দেখুন কারণ ব্রাউজারের উপর নির্ভর করে কিছু সূক্ষ্ম পার্থক্য রয়েছে

— ধর্মযাজকের বাসগৃহ
সূত্র

1

পরিবর্তনটি অন্য কার্সারে ট্রিগার করতে আপনার জাভাস্ক্রিপ্টের দরকার নেই?

— টুলমেকারস্টেভ

@ টুলমেকারস্টিভ নোপ - আপনি কেবল সিএসএস ব্যবহার করতে পারেন - যেখানে আপনি কার্সারটি ব্যবহার করতে চান তা নির্ধারণ করতে কেবল নির্বাচককে পরিবর্তন করুন

— মানসে

3

আপনি করতে পারেন আরও কিছু আকর্ষণীয় এখানে। প্রতিটি এজাক্স কলের ঠিক আগে কল করার জন্য একটি ফাংশন সংজ্ঞায়িত করুন। প্রতিটি এজাক্স কল শেষ হওয়ার পরে কল করার জন্য একটি ফাংশনও বরাদ্দ করুন। প্রথম ফাংশন ওয়েট কার্সার সেট করবে এবং দ্বিতীয়টি এটি সাফ করবে। এগুলি দেখতে নিম্নলিখিতগুলির মতো:

$(document).ajaxComplete(function(event, request, settings) {
    $('*').css('cursor', 'default');
  });

function waitCursor() {
    $('*').css('cursor', 'progress');
  }

— শন ভিনসেন্ট
সূত্র

1

এটি যদি খুব দ্রুত সঞ্চয় হয় তবে এটি ব্যবহার করে দেখুন:

<style media="screen" type="text/css">
    .autosave {display: inline; padding: 0 10px; color:green; font-weight: 400; font-style: italic;}
</style>

<input type="button" value="Save" onclick="save();" />&nbsp;
<span class="autosave" style="display: none;">Saved Successfully</span>


$('span.autosave').fadeIn("80");
$('span.autosave').delay("400");
$('span.autosave').fadeOut("80");

— আইলনবার্গারকে চিহ্নিত করুন
সূত্র

1

'বডি' এর জন্য কার্সার সেট করা পৃষ্ঠার পটভূমির জন্য কার্সার পরিবর্তন করবে তবে এটি নিয়ন্ত্রণের জন্য নয়। উদাহরণস্বরূপ, বোতামগুলির উপরে ঘোরাফেরা করার সময় এখনও নিয়মিত কার্সার থাকবে। নিম্নলিখিতটি আমি ব্যবহার করছি:

'অপেক্ষা' কার্সার সেট করতে, একটি শৈলী উপাদান তৈরি করুন এবং মাথায় sertোকান:

var css = "* { cursor: wait; !important}";
var style = document.createElement("style");
style.type = "text/css";
style.id = "mywaitcursorstyle";
style.appendChild(document.createTextNode(css));
document.head.appendChild(style);

তারপরে কার্সারটি পুনরুদ্ধার করতে শৈলীর উপাদান মুছুন:

var style = document.getElementById("mywaitcursorstyle");
if (style) {
  style.parentNode.removeChild(style);
}

— cat_in_hat
সূত্র

0

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

এই কাজটি করার জন্য দুটি শর্ত রয়েছে। প্রথমে আপনাকে স্টাইল শিটে বা পৃষ্ঠার শিরোনামে স্টাইল ট্যাগ সহ স্টাইলটি সেট করতে হবে, কোনও ইনলাইন শৈলী হিসাবে নয় এবং দ্বিতীয়টি হ'ল অপেক্ষা শৈলীতে খালি স্ট্রিংয়ে সেট করে এটির স্টাইলটি পুনরায় সেট করা।

— ডেভিড ক্রফোর্ড
সূত্র