jQueryUI টুলটিপস টুইটার বুটস্ট্র্যাপের সাথে প্রতিযোগিতা করছে

Question

নিম্নলিখিত কোডটি দিয়ে অবশেষে কাজ করার জন্য আমি কয়েকটি সরঞ্জাম টিপস পেতে সক্ষম হয়েছি :

<a href="#" rel="tooltip" title="Tool tip text here">Hover over me</a>

এবং তারপর

<script>
    $('[rel=tooltip]').tooltip();
</script>

আমি যে সমস্যাটি চালাচ্ছি তা হ'ল এটি বুটস্ট্র্যাপের পরিবর্তে jQueryUI সরঞ্জামদণ্ডগুলি (কোনও তীরচিহ্ন নয়, বড় কুৎসিত টুলটিপস) ব্যবহার করছে।

JQueryUI এর পরিবর্তে বুটস্ট্র্যাপ টুলটিপস ব্যবহার করতে আমাকে কী করতে হবে?

Comments

আপনার কি দুটি জিনিস থাকা দরকার?

— ম্যাট

নাহ ... আমি ঠিক বুটস্ট্র্যাপ টুলটিপস নিতে চাই।

— মার্কডটনেট

দুঃখিত, আমি বোঝাতে চাইছি আপনার জিকিউরি ইউআই এবং বুটস্ট্র্যাপ থাকা দরকার?

— ম্যাট

এটি আমার জন্য কাজ করেছে, এই উত্তরটি দেখুন

— পঞ্চো

@ মার্কডোটনেট: ভুল। বুটস্ট্র্যাপের মূল জিকুয়ের লাইব্রেরি প্রয়োজন, জিকুয়েরি.উআই নয় ।

— ইয়ান কেম্প

Answer 1

JQuery UI এবং বুটস্ট্র্যাপ উভয়ই tooltipপ্লাগইনটির নামের জন্য ব্যবহার করে। ব্যবহারের $.widget.bridgejQuery এর UI 'তে সংস্করণের জন্য একটি আলাদা নাম তৈরি ও বুটস্ট্র্যাপ নামে টুলটিপ থাকার প্লাগ ইন করার অনুমতি (ব্যবহার করার চেষ্টা noConflictবুটস্ট্র্যাপ বিকল্পটি উইজেট মাত্র ত্রুটি অনেক স্থাপিত হয়েছে কারণ এটি সঠিকভাবে কাজ করে না; যে সমস্যা এখানে রিপোর্ট করা হয়েছে ):

// Resolve name collision between jQuery UI and Twitter Bootstrap
$.widget.bridge('uitooltip', $.ui.tooltip);

সুতরাং এটি কার্যকর করার কোড:

// Import jQuery UI first
<script src="/js/jquery-ui.js"></script>
// Resolve name collision between jQuery UI and Twitter Bootstrap
$.widget.bridge('uitooltip', $.ui.tooltip);
// Then import bootstrap
<script src="js/bootstrap.js"></script>

দুর্দান্ত কপি পেস্ট কোড যা বোতামের বিরোধকেও পরিচালনা করে:

<script type="application/javascript" src="/js/jquery.js"></script>
<script type="application/javascript" src="/js/jquery-ui.js"></script>
<script>
/*** Handle jQuery plugin naming conflict between jQuery UI and Bootstrap ***/
$.widget.bridge('uibutton', $.ui.button);
$.widget.bridge('uitooltip', $.ui.tooltip);
</script>
<script type="application/javascript" src="/js/bootstrap.js"></script>

Comments

আমি এটি চেষ্টা করার পরে আমি একটি জেএস ত্রুটি পেয়েছি। 'undefined' is not an object (evaluating '$.widget.bridge')

— covard

কোভর - আপনি কি নিশ্চিত করেছেন যে আপনি সমস্ত এসআরসি স্ক্রিপ্টগুলি আমদানি করেছেন? এবং আপনি libs এর নতুন সংস্করণ ব্যবহার করছেন?

— ডেমজ

@ কোভার্ড: এটি গুরুত্বপূর্ণ যে আপনি প্রথমে jquery-ui আমদানি করুন, তারপরে এটি করুন bridgeএবং তারপরে বুটস্ট্র্যাপ আমদানি করুন।

— জোশুয়া মুহিম

