jQuery UI ডায়ালগ অবস্থান

Question

আমি যখন jQuery ডায়ালগটি ইউআই লাইব্রেরিটি ব্যবহার করার চেষ্টা করছি তখন কোনও পাঠ্যের পাশে ডায়ালগটি overedেকে রাখার জন্য এটি সজ্জিত করা হয়। JQuery ডায়ালগ একটি অবস্থানের প্যারামিটার নেয় যা বর্তমান ভিউপোর্টের উপরের বাম কোণ থেকে পরিমাপ করা হয় (অন্য কথায় [0, 0]এটি সর্বদা আপনার ব্রাউজার উইন্ডোর উপরের বাম কোণে রাখবে, আপনি যেখানে স্ক্রল করছেন তা নির্বিশেষে)। যাইহোক, অবস্থানটি পুনরুদ্ধার করার জন্য আমি একমাত্র উপায়টি হ'ল পুরো পৃষ্ঠাটির সাথে সম্পর্কিত উপাদানটি।

নিম্নলিখিতটি আমার কাছে বর্তমানে রয়েছে। position.top1200 বা তার মতো কিছু হিসাবে গণনা করা হয়, যা ডায়ালগটিকে পৃষ্ঠার বাকী সমস্ত সামগ্রীর নীচে রেখে দেয়।

$(".mytext").mouseover(function() {
    position = $(this).position();
    $("#dialog").dialog('option', 'position', [position.top, position.left]);
}

আমি কীভাবে সঠিক অবস্থানটি পেতে পারি?

ধন্যবাদ!

Comments

সংস্করণ 1.9 হিসাবে একটি নেটিভ টুলটিপ উইজেট রয়েছে।

— theblang

Answer 1

একটি ডায়ালগের অন্যান্য বাস্তবায়নের জন্য কিছু jQuery প্লাগইন পরীক্ষা করে দেখুন। ক্লুটিপটি বৈশিষ্ট্য সমৃদ্ধ টুলটিপ / ডায়ালগ স্টাইল প্লাগ-ইন হিসাবে উপস্থিত রয়েছে। ৪ র্থ ডেমোটি আপনি যা করার চেষ্টা করছেন তার অনুরূপ (যদিও আমি দেখতে পাচ্ছি যে এটির সুনির্দিষ্ট অবস্থানের বিকল্পটি আপনি খুঁজছেন না))

Comments

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

— JohnK

Answer 2

বিকল্প হিসাবে, আপনি jQuery UI Positionইউটিলিটি যেমন ব্যবহার করতে পারেন

