"স্টাইল চেঞ্জ" ইভেন্টটি শুনতে কি সম্ভব?

Question

JQuery এ এমন কোনও ইভেন্ট শ্রোতা তৈরি করা সম্ভব যা কোনও স্টাইল পরিবর্তনের সাথে আবদ্ধ হতে পারে? উদাহরণস্বরূপ, কোনও উপাদান যখন মাত্রা পরিবর্তন করে বা শৈলীর বৈশিষ্ট্যে অন্য কোনও পরিবর্তন করতে পারে যখন আমি কিছু করতে "চাই":

$('div').bind('style', function() {
    console.log($(this).css('height'));
});

$('div').height(100); // yields '100'

এটি সত্যিই দরকারী হবে।

কোন ধারনা?

হালনাগাদ

আমি নিজেই এর উত্তর দেওয়ার জন্য দুঃখিত, তবে আমি একটি ঝরঝরে সমাধান লিখেছি যা অন্য কারও সাথে মানায়:

(function() {
    var ev = new $.Event('style'),
        orig = $.fn.css;
    $.fn.css = function() {
        $(this).trigger(ev);
        return orig.apply(this, arguments);
    }
})();

এটি অভ্যন্তরীণ প্রোটোটাইপ.এসএস পদ্ধতিটি অস্থায়ীভাবে ওভাররাইড করবে এবং শেষে এটি একটি ট্রিগার দিয়ে পুনরায় সংজ্ঞায়িত করবে। সুতরাং এটি এর মতো কাজ করে:

$('p').bind('style', function(e) {
    console.log( $(this).attr('style') );
});

$('p').width(100);
$('p').css('color','red');

Comments

হ্যাঁ, দুর্দান্ত সমাধান, তবে সত্যিকারের অ্যাপ্লিকেশনটিতে আমার সন্দেহ হয় যে এটি প্রচুর সংস্থান গ্রহণ করতে পারে এবং এমনকি ব্রাউজারটি ব্যবহারকারীর মিথস্ক্রিয়াটি ধরে রাখতে ধীর বলে মনে করে। আমি জানতে চাই যে ঘটনাটি কিনা তা নয়।

— পিক্সলাইন

@ পিক্সলাইন: আমি দেখতে পাচ্ছি না যে এটি এতটা ধীর হওয়া উচিত। jQuery এখনও যাইহোক CSS প্রোটোটাইপ কল, আমি এটিতে একটি ট্রিগার যোগ করছি। সুতরাং এটি মূলত কেবল একটি অতিরিক্ত পদ্ধতি কল।

— ডেভিড হেলসিং

আমি এটি বুঝতে পারি: এটি কেবল মনে হয় যে কোনও ব্যবহারকারীর একটি অ্যাপ্লিকেশনের সাথে ইন্টারঅ্যাক্ট করার প্রবাহে, সিএসএস () কে অনেক সময় বলা হয়। আপনি সেই ট্রিগারটি দিয়ে কী করছেন তার উপর নির্ভর করে (এটি যদি কেবল কনসোল লগ হয় তবে আমি অনুমান করি আপনি অবশ্যই নিরাপদে আছেন), এটি সমস্যা তৈরি করতে পারে। আমি হতাশ করছি. এটি প্রয়োগের উপরও নির্ভর করে। আমি ব্যক্তিগতভাবে আমার স্টাফগুলিতে প্রচুর ভিজ্যুয়াল প্রতিক্রিয়া করি।

— পিক্সলাইন

বিদ্যমান জ্যাকোয়ারি সিএসএস কলগুলির সাথে এটি কাজ করার জন্য আরও কয়েকটি কাজ করার জন্য রয়েছে: 1) আপনি আপনার নতুন সিএসএস ফাংশন থেকে উপাদানটি ফিরিয়ে দিতে চান অন্যথায় এটি সাবলীল স্টাইলের CSS কলগুলি ভেঙে দেবে। যেমন। $ ('পি')। সিএসএস ('প্রদর্শন', 'ব্লক')। সিএসএস ('রঙ', 'কালো'); ইত্যাদি 2) যদি এটি কোনও সম্পত্তির মানের জন্য কল হয় (উদাহরণস্বরূপ 'অবজেক্ট CSS)' উচ্চতা ');') আপনি মূল ফাংশনের রিটার্ন মানটি ফিরিয়ে দিতে চান - আমি আর্গুমেন্টের তালিকাটি পরীক্ষা করে এটি করছি ফাংশনটির জন্য কেবল একটি যুক্তি রয়েছে।

— theringostarrs

