ব্রাউজারের আকার পরিবর্তন করার সময় কীভাবে যিকোরি ইউআই ডায়ালগটি অটো-সেন্টার করবেন?

Question 1

আপনি যখন jquery UI ডায়ালগ ব্যবহার করেন, তখন একটি জিনিস ব্যতীত সমস্ত কিছুই ভালভাবে কাজ করে। যখন ব্রাউজারটি আকার পরিবর্তন করা হয়, তখন ডায়ালগটি কেবল প্রাথমিক অবস্থায় থাকে যা সত্যই বিরক্তিকর হতে পারে।

আপনি এটি পরীক্ষা করে দেখতে পারেন: http://jqueryui.com/demos/dialog/

"মডেল ডায়লগ" উদাহরণে ক্লিক করুন এবং আপনার ব্রাউজারটিকে আকার দিন।

ব্রাউজারের আকার পরিবর্তন হয়ে গেলে আমি ডায়লগগুলিকে অটো-সেন্টার করতে দিতে সক্ষম হতে চাই। এটি কি আমার অ্যাপ্লিকেশনটিতে আমার সমস্ত কথোপকথনের জন্য কার্যকর উপায়ে করা যেতে পারে?

অনেক ধন্যবাদ!

Question 2

positionবিকল্পটি সেট করা এটিকে বাধ্য করবে, সুতরাং আমি #dialogএখানে যে সমস্ত ডায়ালগ ব্যবহার করি সেগুলিতে কেবল একই নির্বাচকটি ব্যবহার করুন (যদি এটি খুঁজে না পায় তবে সমস্ত jQuery এর মতো কোনও পদক্ষেপ নেওয়া হয়নি):

jQuery UI 1.10 এর আগে

$(window).resize(function() {
    $("#dialog").dialog("option", "position", "center");
});

jQuery UI 1.10 বা উচ্চতর

$(window).resize(function() {
    $("#dialog").dialog("option", "position", {my: "center", at: "center", of: window});
});

এখানে একই একই jQuery UI ডেমো পৃষ্ঠাটি কেবল উপরের কোডটি যুক্ত করছে , আমরা উইন্ডোটির resizeইভেন্টে কেবলমাত্র একটি হ্যান্ডলার যুক্ত করছি .resize(), যাতে এটি উপযুক্ত সময়ে পুনরায় কেন্দ্রটি ট্রিগার করে। اور

Question 3

বিকল্পভাবে এল্লেসিলের জবাব,

এই সমাধানটি সরাসরি আমার জন্য কার্যকর হয়নি, সুতরাং আমি নিম্নলিখিতটি করলাম যা গতিশীল তবে সংক্ষিপ্ত সংস্করণ:

$( window ).resize(function() {
    $(".ui-dialog-content:visible").each(function () {
        $( this ).dialog("option","position",$(this).dialog("option","position"));
    });
});

যদিও এলেসিডিলের জন্য +1

সম্পাদনা:

অনেক সংক্ষিপ্ত সংস্করণ যা একক সংলাপগুলির জন্য দুর্দান্ত কাজ করে:

$(window).resize(function(){
    $(".ui-dialog-content").dialog("option","position","center");
});

.आচ () ব্যবহার করার প্রয়োজন নেই সম্ভবত আপনার যদি কিছু অনন্য সংলাপ থাকে যা আপনি স্পর্শ করতে চান না।

Question 4

একটি আরও ব্যাপক উত্তর, যা নিকের উত্তরকে আরও নমনীয় উপায়ে ব্যবহার করে তা এখানে পাওয়া যাবে ।

সেই থ্রেড থেকে প্রাসঙ্গিকতার কোডটির একটি অভিযোজন নীচে রয়েছে। এই এক্সটেনশনটি মূলত অটোরেপজিশন নামে একটি নতুন ডায়ালগ সেটিং তৈরি করে যা সত্য বা মিথ্যা গ্রহণ করে। লিখিত হিসাবে কোডটি বিকল্পটিকে সত্য হিসাবে ডিফল্ট করে। এটি আপনার প্রকল্পের একটি .js ফাইলে রাখুন যাতে আপনার পৃষ্ঠাগুলি এটিকে উপকৃত করতে পারে।

    $.ui.dialog.prototype.options.autoReposition = true;
    $(window).resize(function () {
        $(".ui-dialog-content:visible").each(function () {
            if ($(this).dialog('option', 'autoReposition')) {
                $(this).dialog('option', 'position', $(this).dialog('option', 'position'));
            }
        });
    });

আপনি যখন আপনার পৃষ্ঠায় ডায়ালগ তৈরি করবেন এটি আপনাকে এই নতুন সেটিংয়ের জন্য "সত্য" বা "মিথ্যা" সরবরাহ করতে সহায়তা করে।

$(function() {
    $('#divModalDialog').dialog({
        autoOpen: false,
        modal: true,
        draggable: false,
        resizable: false,
        width: 435,
        height: 200,
        dialogClass: "loadingDialog",
        autoReposition: true,    //This is the new autoReposition setting
        buttons: {
            "Ok": function() {
                $(this).dialog("close");
            }
        }
    });
});

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

সম্পূর্ণ সমাধানের জন্য jQuery ফোরামে ব্যবহারকারী স্কট.gonzalez এ toণ।

Question 5

আর একটি সিএসএস-কেবল বিকল্প যা এটি কাজ করে। নেতিবাচক মার্জিনগুলি আপনার উচ্চতা এবং প্রস্থের অর্ধেকের সমান হওয়া উচিত। সুতরাং এই ক্ষেত্রে, আমার ডায়ালগটি 400px লম্বা 720px প্রশস্ত। এটি উল্লম্ব এবং অনুভূমিকভাবে এটি কেন্দ্র করে।

.ui-dialog {
  top:50% !important;
  margin-top:-200px !important; 
  left:50% !important;
  margin-left:-360px !important
}

Question 6

বিকল্পভাবে jQuery ui অবস্থান ব্যবহার করা যেতে পারে,

$(window).resize(function ()
{
    $(".ui-dialog").position({
        my: "center", at: "center", of: window
    });
});

Question 7

সবাইকে অভিবাদন!

ভ্যানিলা জেএস সমাধান:

(function() {
  window.addEventListener("resize", resizeThrottler, false);

  var resizeTimeout;

  function resizeThrottler() {
    if (!resizeTimeout) {
      resizeTimeout = setTimeout(function() {
        resizeTimeout = null;
        actualResizeHandler();
      }, 66);
    }
  }

  function actualResizeHandler() {
    $(".ui-dialog-content").dialog("option", "position", { my: "center", at: "center", of: window });
  }
}());