jquery ইউআই ডায়ালগ: একটি শিরোনাম বার ছাড়া আরম্ভ কিভাবে?

Question

কোনও শিরোনাম বার ছাড়া jQuery UI ডায়ালগ খোলা সম্ভব?

Answer 1

আমি মনে করি যে বিকল্পটি ব্যবহার করা সবচেয়ে ভাল সমাধান dialogClass।

Jquery UI ডক্স থেকে একটি নিষ্কাশন:

আর ডিআই এর সময়: $('.selector').dialog({ dialogClass: 'noTitleStuff' });

অথবা আপনি init পরে চাইলে। :

$('.selector').dialog('option', 'dialogClass', 'noTitleStuff');

সুতরাং আমি বিকল্প ডায়ালগক্লাস = 'noTitleStuff' এবং সিএসএস এর মতো কিছু সংলাপ তৈরি করেছি:

.noTitleStuff .ui-dialog-titlebar {display:none}

খুবই সহজ !! তবে আমার আগের আইডি-> ক্লাস ড্রিলিং পদ্ধতিটি কেন কাজ করছে না তা ভাবতে 1 দিন সময় নিয়েছি। প্রকৃতপক্ষে আপনি যখন .dialog()ডিভটি কল করেন তখন আপনি অন্য একটি ডিভ (আসল কথোপকথন ডিভ) এবং সম্ভবত ডিভের একটি 'ভাই' সন্তানের হয়ে ওঠেন titlebar, সুতরাং পূর্ববর্তীটি থেকে শুরু করে এটি সন্ধান করার পক্ষে খুব অসুবিধা হয়।

Comments

+1 জোনাটনের সমাধান নির্দিষ্ট কথোপকথনের জন্য কাজ করে না। আপনার কাজ।

— সিটনার

আমি মিজারের সাথে একমত এটি সর্বোত্তম সমাধান কারণ এই যে এটি আপনাকে সেই সংলাপ বাক্সগুলির সাথে সুনির্দিষ্ট করতে দেয় যা কেবলমাত্র আপনার ক্লাসটিকেই সংজ্ঞায়িত করে।

— কার্লোস পিন্টো