একটি সমাধান যা আপনার কাছে সমস্ত কিছু বান্ডিল এবং মিনিফাইন্ড করা থাকলে একটি ব্যথা হয় .. এই স্ক্রিপ্টটিকে কোনওভাবেই অভ্যন্তরে রাখার উপায় নেই .. অভিহিত, নাম সংঘর্ষের আবর্জনা।

— পাইটর কুলা

আপনি যদি মিনিফাইড কোড সহ ওয়েবপ্যাক বান্ডিল ব্যবহার করেন তবে আপনি বুটস্ট্র্যাপ.জেএস এর আগে jquery-ui রাখতে পারেন

— রাজ

Answer 2

একটি সহজ সমাধান হল jquery-ui.js এর পরে বুট্র্যাপ.জেএস লোড করা, যাতে বুটস্ট্র্যাপ। টলটিপ পদ্ধতিটি প্রাধান্য পায়।

Comments

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

— পল

একদিন আপনি এই জাতীয় পদ্ধতির ব্যবহার করে ডায়লগগুলিতে ক্লোজ-আইকন মিস করবেন। stackoverflow.com/questions/17367736/...

— Oleksii Kyslytsyn

এই সমাধানটি আমার পক্ষে কার্যকর হয়নি। ক্রোম ব্যবহার করে, আমি পৃষ্ঠাটি "ক্যাশে ও হার্ড রিফ্রেশ" করবো এবং টুলটিপটি কখনও কখনও কাজ করবে এবং তারপরে কখনও কখনও হবে না (কনসোল.লগে কোনও ত্রুটি নেই)। রিফ্রেশ 30 বার উত্পাদন ফলাফল 7 বার। আমি তখন গিয়ে একটি কাস্টমাইজড jQuery UI প্যাকেজটি ডাউনলোড করেছি এবং এখন যখন আমি 30 বার "ক্যাশে এবং হার্ড রিফ্রেশ" সাফ করি, তখন 0 টি ত্রুটি সহ 30 বার কাজের ফলাফল পাচ্ছি। আমি যুক্ত করব যে আমি প্রয়োজনীয়.js ব্যবহার করছি যাতে আমি গ্রন্থাগারগুলি লোড হওয়া ক্রমটি সহজেই নিয়ন্ত্রণ করতে পারি।

— এইচপিডাব্লুডি

আমি আপনাকে এই সহজ লজিক্যাল ফিক্সের জন্য ভালোবাসি

— মিলিন্ড

Answer 3

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

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

কেবলমাত্র "টুলটিপ" বিকল্পটি চেক করুন এবং এটি ডাউনলোড করুন (এটি "jquery-ui-1.10.4.custom.js" এর মতো কিছু হবে)।

আপনি বর্তমানে যে সংস্করণটি ব্যবহার করছেন তার পরিবর্তে এটি কেবল আপনার প্রকল্পে যুক্ত করুন এবং আপনি পার্টি করতে প্রস্তুত are এতে দ্বন্দ্ব এড়ানো যাবে। এটি আমার কাছে কবজির মতো কাজ করেছিল!

Comments

সুতরাং আপনি কি এখনও প্রতি বাহুর মতো সরঞ্জাম ব্যবহারের পরিবর্তে প্রতি হাত থেকে সম্পদ ফাইলগুলি ডাউনলোড করেন? আপনি কীভাবে সাধারণভাবে তৃতীয় পক্ষের লাইব্রেরি ইনস্টল করবেন? গুগলে অনুসন্ধান করুন এবং এটি কোনও সাইট থেকে ডাউনলোড করবেন?

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

আমি কীভাবে বুটস্ট্র্যাপ টুলটিপটি ব্যবহার করতে চাই না তবে এর পরিবর্তে ইউআই এক .. তারা যে কোনওভাবেই সমস্যাটি সৃষ্টি করে।

— পাইটর কুলা

সহজ, সহজ, আমার পরিস্থিতির জন্য দুর্দান্ত কাজ করেছে। ধন্যবাদ! +1

— ক্রিস কেম্পেন

আমার জন্য

— পরিশ্রম করেছেন

সর্বাধিক যুক্তিসঙ্গত উত্তর, যতক্ষণ না এটি কেবল প্রয়োজনীয় কার্যকারিতা গ্রহণ করার পরামর্শ দেয়। ধন্যবাদ

— ওলেকসেই ক্যাস্লিয়েটসিন