$(".mytext").mouseover(function() {
    var target = $(this);
    $("#dialog").dialog("widget").position({
       my: 'left',
       at: 'right',
       of: target
    });
}

Comments

এটি সর্বোত্তম পন্থা। তবে আমি খেয়াল করব, আপনি যদি প্রথমবারের মতো ডায়ালগটি তৈরি করেন তবে আপনার এটি dialogপছন্দ করতে একটি অতিরিক্ত কল প্রয়োজন :$('#dialog').dialog({ width: 300 /* insert your options */ }).dialog('widget').position({ my: 'left', at: 'right', of: $(this) });

— wsanville

JQuery UI অবস্থানের ইউটিলিটি লুকানো উপাদানগুলিতে কাজ করে না তাই আপনাকে এই কোডটি নিয়ে অবস্থানের আগে ডায়ালগটি খুলতে হবে।

— Toadmyster

jQuery UI এটি করার সর্বোত্তম উপায়। স্কট গনজেলেজের কীভাবে jQuery ইউআই কাজ করে এবং কীভাবে এটি ব্যবহার করবে তার গভীরতর ব্যাখ্যা রয়েছে

— অদ্ভুতরূপে

আমি এটি বিভ্রান্তিকর বলে মনে করি যে এটি হওয়া উচিত: at: 'top+50'পরিবর্তেat: 'top + 50'

— ল্যামি

যে কোনও লড়াইয়ের জন্য (যেমন আমি ঠিক ছিলাম) কীভাবে একাধিক অবস্থান নির্ধারণ করা উচিত তা এই জাতীয়: $('dialog').dialog({ position: { my: 'left top', at: 'left+50 top+50'}, });

— মিলপুল

Answer 3

উপরের কয়েকটি উত্তরের জন্য ধন্যবাদ, আমি পরীক্ষা-নিরীক্ষা করে শেষ পর্যন্ত দেখতে পেলাম যে আপনাকে যা করতে হবে তা হল মোডাল ডায়ালগের সংজ্ঞাতে "অবস্থান" বৈশিষ্ট্যটি সম্পাদনা করা:

position:['middle',20],

আনুভূমিক "এক্স" মানের জন্য "মধ্যম" পাঠ্যটিতে জিকিউরির কোনও সমস্যা ছিল না এবং আমার ডায়লগটি মাঝখানে পপ আপ হয়ে গেছে, উপরে থেকে 20px নীচে।

আমি JQuery হৃদয়।

Comments

কোনও অতিরিক্ত প্লাগইন এবং স্বজ্ঞাত ছাড়া কাজ করে। আমি দেখেছি সেরা সমাধান।

— প্ল্যানেট অজানা

কোনও অতিরিক্ত প্লাগইন ছাড়াই কল্পিতভাবে সহজ সমাধান। এটি গ্রহণযোগ্য উত্তর হওয়া উচিত।

— কমুই

ডার্ন, এটি দুর্দান্ত তবে এটি অবনমিত হয়েছে- "দ্রষ্টব্য: স্ট্রিং এবং অ্যারে ফর্মগুলি অবচয় করা হয়েছে।" api.jqueryui.com/dialog/#option-p स्थिति তাই আপনাকে আমার / এট / অব থিমি পজিশন অবজেক্টটি ব্যবহার করতে হবে। "JQuery UI অবস্থান" সম্পর্কে লিঙ্কটি দেখুন। আপনি যেমন পজিশনের মতো কিছু পেতে পারেন: want আমার: "সেন্টার টপ", এ: "সেন্টার টপ + 20", এর: উইন্ডো you আপনার পছন্দ মতো কাজ করতে। আরও উদাহরণের জন্য লিঙ্ক দেখুন।

— মিকাতো

@ মিকাতো ... jquery ui 1.10 অনুসারে , অবস্থান স্ট্রিং এবং অ্যারে গ্রহণ করে না। ... ... তবে আমি এখনও অবজেক্টের স্বরলিপিটি পছন্দ করি (আমি কীগুলি পছন্দ করি)।

— dsdsdsddd

আমি বিশ্বাস করতে পারি না যে কেবলমাত্র একটি ডায়ালগ পপআপ স্থাপনের জন্য আপনার এত কোড দরকার।

— Gi1ber7

Answer 4

সমস্ত উত্তর পড়ার পরে, এটি অবশেষে আমার পক্ষে কাজ করেছে:

$(".mytext").mouseover(function() {
    var x = jQuery(this).position().left + jQuery(this).outerWidth();
    var y = jQuery(this).position().top - jQuery(document).scrollTop();
    jQuery("#dialog").dialog('option', 'position', [x,y]);
});

Comments

এই উত্তরটি আমার পক্ষে কাজ করেছে এবং অন্যান্য সমাধানগুলি কীভাবে সেটআপ করবেন তা সম্ভবত আমার বেশ কয়েক মিনিট / ঘন্টা গুগল করে বাঁচিয়েছিল। ধন্যবাদ!

— নাথান

+1 এটি আমাকে অনেক সাহায্য করেছিল যখন আমি বুঝতে পেরেছিলাম। অবস্থান () আপেক্ষিক অবস্থান দেয় এবং। অফসেট () দেয়, পরম অবস্থান (আমার যা প্রয়োজন)

— ড্যানিলোকিও

Answer 5

জয়মিনের উদাহরণটি আরও একধাপ এগিয়ে নিয়ে যাওয়া, আমি সবেমাত্র যে উপাদানটি ক্লিক করেছি (উপরে "স্পিচ বুদ্বুদ" ভাবেন) তার উপরে একটি jQuery ইউআই-ডায়ালগ উপাদান স্থাপনের জন্য আমি এটি নিয়ে এসেছি:

$('#myDialog').dialog( 'open' );
var myDialogX = $(this).position().left - $(this).outerWidth();
var myDialogY = $(this).position().top - ( $(document).scrollTop() + $('.ui-dialog').outerHeight() );
$('#myDialog').dialog( 'option', 'position', [myDialogX, myDialogY] );

মনে রাখবেন যে আপেক্ষিক প্রস্থ এবং উচ্চতার অফসেটগুলি গণনা করার আগে আমি ইউআই-ডায়ালগ উপাদানটি "খুলি"। এর কারণ jQuery পৃষ্ঠাতে ইউআই-ডায়ালগ উপাদানটি শারীরিকভাবে প্রদর্শিত না হয়ে আউটারউইথ () বা আউটআর হাইট () মূল্যায়ন করতে পারে না।

আপনার কথোপকথনের বিকল্পগুলিতে 'মডেল' মিথ্যাতে সেট করা নিশ্চিত হয়ে নিন এবং আপনার এক-ওকে হওয়া উচিত।

Comments

আমি মনে করি আপনার দুটি ভেরিয়েবলগুলি বোঝানো হয়েছে myDialogXএবংmyDialogY

— কেসি

Answer 6

http://docs.jquery.com/UI/API/1.8/Dialog

বাম উপরের কোণে স্থির কথোপকথনের উদাহরণ:

$("#dialogId").dialog({
    autoOpen: false,
    modal: false,
    draggable: false,
    height: "auto",
    width: "auto",
    resizable: false,
    position: [0,28],
    create: function (event) { $(event.target).parent().css('position', 'fixed');},
    open: function() {
        //$('#object').load...
    }
});

$("#dialogOpener").click(function() {
    $("#dialogId").dialog("open");
});

Comments

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

— ব্যবহারকারী 734028

আমার কোনও ক্লু নেই, এটি অনেক আগেই: ডি

— xhochn

Answer 7

আপনার পরীক্ষা করুন <!DOCTYPE html>

আমি লক্ষ্য করেছি যে যদি আপনি মিস করেন তবে <!DOCTYPE html> আপনার এইচটিএমএল ফাইলের উপরের অংশটি থেকে ডায়ালগটি ডকুমেন্টের সামগ্রীতে উইন্ডোতে নয়, যদি আপনি অবস্থানটি নির্দিষ্ট করে থাকেন: {আমার: 'কেন্দ্র', 'কেন্দ্রে' , এর: উইন্ডো}

EG: http://jsfiddle.net/npbx4561/ - রান উইন্ডো থেকে সামগ্রীটি অনুলিপি করুন এবং ডকটাইপ সরান। এইচটিএমএল হিসাবে সংরক্ষণ করুন এবং সমস্যাটি দেখতে রান করুন।

Comments

এটি ছিল আমার আসল সমস্যা এবং এটি এটি স্থির করেছে।

— ববরোডস

আমার এক্সএমএল ট্রান্সফর্মটি ডক্টাইপ যুক্ত করতে ব্যর্থ হয়েছিল, এই উত্তরটি সহ: stackoverflow.com/questions/3387127/set-html5-doctype-with-xslt আমার কাছে জিনিসগুলি ঘূর্ণায়মান।

— ড্যানিয়েল বুভার

আমি এই দুর্দান্ত উত্তরের জন্য 1 টিরও বেশি আপগেট চেয়েছি। এটি আমার সমস্যাটি স্থির করেছে যার জন্য আমি ঘন্টার পর ঘন্টা লড়াই করছি।

— ডাঃ ডিএস

Answer 8

এটিকে নিয়ন্ত্রণের ডানদিকে রাখতে, আপনি এই কোডটি ব্যবহার করতে পারেন:

    $("#dialog-edit").dialog({
...    
        position: { 
            my: 'top',
            at: 'top',
            of: $('#myControl')
        },

...
    });

Answer 9

$(".mytext").mouseover(function() {
   var width = 250;
   var height = 270;
   var posX = $(this).offset().left - $(document).scrollLeft() - width + $(this).outerWidth();
   var posY = $(this).offset().top - $(document).scrollTop() + $(this).outerHeight();
   $("#dialog").dialog({width:width, height:height ,position:[posX, posY]});
}

একটি উপাদানটির ঠিক নীচে ডায়ালগ স্থাপন করে। আমি কেবল অফসেট () ফাংশনটি ব্যবহার করেছি কারণ এটি ব্রাউজারের উপরের বাম কোণার সাথে সম্পর্কিত অবস্থান গণনা করে তবে অবস্থান () ফাংশন প্যারেন্ট ডিভের সাথে সম্পর্কিত অবস্থানটি গণনা করে বা উপাদানটির পিতামহিকে iframe করে।

Answer 10

খাঁটি jquery করার পরিবর্তে, আমি করব:

$(".mytext").mouseover(function() {
    x= $(this).position().left - document.scrollLeft
    y= $(this).position().top - document.scrollTop
    $("#dialog").dialog('option', 'position', [y, x]);
}

যদি আমি আপনার প্রশ্নটি সঠিকভাবে বুঝতে পারি তবে আপনার কোডটি ডায়ালগটিকে এমনভাবে অবস্থান করছে যাতে পৃষ্ঠাটির কোনও স্ক্রোল নেই তবে আপনি চান যে এটি স্ক্রোলটিকে অ্যাকাউন্টে নেবে। আমার কোড এটি করা উচিত।

Comments

কোনও কারণে, ডকুমেন্ট.স্ক্রোলফুটটি আমার জন্য অপরিজ্ঞাত।

— উইকেটহিয়েভ

আমার খারাপ, এর স্ক্রোল লেফট স্ক্রোলটি শীর্ষস্থানীয় করতে ভুলে গেছে

— স্যামুয়েল

var x = el.position ()। বাম + el.outerWidth (); var y = el.position ()। শীর্ষ - $ (নথি)। স্ক্রোলটপ (); আমার জন্য কাজ। সমস্যাটি হ'ল আমি ডায়ালগটিতে তথ্য পরিবর্তন করার পরে উচ্চতা এবং প্রস্থটি পেতে পারি না।

— rball

Answer 11

এই পৃষ্ঠাটি কীভাবে আপনার স্ক্রোলটি অফসেট নির্ধারণ করবে তা দেখায়। jQuery এর একই কার্যকারিতা থাকতে পারে তবে আমি এটি খুঁজে পেলাম না। পৃষ্ঠায় প্রদর্শিত getScrolXY ফাংশনটি ব্যবহার করে, আপনি। অবস্থান () ফলাফলগুলি থেকে x এবং y ক্রমিকগুলি বিয়োগ করতে সক্ষম হবেন।

Answer 12

কিছুটা দেরি হলেও আপনি এখন এটি $ j (অবজেক্ট)। অফসেট ()। বাম এবং .টপ অনুসারে ব্যবহার করে করতে পারেন।

Answer 13

আমি মনে করি না স্পিচ বুদবুদটি বেশ সঠিক। আমি এটিকে কিছুটা টুইট করেছি যাতে এটি কাজ করে এবং আইটেমটি লিঙ্কের নীচে খোলে।

function PositionDialog(link) {
    $('#myDialog').dialog('open');
    var myDialogX = $(link).position().left;
    var myDialogY = $(link).position().top + $(link).outerHeight();
    $('#myDialog').dialog('option', 'position', [myDialogX, myDialogY]);
}

Answer 14

কেন্দ্রের অবস্থান ঠিক করতে, আমি ব্যবহার করি:

open : function() {
    var t = $(this).parent(), w = window;
    t.offset({
        top: (w.height() / 2) - (t.height() / 2),
        left: (w.width() / 2) - (t.width() / 2)
    });
}

Answer 15

এখানে কোডটি .., কীভাবে jQuery UI কথোপকথনকে কেন্দ্রে রাখবেন ......

var $about = $("#about");

   $("#about_button").click(function() {
      $about.dialog({
         modal: true,
         title: "About the calendar",
         width: 600,         
         close: function() {
            $about.dialog("destroy");
            $about.hide();
         },
         buttons: {
            close : function() {
               $about.dialog("close");
            }
         }
      }).show();

      $about.dialog("option", "position", 'center');

   });

Answer 16

$("#myid").dialog({height:"auto",
        width:"auto",
        show: {effect: 'fade', speed: 1000},
        hide: {effect: 'fade', speed: 1000},
        open: function( event, ui ) {
          $("#myid").closest("div[role='dialog']").css({top:100,left:100});              
         }
    });

Answer 17

আপনি ব্যবহার করতে পারেন $(this).offset(), অবস্থান পিতামাতার সাথে সম্পর্কিত

Answer 18

আমি প্রস্তাবিত সমস্ত সমাধান চেষ্টা করেছি তবে সেগুলি কাজ করবে না কারণ ডায়লগটি মূল নথির অংশ নয় এবং এর নিজস্ব স্তর থাকবে (তবে আমার শিক্ষিত অনুমানটি থ্যাঙ্ক করে)।

1. এর সাথে সংলাপটি সূচনা করুন $("#dialog").dialog("option", "position", 'top')
2. এটি দিয়ে খুলুন $(dialog).dialog("open");

3. তারপরে প্রদর্শিত ডায়লগের x এবং y পান (নথির অন্য কোনও নোড নয়!)

   var xcoord = $(dialog).position().left + ADD_MODIFIER_FOR_X_HERE;

   var ycoord= $(dialog).position().top + ADD_MODIFIER_FOR_Y_HERE;

   $(dialog).dialog('option', 'position', [xcoord , ycoord]);

এই স্থানাঙ্কগুলি ডায়ালগ থেকে ডকুমেন্ট থেকে নয় এবং অবস্থানটি ডায়ালগের স্তর অনুসারে পরিবর্তিত হয়।

Answer 19

আমি আমার ডায়লগটি পৃষ্ঠায় কেন্দ্রীভূত করার জন্য অনেক উপায়ে চেষ্টা করেছি এবং দেখেছি কোডটি:

$("#dialog").dialog("option", "position", 'top')

এটি তৈরি করার সময় ডায়ালগের অবস্থানটি কখনই পরিবর্তন করবেন না।

পরিবর্তে, আমি পুরো কথোপকথনটি পেতে নির্বাচক স্তরটি পরিবর্তন করি।

$("#dialog").parent() <- এটি ডায়ালগ () ডায়মনে ফাংশন তৈরি করে এমন প্যারেন্ট অবজেক্ট, এটি কারণ নির্বাচক $ ("# ডায়ালগ") উপরে, বাম দিকের বৈশিষ্ট্যগুলি প্রয়োগ করে না।

আমার কথোপকথনটি কেন্দ্র করতে, আমি jQuery- ক্লায়েন্ট-কেন্দ্রিককরণ-প্লাগইন ব্যবহার করি

$ ( "# ডায়ালগ") পিতা বা মাতা () centerInClient ()।।

Answer 20

উপরের সমাধানগুলি খুব সত্য ... তবে উইন্ডোটি পুনরায় আকার দেওয়ার পরে ইউআই ডায়ালগটি অবস্থান ধরে রাখে না। কোডের নীচে এটি করে

            $(document).ready(function(){

                $(".test").click(function(){
                            var posX = $(".test").offset().left - $(document).scrollLeft() + $(".test").outerWidth();
                            var posY = $(".test").offset().top - $(document).scrollTop() + $(".test").outerHeight();
                            console.log("in click function");
                            $(".abc").dialog({
                                position:[posX,posY]
                            });

                        })

            })

            $(window).resize(function(){
                var posX=$(".test").offset().left - $(document).scrollLeft() + $(".test").outerWidth();
                var posY = $(".test").offset().top - $(document).scrollTop() + $(".test").outerHeight();

            $(".abc").dialog({
                                position:[posX,posY]
                            });
            })

Answer 21

আপনি কেন্দ্রের প্রদর্শনের জন্য শৈলীতে শীর্ষ অবস্থান নির্ধারণ করেছেন, কোডটি দেখেছেন:

.ui- ডায়ালগ {শীর্ষ: 100px! গুরুত্বপূর্ণ;

এই স্টাইলটি ডায়ালগ বাক্সটি শীর্ষ থেকে 100px বেলো দেখানো উচিত।