আমি এই পদ্ধতির আরও দৃ rob় সংস্করণ তৈরি করেছি যা শৈলীর বৈশিষ্ট্য নিজেই অপসারণের সময়ও কাজ করে । এটি প্রতিটি শৈলীর জন্য একটি 'স্টাইল' ইভেন্ট নিক্ষেপ করবে যা এইভাবে সরানো হচ্ছে। gist.github.com/bbottema/426810c21ae6174148d4

— বেনি

Answer 1

যেহেতু jQuery ওপেন সোর্স, তাই আমি অনুমান করব যে আপনি cssনিজের পছন্দমতো কোনও ফাংশনটি প্রতিবারই ডাকার জন্য কল করতে পারেন (jQuery অবজেক্টটি পাস করা)। অবশ্যই, আপনি সিএসএসের বৈশিষ্ট্য নির্ধারণের জন্য অভ্যন্তরীণভাবে অন্য কিছু ব্যবহার করে না এমনটি নিশ্চিত করার জন্য আপনি jQuery কোডটি ঘষতে চান। আদর্শভাবে, আপনি jQuery এর জন্য একটি পৃথক প্লাগইন লিখতে চান যাতে এটি jQuery লাইব্রেরিতে নিজেই হস্তক্ষেপ না করে, তবে আপনার প্রকল্পের জন্য এটি সম্ভাব্য কিনা তা আপনাকে সিদ্ধান্ত নিতে হবে।

Comments

তবে এক্ষেত্রে আমি স্টাইলের সম্পত্তিটি যদি সরাসরি ডম ফাংশন দিয়ে সেট করি তবে কী হবে ??

— জাইমে হাবলুটজেল

এই সমাধানের সম্পূর্ণ উদাহরণ এখানে: gist.github.com/bbottema/426810c21ae6174148d4

— বেনি

Answer 2

প্রশ্ন জিজ্ঞাসা করার পর থেকে বিষয়গুলি কিছুটা সরল - কোনও উপাদানটির 'স্টাইল' বৈশিষ্ট্যের পরিবর্তনগুলি সনাক্ত করতে এখন কোনও মিউটেশনঅবার্সার ব্যবহার করা সম্ভব , কোনও জিকুয়ের প্রয়োজন নেই:

var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutationRecord) {
        console.log('style changed!');
    });    
});

var target = document.getElementById('myId');
observer.observe(target, { attributes : true, attributeFilter : ['style'] });

কলব্যাক ফাংশনে পাস হওয়া আর্গুমেন্টটি মিউটেশনরেকর্ড অবজেক্ট যা আপনাকে পুরানো এবং নতুন স্টাইলের মানগুলি ধরে রাখতে দেয়।

সাপোর্ট হল আধুনিক ব্রাউজারে ভাল ইন্টারনেট 11+ সহ।

Comments

মনে রাখবেন যে এটি কেবল ইনলাইন শৈলীর সাথে কাজ করে, যখন শ্রেণি পরিবর্তন বা @mediaপরিবর্তনের ফলে শৈলীর পরিবর্তন হয় না ।

— ফ্রিজ্যান্ট

@ বিফ্রেড.ইট কীভাবে কীভাবে এটি অর্জন করবেন তা সম্পর্কে আপনার ধারণা আছে? ক্লাসের সিএসএস বিধি কোনও উপাদানকে প্রয়োগ করার পরে আমি কিছু জেএস চালাতে চাই।

— ক্রাগলন

আপনি ব্যবহার করতে পারে getComputedStyleসঙ্গে setIntervalকিন্তু যে নিচে আপনার ওয়েবসাইট অনেক মন্থর হবে।

— ফ্রেংতে

দ্রষ্টব্য: মিউটিউশনস ওভারসভার অ্যানড্রইড 4.3 এর সমস্ত সংস্করণে আসলে কাজ করে না, যদিও ক্যানিজ ব্যবহার করে।

— জেমস গোল্ড