Answer 4

যদি আপনি লোড করা উচিত jquery-ui.jsপর bootstrap.jsএখানে এটা কিভাবে করতে হবে:

<script type="application/javascript" src="/js/jquery.js"></script>
<script type="application/javascript" src="/js/bootstrap.js"></script>

<script>var _tooltip = jQuery.fn.tooltip;</script>
<script type="application/javascript" src="/js/jquery-ui.js"></script>
<script>jQuery.fn.tooltip = _tooltip;</script>

এটি jquery-ui এর টুলটিপকে ওভাররাইড করবে এবং সর্বদা বুটস্ট্র্যাপ ব্যবহার করবে।

Comments

আপনার সমাধানে ইউআই টুলটিপ বুটস্ট্র্যাপের সাহায্যে ওভাররাইট করা হবে তবে কোনও দেহ ওভাররাইট করতে না চাইলে পূর্ববর্তী সমাধানটি ব্যবহার করতে হবে

— প্রজেশ পাল

একদিন আপনি এই জাতীয় পদ্ধতির ব্যবহার করে ডায়লগগুলিতে ক্লোজ-আইকন মিস করবেন। stackoverflow.com/questions/17367736/...

— Oleksii Kyslytsyn

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

— ইভান ফেরার 18

Answer 5

ধরে নিই যে বুটস্রেপ শুরু করার পরে ইউআই কল করবে

ইউআই সূচনা হওয়ার ঠিক আগে বুটস্ট্র্যাপ ফাংশন সংরক্ষণ করুন

jQuery.fn.bstooltip = jQuery.fn.tooltip; 

তারপরে নিম্নলিখিত হিসাবে কল করুন

$('.targetClass').bstooltip();

Comments

অফিসিয়াল উপায় $.fn.bstooltip = $.fn.tooltip.noConflict();

— আইগোর জেরোসিমি

Answer 6

এই সমাধানটি আমার পক্ষে বেশ কার্যকর বলে মনে হচ্ছে।

// handle jQuery plugin naming conflict between jQuery UI and Bootstrap
$.widget.bridge('uibutton', $.ui.button);
$.widget.bridge('uitooltip', $.ui.tooltip);

Answer 7

পরিবর্তে বুটস্ট্র্যাপ পপওভারগুলি কীভাবে ব্যবহার করবেন? বিএস পপওভারগুলি একই টুলটিপ.জেএস উপাদানগুলির প্রয়োজন পরেও একই বিবাদ তৈরি করে না। হ্যাঁ, তারা আরও স্টাইলাইজড তবে আমার জিকুয়েরি ইউআই বোতামগুলিকে দুর্বল করে না।

আমি কেবল কাস্টম স্বতঃপূরণ / কম্বোবক্সের জন্য জ্যাকিউরি ইউআই ব্যবহার করছি (সুতরাং অন্যান্য জিকিউ-ইউআই নিয়ন্ত্রণগুলি ঠিক আছে দাবি করতে পারে না) এবং বিএস টুলটিপস চালু করার সময় উপরের কোনওটি কম্বোবক্স বোতামগুলিতে "আনস্টাইল" হওয়ার সিএসএস সমস্যা সমাধানের কাজ করেনি। বিএস পপওভারগুলিতে স্যুইচিংয়ের সাথে মূলত একই প্রভাব সরবরাহ করা হয়েছে কোনও বিবাদ, আমার স্ক্রিপ্ট আমদানির কোনও পুনরায় অর্ডারিং এবং কোনও স্পষ্ট সেতু বিবৃতি প্রয়োজন নেই needed

Comments

— এটির

টিপটির জন্য ধন্যবাদ, আমি সম্মত, এটি একটি জটিল যে সমস্ত জটিলতা এড়ায়।

— টম

হ্যাঁ মানুষ, সমস্ত একজন দুঃস্বপ্নগুলি সমাধান করে একটি লেবুর মতো শ্বেত খুঁজছেন!

— পাইটর কুলা

পপওভারগুলির কি প্রাক-রেক হিসাবে সরঞ্জামদণ্ডের প্রয়োজন নেই?

— মিঃকোবায়েশি

Answer 8