এই পদ্ধতির একমাত্র নেতিবাচকতা হ'ল ক্রোম যখন এটিকে একটি মডেল হিসাবে কনফিগার করা হয় তখন এই জাতীয় সংলাপের জন্য একটি উল্লম্ব স্ক্রোল বার যুক্ত করে, কারণ কোনওভাবে jQuery এর ইউআই-উইজেট-ওভারলে উচ্চতার ভুলভাবে গণনা শুরু করে ... আমি আরও গভীর খনন করি নি, এবং করিনি 'হ্যাকি {ওভারফ্লো: লুকানো

— from

ডায়ালগক্লাসটি jquery v 1.12 এ অবচয় করা হয়েছে এবং এটি ডায়ালগ বস্তুটিকে যেমন ইচ্ছা তেমন প্রভাবিত করে না।

— মিনি ফ্রিজ

ডায়ালগক্লাস বিকল্পটি ইউআই-ডায়ালগ বৈশিষ্ট্য ব্যবহার করে ক্লাস বিকল্পের পক্ষে অবহেলা করা হয়েছে।

— সন্দীপ সরোহা

Answer 2

আমি শিরোনাম দণ্ডটি গতিশীলরূপে অপসারণের জন্য একটি স্থির করেছি।

$("#example").dialog(dialogOpts);
// remove the title bar
$(".ui-dialog-titlebar").hide();

এটি ডায়ালগ বাক্সটি রেন্ডার হওয়ার পরে 'ui- সংলাপ-শিরোনামবার' শ্রেণীর সমস্ত উপাদান সরিয়ে ফেলবে।

Comments

... এবং সিএসএস বিকল্পগুলি তাদের আগে প্রদর্শিত কোনও সম্ভাবনা সরিয়ে দেয়। আমি নিশ্চিত নই যে আপনার বিকল্পে আমি কোনও লাভ দেখছি। বাস্তবে, আপনার বিকল্প আমি যা করেছি তা করতে চলেছে, কেবল একটি অতিরিক্ত পদক্ষেপ যুক্ত করে। সিএসএস-রুট যাওয়া আরও দ্রুত হবে।

— সাম্পসন

ভাল আমার বিকল্পটি কেবলমাত্র এই এক কথোপকথনের শিরোনাম বারটিকে সরিয়ে ফেলবে। আমি যদি আপনার বিকল্পটি ব্যবহার করি তবে আমি আমার সমস্ত কথোপকথনের শিরোনাম বারটি সরিয়ে ফেলব। আমি ভবিষ্যতে দেখতে পাচ্ছি যে আমার একটি শিরোনাম বার লাগবে।

— লুনি 2 এনজে

তাই আপনি যদি CSS-নিয়ম মধ্যে আপনার উপাদান অন্তর্ভুক্ত: #example .ui-dialog-titlebar...। এটি যেভাবেই কাজ করবে; তবে জাভাস্ক্রিপ্ট শেষ পর্যন্ত CSS সেট করতে চলেছে, তাই সিএসএস দিয়ে এটি না করার সুবিধা আমি দেখতে পাচ্ছি না। এটি আসলে কোনও তাত্পর্যপূর্ণভাবে আসে না - আপনি যেটি দিয়ে সবচেয়ে আরামদায়ক হন :)

— সাম্পসন

এটি কি কেবল আমি বা # উদাহরণের মধ্যে ডায়ালগ শিরোনামের সুযোগ নেই?

— রিও

@ রাইস ফ্লাওয়ার কুকিজ: ডায়ালগ () এর পরে .hide () আসতে হবে কারণ .ডায়ালগ () ডায়ালগের জন্য পৃষ্ঠাটিতে চিহ্নআপকে ইনজেক্ট করে। এই কল করার আগে পৃষ্ঠাটিতে এখনও কোনও সংলাপের উপাদান নেই।

— জেরেমি ওয়েইব

Answer 3

আমি বিশ্বাস করি আপনি এটি CSS সহ লুকিয়ে রাখতে পারবেন:

.ui-dialog-titlebar {
    display: none;
}

বিকল্পভাবে, আপনি dialogClassবিকল্পটি দিয়ে নির্দিষ্ট ডায়ালগগুলিতে এটি প্রয়োগ করতে পারেন :

$( "#createUserDialog" ).dialog({
    dialogClass: "no-titlebar"
});

.no-titlebar .ui-dialog-titlebar {
    display: none;
}

" থিমিং " ডায়ালগটি দেখুন । উপরের পরামর্শটি dialogClassবিকল্পটি ব্যবহার করে , যা মনে হয় এটি একটি নতুন পদ্ধতির পক্ষে রয়েছে।

Comments

হ্যাঁ আমি অনুমান করি যে এটি কার্যকর হবে তবে এটি একটি বিশ্বব্যাপী বিকল্প। আমি ভাবছিলাম বিকল্পগুলির সাথে এটি করার কোনও উপায় ছিল কিনা। আমার ধারণা, শিরোনাম ডিভটি দেখানোর আগে মুছে ফেলার জন্য আমি কিছু প্রাক রেন্ডারিং jquery'ness করতে পারি।

— লুনি 2 এনজে

না। আমি বিশ্বাস করি না এটি অপসারণের একটি বিকল্প আছে। ডিফল্টরূপে এটি ক্লোজ-বোতাম, সুতরাং এক অর্থে এটি প্রায় খারাপ-নকশা।

— সাম্পসন

লোকেরা যখন সিএসএস নিয়ে খুব বেশি কথা বলে, তারা মজা করে - মজার করে না

— bobobobo

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

— বোবোবোবু

আপনার যদি অন্য কোনও ইভেন্ট থাকে যা ডায়ালগটির ঘনিষ্ঠ পদ্ধতিটিকে ট্রিগার করে, তবে এমন ক্ষেত্রেও ঘটতে পারে যেখানে শিরোনাম বারে আপনার কাছে বন্ধ বোতামের প্রয়োজন নেই।

— কার্লোস পিন্টো

Answer 4

আমি আমার প্রকল্পগুলিতে এটি ব্যবহার করি

$("#myDialog").dialog(dialogOpts);
// remove the title bar
$("#myDialog").siblings('div.ui-dialog-titlebar').remove();
// one liner
$("#myDialog").dialog(dialogOpts).siblings('.ui-dialog-titlebar').remove();

Comments

আরও ভাল: শিরোনামবারটি সরিয়ে ফেলুন তবে বন্ধ বোতামটি নয়। এর কার্যকারিতা রাখুন। $(document).ready(function() { $('#video').click(function(){ $( "#dialog" ).dialog().siblings('.ui-dialog-titlebar').removeClass('ui-widget-header'); }); });

— এড্রিয়ান পি।

$("#myDialog").dialog('open').siblings('.ui-dialog-titlebar').remove();এই লাইনের

— কোডটির

অথবা আপনি কেবল পূর্ববর্তী ভাইবোনটির সন্ধান করতে পারেন, এটি শিরোনাম বার: .ui- ডায়ালগ-শিরোনামবার: $("#myDialog").prev().hide()বা $("#myDialog").prev(".ui-dialog-titlebar").hide()।

— অ্যান্ড্রু

ভোট দিন কারণ আমার দুটি ডিভ আছে, এবং আমি কেবল একটি লুকিয়ে রাখতে চেয়েছিলাম।

— মার্কাস বেকার

Answer 5

এটি আমার পক্ষে কাজ করেছে:

$("#dialog").dialog({
    create: function (event, ui) {
        $(".ui-widget-header").hide();
    },

Comments

এটি সমস্ত কথোপকথনে শিরোনামগুলি আড়াল করবে । নীচের আমার পরামর্শ (পরবর্তী উত্তর) এটি কেবলমাত্র খোলার কথোপকথনের জন্য করবে।

— উপাদান_15939

ভাল ... এর মানে বেস সিএসএস ক্লাসের কারণে আমাকে প্রতিটি ডায়ালগ গোপন করতে হবে না ... এর অর্থ হ'ল আমার ডায়ালগটি আলাদাভাবে সেটআপ করতে হবে এবং তারপরে শিরোনামটি সরিয়ে ফেলতে হবে না।

— গাওয়াশপ্পা

Answer 6

ব্যবহার করার চেষ্টা করুন

$("#mydialog").closest(".ui-dialog-titlebar").hide();

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

$(".ui-dialog-titlebar").hide();

Answer 7

আসলে ডায়ালগটি widgetসরাসরি ব্যবহার করে এটি করার আরও একটি উপায় রয়েছে :

আপনি এভাবে ডায়ালগ উইজেট পেতে পারেন

$("#example").dialog(dialogOpts);
$dlgWidget = $('#example').dialog('widget');

এবং তারপর না

$dlgWidget.find(".ui-dialog-titlebar").hide();

titlebarকেবলমাত্র সেই কথোপকথনের মধ্যে লুকিয়ে রাখতে

এবং কোডের একক লাইনে (আমি চেইন পছন্দ করি):

$('#example').dialog('widget').find(".ui-dialog-titlebar").hide();

এইভাবে কথোপকথনে অতিরিক্ত শ্রেণি যুক্ত করার দরকার নেই, সরাসরি এটিতে যান। আমার জন্য পরিশ্রম ভাল।

Answer 8

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

open: function() { $(this).closest(".ui-dialog").find(".ui-dialog-titlebar:first").hide(); }

সহজ।

Comments

আমি এই পদ্ধতিটি দিয়ে গিয়েছিলাম কিন্তু তৈরিটি ব্যবহার করেছি: ফাংশনটি যাতে এটি সর্বদা লুকানো থাকে, কেবল ডায়ালগটি প্রদর্শিত না হতেই। এটি ডায়ালগ থেকে সম্পূর্ণরূপে চলে গেছে তা নিশ্চিত করার জন্য আমি এটিকে .hide () এর পরিবর্তে একটি .রেভ () এ পরিবর্তন করেছি changed

— ক্রিস পোর্টার

Answer 9

ডায়ালগটি শুরু করার সময় ডায়লগক্লাস ব্যবহারের পরে শিরোনামবারটি আড়াল করতে আপনি jquery ব্যবহার করতে পারেন।

আর ডিআই এর সময়:

$('.selector').dialog({
    dialogClass: 'yourclassname'
});

$('.yourclassname div.ui-dialog-titlebar').hide();

এই পদ্ধতিটি ব্যবহার করে, আপনার সিএসএস ফাইল পরিবর্তন করার দরকার নেই এবং এটিও গতিশীল।

Comments

হ্যাঁ, এটি ছিল মিজারের সমাধান - আপনার নিজের 6 মাস আগে পোস্ট করা হয়েছিল।

— কর্ক ওল

আমি সম্মত, তবে তারপরে আপনাকে একটি সিএসএস এন্ট্রি যুক্ত করতে হবে যা সমাধানটিকে জটিল করে তুলবে। আমার পরামর্শটি কেবল jQuery ব্যবহার করে সমস্যার যত্ন নেয়।

— অরুণ বাসুদেব নায়ার

Answer 10

আমি jQuery উইজেটগুলি ওভাররাইড পছন্দ করি।

(function ($) {
    $.widget("sauti.dialog", $.ui.dialog, {
        options: {
            headerVisible: false
        },
        _create: function () {
            // ready to generate button
            this._super("_create"); // for 18 would be $.Widget.prototype._create.call(this);
            // decide if header is visible
            if(this.options.headerVisible == false)
                this.uiDialogTitlebar.hide();
        },
        _setOption: function (key, value) {
            this._super(key, value); // for 1.8 would be $.Widget.prototype._setOption.apply( this, arguments );
            if (key === "headerVisible") {
                if (key == false)
                    this.uiDialogTitlebar.hide();
                else
                    this.uiDialogTitlebar.show();
                return;
            }
        }
    });
})(jQuery);

সুতরাং আপনি এখন শিরোনাম বার প্রদর্শন করতে চান কিনা তা সেটআপ করতে পারেন

   $('#mydialog').dialog({
      headerVisible: false // or true
});

Answer 11

আপনার যদি একাধিক কথোপকথন থাকে তবে আপনি এটি ব্যবহার করতে পারেন:

$("#the_dialog").dialog({
        open: function(event, ui) { 
            //hide titlebar.
            $(this).parent().children('.ui-dialog-titlebar').hide();
        }
    });

Answer 12

এটি করার সবচেয়ে সহজ উপায় এটি কেবলমাত্র একটি নির্দিষ্ট ডায়ালগের শিরোনাম বারটি সরিয়ে ফেলবে;

$('.dialog_selector').find('.ui-dialog-titlebar').hide();

Answer 13

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

আমি যা করেছি তা এটি ব্যবহার করে ডিওএম থেকে সরানো হয়েছে $(selector).remove()। এখন স্ক্রিন পাঠক (এবং অন্য প্রত্যেকে) এটি দেখতে পাবেন না কারণ এটি আর বিদ্যমান নেই।

Answer 14

এটা চেষ্টা কর

$("#ui-dialog-title-divid").parent().hide();

dividসংশ্লিষ্ট দ্বারা প্রতিস্থাপনid

Answer 15

এই পরবর্তী ফর্মটি আমাকে সমস্যাটি স্থির করেছে।

$('#btnShow').click(function() {
  $("#basicModal").dialog({
    modal: true,
    height: 300,
    width: 400,
    create: function() {
      $(".ui-dialog").find(".ui-dialog-titlebar").css({
        'background-image': 'none',
        'background-color': 'white',
        'border': 'none'
      });
    }
  });
});

#basicModal {
  display: none;
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css" />
<div id="basicModal">
  Here your HTML content
</div>
<button id="btnShow">Show me!</button>

Answer 16

আমি মনে করি এটির সবচেয়ে শুদ্ধতম উপায় হ'ল একটি নতুন মাই ডায়ালগ উইজেট তৈরি করা, এতে ডায়ালগ উইজেট শিরোনাম বারের কোডটি থাকবে। শিরোনাম বার কোডটি এক্সাইজ করা সহজ দেখাচ্ছে looks

https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.dialog.js

Answer 17

এটি আমার জন্য ডায়লগ বাক্সের শিরোনাম বারটি লুকানোর জন্য কাজ করেছিল:

$(".ui-dialog-titlebar" ).css("display", "none" );

Answer 18

এটি এটি করা যেতে পারে কিভাবে।

থিমস ফোল্ডারে -> বেস -> jquery.ui.dialog.css খুলুন

অনুসন্ধান

অনুগামী

আপনি যদি শিরোনামবারটি প্রদর্শন করতে না চান তবে কেবল প্রদর্শন সেট করুন: নীচের মতো আমি কিছুই করি নি।

.ui dialog.ui-dialog .ui-dialog-titlebar 
{
    padding: .4em 1em;
    position: relative;
        display:none;
}

সম্মানের পাশাপাশি শিরোনাম জন্য।

.ui-dialog .ui-dialog-title {
    float: left;
    margin: .1em 0;
    white-space: nowrap;
    width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    display:none; 
}

এখন নিকটতম বোতামটি আসবে আপনি এটিকে কোনওটি সেট করতে পারবেন না বা এটি সেট করতে পারবেন

.ui-dialog .ui-dialog-titlebar-close {
    position: absolute;
    right: .3em;
    top: 50%;
    width: 21px;
    margin: -10px 0 0 0;
    padding: 1px;
    height: 20px;

   display:none;

}

আমি প্রচুর অনুসন্ধান করেছিলাম কিন্তু কিছুই তখন আমার মনে এই ধারণাটি পেয়ে গেল। তবে এটি পুরো অ্যাপ্লিকেশনটিকে ডায়লগের জন্য ক্লোজড বোতাম, শিরোনাম বার না রাখার জন্য প্রভাব ফেলবে তবে আপনি jquery ব্যবহার করে এবং jquery এর মাধ্যমে CSS যুক্ত করে সেট করে ফেলতে পারবেন

এখানে এটির জন্য বাক্য গঠন রয়েছে

$(".specificclass").css({display:normal})

Comments

এটি কাজ করে এবং এটি করা যেতে পারে তা বুঝতে সহায়ক, তবে আপনার যদি একাধিক .dialogs()এবং শুধুমাত্র 1 বা তার বেশি এই সেটিংগুলির প্রয়োজন হয়, তবে বিশ্বব্যাপী সেটিংগুলি প্রয়োগ করার পরিবর্তে বিকল্প পথ রয়েছে।

— শেফ_কোড

Answer 19

আমার জন্য, আমি এখনও পুনরায় আকারের কোণগুলি ব্যবহার করতে চেয়েছিলাম, কেবল তির্যক লাইনগুলি দেখতে চাইনি। আমি ব্যবহার করতাম

$(".ui-resizable-handle").css("opacity","0");

ঠিক বুঝতে পেরেছি আমি ভুল প্রশ্নে মন্তব্য করছি। আমার নাম রাখা :(

Answer 20

আপনি কি jQuery UI ডক্স থেকে সমাধানের চেষ্টা করেছেন? https://api.jqueryui.com/dialog/#method-open

যেমন এটি বলে যে আপনি এটি করতে পারেন ...

সিএসএসে:

.no-titlebar .ui-dialog-titlebar {
  display: none;
}

জেএসে:

$( "#dialog" ).dialog({
  dialogClass: "no-titlebar"
});

Answer 21

আপনি উপরে বর্ণিত টেকিনকগুলি দিয়ে ঘনিষ্ঠ আইকনযুক্ত বারটি সরিয়ে ফেলতে পারেন এবং তারপরে নিজেই একটি ঘনিষ্ঠ আইকন যুক্ত করতে পারেন।

সিএসএস:

.CloseButton {
background: url('../icons/close-button.png');   
width:15px;
height:15px;
border: 0px solid white;
top:0;
right:0;
position:absolute;
cursor: pointer;
z-index:999;
}

এইচটিএমএল:

var closeDiv = document.createElement("div");
closeDiv.className = "CloseButton";

// আপনার লিখিত বিষয়বস্তুটি ধারণ করে এই ডিভটি সংযুক্ত করুন

জাতীয়:

 $(closeDiv).click(function () {
         $("yourDialogContent").dialog('close');
     });

Answer 22

আপনার jquery-ui.js (আমার ক্ষেত্রে jquery-ui-1.10.3.custom.js) এ যান এবং এটি অনুসন্ধান করুন _ এবং এটি মন্তব্য।

এখন আপনার সংলাপের যে কেউ শিরোনাম সহ উপস্থিত হবে। আপনি যদি শিরোনামটি কাস্টমাইজ করতে চান তবে _ _CreateTitlebar () এ যান; এবং ভিতরে কোড সম্পাদনা করুন।

দ্বারা

Comments

এর মতো পরিবর্তনগুলি করা ভয়াবহ আপগ্রেড ব্যথার কারণ।

— usr