যখন টেক্সারিয়ার প্রস্থ 300px প্রস্থে প্রসারিত হয় তখন কোনও টেক্সারিয়ার পটভূমির রঙ নীল করে দেওয়া উদাহরণের জন্য এই ট্যুইডলটি দেখুন। jsfiddle.net/RyanNerd/y2q8wuf0 (দুর্ভাগ্যক্রমে এফএফ-তে একটি বাগ রয়েছে যা স্ক্রিপ্টটি HTMLElement.style.prop = "value"

— স্থগিত

Answer 3

আপনার ইভেন্ট অবজেক্টের ঘোষণাটি আপনার নতুন সিএসএস ফাংশনের অভ্যন্তরে থাকতে হবে। অন্যথায় ইভেন্টটি কেবল একবার চালানো যেতে পারে।

(function() {
    orig = $.fn.css;
    $.fn.css = function() {
        var ev = new $.Event('style');
        orig.apply(this, arguments);
        $(this).trigger(ev);
    }
})();

Comments

দুর্দান্ত, আপনাকে ধন্যবাদ। কিছু লোক আসল উত্স পরিবর্তন করতে বলে তবে আপনার এক্সটেনশনটি সেরা। আমার কিছু সমস্যা ছিল কিন্তু শেষ পর্যন্ত এটি কাজ করে।

— সিসাকাকুয়েব

এই কোডটি কার্যকর করার পরে এটি অবিচ্ছিন্নভাবে গুলি চালিয়ে যাচ্ছে এবং প্রয়োজনীয় ফলাফলও অর্জন করে না।

— smkrn110

Answer 4

আমি মনে করি যদি মাইকের কাছ থেকে সেক্ষেত্রে আপনি আপনার ইভেন্টটি চালু করতে না পারেন তবে সেরা উত্তরটি আপনার কোড থেকে নেই। তবে আমি এটি ব্যবহার করার সময় কিছু ত্রুটি পেয়েছি। সুতরাং আমি আপনাকে যে কোডটি ব্যবহার করি তা দেখানোর জন্য আমি একটি নতুন উত্তর লিখি।

প্রসার

// Extends functionality of ".css()"
// This could be renamed if you'd like (i.e. "$.fn.cssWithListener = func ...")
(function() {
    orig = $.fn.css;
    $.fn.css = function() {
        var result = orig.apply(this, arguments);
        $(this).trigger('stylechanged');
        return result;
    }
})();

ব্যবহার

// Add listener
$('element').on('stylechanged', function () {
    console.log('css changed');
});

// Perform change
$('element').css('background', 'red');

আমি ত্রুটি পেয়েছি কারণ var ev = new E। ইভেন্ট ('স্টাইল'); এইচটিএমএলডিভ-তে কিছু স্টাইলের সংজ্ঞা দেওয়া হয়নি .. আমি এটিকে সরিয়ে দিয়েছি এবং এখনই now (এটি) .ট্রিগার ("স্টাইলচ্যাঞ্জড") চালু করছি। আরেকটি সমস্যা হ'ল মাইক $ (সিএসএস, ..) এর রেজুল্টো ফিরিয়ে দেয়নি তবে এটি কিছু ক্ষেত্রে সমস্যা তৈরি করতে পারে। সুতরাং আমি ফলাফল পেতে এবং এটি ফিরে। এখন কাজ করে every প্রতিটি সিএসএস পরিবর্তনে কিছু লিব অন্তর্ভুক্ত থাকে যা আমি কোনও ইভেন্ট সংশোধন করতে এবং ট্রিগার করতে পারি না।

Comments

খুব সহায়ক এবং চতুর

— ডিগ্রি

Answer 5

অন্যরা যেমন পরামর্শ দিয়েছে, উপাদানটির শৈলীতে যে কোনও কোডই পরিবর্তিত হচ্ছে তার উপর যদি আপনার নিয়ন্ত্রণ থাকে তবে আপনি যখন উপাদানটির উচ্চতা পরিবর্তন করেন তখন আপনি একটি কাস্টম ইভেন্ট নিক্ষেপ করতে পারেন:

$('#blah').bind('height-changed',function(){...});
...
$('#blah').css({height:'100px'});
$('#blah').trigger('height-changed');

অন্যথায়, যদিও যথেষ্ট উত্স-নিবিড়, আপনি উপাদানটির উচ্চতায় পরিবর্তনগুলি পর্যায়ক্রমে পরীক্ষা করার জন্য একটি টাইমার সেট করতে পারেন ...

Comments

স্টাইল পরিবর্তন করে এমন কোডটিতে যদি কারও কাছে অ্যাক্সেস থাকে তবে এটি অবশ্যই একটি খুব ঝরঝরে সমাধান।

— উমায়ের হাফিজ

Answer 6

JQuery বা জাভা স্ক্রিপ্টে স্টাইল পরিবর্তন ইভেন্টের জন্য কোনও ইনবিল্ট সমর্থন নেই। তবে jQuery কাস্টম ইভেন্ট তৈরি করতে এবং এটি শোনার জন্য সমর্থন করে তবে প্রতিবার যখন পরিবর্তন হয়, আপনার নিজের উপর এটি ট্রিগার করার একটি উপায় থাকা উচিত। সুতরাং এটি একটি সম্পূর্ণ সমাধান হবে না।

Answer 7

আপনি জ্যাকুয়েরি প্লাগইন চেষ্টা করতে পারেন, সিএসএস পরিবর্তন হওয়ার সাথে সাথে এর ব্যবহার সহজ করার সময় এটি ইভেন্টগুলিকে ট্রিগার করে

http://meetselva.github.io/#gist-section-attrchangeExtension

 $([selector]).attrchange({
  trackValues: true, 
  callback: function (e) {
    //console.log( '<p>Attribute <b>' + e.attributeName +'</b> changed from <b>' + e.oldValue +'</b> to <b>' + e.newValue +'</b></p>');
    //event.attributeName - Attribute Name
    //event.oldValue - Prev Value
    //event.newValue - New Value
  }
});

Answer 8

আকর্ষণীয় প্রশ্ন। সমস্যাটি হ'ল উচ্চতা () কোনও কলব্যাক গ্রহণ করে না, সুতরাং আপনি কলব্যাক শুরু করতে পারবেন না। উচ্চতা নির্ধারণ করতে অ্যানিমেট () বা সিএসএস () ব্যবহার করুন এবং তারপরে কলব্যাকে কাস্টম ইভেন্টটি ট্রিগার করুন। এখানে ধারণার প্রমাণ হিসাবে অ্যানিমেট (), পরীক্ষিত এবং কাজ ( ডেমো ) ব্যবহার করে একটি উদাহরণ রয়েছে :

$('#test').bind('style', function() {
    alert($(this).css('height'));
});

$('#test').animate({height: 100},function(){
$(this).trigger('style');
}); 

Comments

দুঃখিত, তবে এটি কী প্রমাণ করেছে? আপনি trigger()নিজেই ইভেন্ট। আমি মনে করব যে কোনও শৈলীর বৈশিষ্ট্যটি সংশোধন করা হলে ওপি কিছু অটো-ট্রিগার ইভেন্টের পরে।

— JPot

@ জেপট তিনি দেখিয়ে দিচ্ছেন যে উচ্চতার বৈশিষ্ট্য পরিবর্তিত হলে ইভেন্টগুলি ছুঁড়ে না।

— অ্যান্থনিজেসিঙ্ক লিঙ্ক

Answer 9

উপরে থেকে কেবল ডেভিডের সমাধান যোগ এবং আনুষ্ঠানিককরণ:

নোট করুন যে jQuery ফাংশনগুলি শৃঙ্খলযোগ্য এবং 'এটি' ফেরত দেয় যাতে একের পর এক (যেমন $container.css("overflow", "hidden").css("outline", 0);) একাধিক আহ্বানগুলি বলা যেতে পারে ।

সুতরাং উন্নত কোডটি হওয়া উচিত:

(function() {
    var ev = new $.Event('style'),
        orig = $.fn.css;
    $.fn.css = function() {
        var ret = orig.apply(this, arguments);
        $(this).trigger(ev);
        return ret; // must include this
    }
})();

Answer 10

JQuery cssHooks সম্পর্কে কীভাবে?

হয়তো আমি প্রশ্নটি বুঝতে পারি না তবে আপনি যা অনুসন্ধান করছেন তা সহজেই ফাংশন cssHooksপরিবর্তন না করেই সম্পন্ন হয়েছে css()।

ডকুমেন্টেশন থেকে অনুলিপি:

(function( $ ) {

// First, check to see if cssHooks are supported
if ( !$.cssHooks ) {
  // If not, output an error message
  throw( new Error( "jQuery 1.4.3 or above is required for this plugin to work" ) );
}

// Wrap in a document ready call, because jQuery writes
// cssHooks at this time and will blow away your functions
// if they exist.
$(function () {
  $.cssHooks[ "someCSSProp" ] = {
    get: function( elem, computed, extra ) {
      // Handle getting the CSS property
    },
    set: function( elem, value ) {
      // Handle setting the CSS value
    }
  };
});

})( jQuery ); 

https://api.jquery.com/jQuery.cssHooks/

Answer 11

আমারও একই সমস্যা ছিল, তাই আমি এটি লিখেছিলাম। এটি বরং ভাল কাজ করে। আপনি এটি কয়েকটি সিএসএস রূপান্তরের সাথে মিশ্রিত করলে দুর্দান্ত দেখায়।

function toggle_visibility(id) {
   var e = document.getElementById("mjwelcome");
   if(e.style.height == '')
      e.style.height = '0px';
   else
      e.style.height = '';
}