ব্যবহার করার চেষ্টা করুন jQuery.noConflict () দেখুন এবং দেখুন এটি আপনাকে আদৌ সহায়তা করে কিনা। দেখে মনে হচ্ছে বুটস্ট্র্যাপ এবং jQuery একই নাম স্থান ব্যবহার করছে এবং সম্ভবত বুটস্ট্র্যাপ এবং jQuery টুলটিপস একই ফাংশনে লোড হয়ে যায়, বা একটি প্রথমে লোড হয়ে যায়।

প্রথমে কোন লাইব্রেরি লোড করা হয়েছে তা পরীক্ষা করে দেখতে পারেন। সাধারণত আপনি যদি জাভাস্ক্রিপ্টে দু'বার একই ফাংশনটি ঘোষণা করেন তবে দ্বিতীয়টি ব্যবহৃত হয়।

তৃতীয়ত, jQueryUI প্যাকেজটি পরীক্ষা করুন ( তাদের ওয়েবসাইটে) এবং দেখুন যে আপনি এমন কোনও সংস্করণ ডাউনলোড করতে পারেন যা সরঞ্জামটিপস অন্তর্ভুক্ত না করে (আমি পরীক্ষা করে দেখেছি এবং এটি সম্পূর্ণভাবে কার্যকর)।

Comments

সুতরাং এটি অদ্ভুত ... আমি একই ক্রমে জাভাস্ক্রিপ্ট লাইব্রেরিগুলি লোড করছি তবে যখন আমার সমস্যা হচ্ছে তখন আমি আমার <body> ট্যাগ এবং আমার সমস্ত সামগ্রীর পরে বুটস্ট্র্যাপ.জেএস এর আগে jquery-ui লাইব্রেরিটি লোড করছিলাম। আমি আমার কন্টেন্টের উপরে বুটস্ট্র্যাপ.জেগুলি সরিয়েছি (তবে এখনও jquery-ui.js এর পরে) এবং এখন এটি আমার প্রত্যাশা মতো সরঞ্জামদণ্ডগুলি উপস্থাপন করছে। আমি আশা করি এটি আমার ওয়েবসাইটের মহাবিশ্বকে বিশৃঙ্খলা করবে না। আমি ভেবেছিলাম পারফরম্যান্সের কারণে সামগ্রীর পরে জাভাস্ক্রিপ্টটি লোড করা ভাল অনুশীলন ... অদ্ভুত।

— মার্কডোটনেট

এটা সেরা অনুশীলন। বুটস্ট্র্যাপের শীর্ষে থাকা দরকার হতে পারে?

— ম্যাট

বুটস্ট্র্যাপ জেএস অবশ্যই পৃষ্ঠার শীর্ষে থাকা দরকার নেই।

— পল ফিলিপস

Answer 9

একটি সহজ এবং ভাল সমাধান রয়েছে, কেবল আপনার বুটস্ট্র্যাপ এবং jquery ui ফাইলের লিঙ্কটি পুনরায় সাজান:

 <script src="/js/jquery-ui.min.js" type="text/javascript"></script>
 <script src="/js/bootstrap.min.js" type="text/javascript"></script>

বুস্ট্র্যাপ জেএস ফাইল লোড করার আগে কেবল jQueryui লোড করুন। এটা আমার জন্য কাজ।

Comments

একদিন আপনি এই জাতীয় পদ্ধতির ব্যবহার করে ডায়লগগুলিতে ক্লোজ-আইকন মিস করবেন। stackoverflow.com/questions/17367736/...

— Oleksii Kyslytsyn

এটি বুটস্ট্র্যাপ মিনিটের সাথে ইউআই এর সমস্ত সাধারণ বৈশিষ্ট্যগুলিকে ওভাররাইড করে এবং প্রয়োজনে উভয়ই ব্যবহার করতে পারে না

— প্রজেশ পাল

Answer 10

একটি সহজ উপায় হল jquery-ui.js এর পরে বুটস্ট্র্যাপ.জেএস লোড করা, যাতে বুটস্ট্র্যাপ। টুটিটিপ jquery UI এর ওভাররাইড করে। যদি আপনি প্রয়োজনীয় জাজের মতো মডিউল লোডার ব্যবহার করে থাকেন তবে আপনি jquery-ui এর উপর নির্ভর করে বুটস্ট্র্যাপ তৈরি করতে পারেন:

requirejs.config({
    baseUrl: 'js',
    waitSeconds: 30,
    shim: {
        'bootstrap': {
            deps: [ 'jquery', 'jquery-ui' ]
        },...