คำแนะนำเครื่องมือ jQueryUI แข่งขันกับ Twitter Bootstrap

ฉันได้รับเคล็ดลับเครื่องมือในการทำงานกับรหัสต่อไปนี้ในที่สุด :

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

แล้ว

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

ปัญหาที่ฉันพบคือมีการใช้คำแนะนำเครื่องมือ jQueryUI (ไม่มีลูกศร, คำแนะนำเครื่องมือที่น่าเกลียดขนาดใหญ่) แทนที่จะเป็น Bootstraps

ฉันต้องทำอะไรเพื่อใช้ประโยชน์จาก Bootstrap Tooltips แทน jQueryUI

ทั้ง jQuery UI และ Bootstrap ใช้tooltipสำหรับชื่อของปลั๊กอิน ใช้$.widget.bridgeเพื่อสร้างชื่ออื่นสำหรับ jQuery UI version และอนุญาตให้ปลั๊กอิน Bootstrap อยู่ที่ชื่อ tooltip (พยายามที่จะใช้noConflictตัวเลือกในวิดเจ็ต Bootstrap เพียงแค่ส่งผลให้เกิดข้อผิดพลาดมากมายเพราะมันทำงานไม่ถูกต้องปัญหานี้ได้รับการรายงานแล้วที่นี่ ):

// 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>

ทางออกที่ง่ายคือการโหลด bootrap.js หลังจาก jquery-ui.js เพื่อให้วิธี bootstrap .tooltip มีความสำคัญ

สิ่งนี้ใช้ได้กับฉัน:

หากคุณต้องการใช้ JQuery-UI แต่คุณต้องการใช้คำแนะนำเครื่องมือของ bootstrap เพียงแค่รับ JQuery-UI รุ่นที่กำหนดเองจากเว็บไซต์นี้

เพียงยกเลิกการเลือกตัวเลือก "คำแนะนำเครื่องมือ" และดาวน์โหลด (มันจะเป็นสิ่งที่ "jquery-ui-1.10.4.custom.js")

เพียงเพิ่มลงในโครงการของคุณแทนที่จะเป็นรุ่นที่คุณใช้อยู่ในขณะนี้และคุณพร้อมที่จะปาร์ตี้ สิ่งนี้จะหลีกเลี่ยงความขัดแย้ง มันใช้งานได้อย่างมีเสน่ห์สำหรับฉัน!

ในกรณีที่คุณต้องโหลด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 และใช้ bootstraps เสมอ

สมมติว่า UI จะเรียกใช้หลังจาก bootsrap เริ่มต้นแล้ว

จัดเก็บฟังก์ชั่น bootstrap ก่อนที่จะเริ่มการทำงานของ UI

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

จากนั้นเรียกมันดังต่อไปนี้

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

วิธีนี้ดูเหมือนจะทำงานได้ดีสำหรับฉัน

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

ลองใช้ Bootstrap popovers แทนล่ะ BS popovers ไม่ได้สร้างความขัดแย้งเดียวกันแม้ว่าพวกเขาต้องการส่วนประกอบ tooltip.js เดียวกัน ใช่มันมีสไตล์มากกว่า แต่ไม่ทำให้ปุ่ม JQuery UI ของฉันสกปรก

ฉันใช้ Jquery UI สำหรับการเติมข้อความอัตโนมัติอัตโนมัติ / คอมโบบ็อกซ์ที่กำหนดเองเท่านั้น (ดังนั้นจึงไม่สามารถอ้างสิทธิ์การควบคุม JQ-UI อื่น ๆ ได้) และไม่มีการแก้ไขใด ๆ ข้างต้นเพื่อแก้ไขปัญหา CSS บนปุ่ม combobox กลายเป็น "unstyled" เมื่อเรียกใช้ การเปลี่ยนมาใช้ BS Popovers นั้นให้ผลเหมือนกันโดยไม่มีความขัดแย้งไม่มีการเรียงลำดับใหม่ของการนำเข้าสคริปต์ของฉันและไม่จำเป็นต้องมีคำสั่งบริดจ์อย่างชัดเจน

ลองใช้jQuery.noConflict ()และดูว่าช่วยคุณได้ไหม ดูเหมือนว่า bootstrap และ jQuery กำลังใช้เนมสเปซเดียวกันและบางทีคำแนะนำเครื่องมือ bootstrap และ jQuery ได้รับการโหลดลงในฟังก์ชั่นเดียวกันหรือได้รับการโหลดครั้งแรก

นอกจากนี้คุณยังสามารถตรวจสอบเพื่อดูว่าไลบรารีใดถูกโหลดก่อน โดยปกติถ้าคุณประกาศฟังก์ชั่นเดียวกันสองครั้งในจาวาสคริปต์ส่วนที่สองคือฟังก์ชั่นที่ใช้

ประการที่สามตรวจสอบแพ็คเกจ jQueryUI ( บนเว็บไซต์ของพวกเขา)และดูว่าคุณสามารถดาวน์โหลดเวอร์ชันที่ไม่มีทูลทิปรวมอยู่หรือไม่ (ฉันตรวจสอบแล้วและนี่เป็นไปได้ทั้งหมด)

มีวิธีแก้ปัญหาที่ง่ายและดีเพียงแค่จัดเรียงไฟล์ bootstrap และ jquery ui ของคุณใหม่ดังนี้:

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

เพียงโหลด jQueryui ก่อนที่จะโหลดไฟล์ boostrap js มันใช้งานได้สำหรับฉัน

วิธีที่ง่ายคือการโหลด bootstrap.js หลังจาก jquery-ui.js ดังนั้น bootstrap .tooltip จะแทนที่ jquery UI หากคุณใช้โมดูลโหลดเดอร์เช่น requirejs คุณสามารถทำให้ bootstrap ขึ้นอยู่กับ jquery-ui เช่น:

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