JQuery-UI टैब हेडर में टेक्स्ट का चयन क्लिपबोर्ड

Question

JQuery-UI टैब का उपयोग कर किसी पृष्ठ के लिए, मैं उपयोगकर्ताओं को टैब शीर्षक में टेक्स्ट का चयन करने की अनुमति कैसे दे सकता हूं?

मेरे पास कुछ गतिशील टैब हैं, और चाहते हैं कि उपयोगकर्ता क्लिपबोर्ड पर प्रतिलिपि बनाने के लिए शीर्षक चुनने में सक्षम हों।

उदाहरण के लिए Demo page पर, मैं कॉपी/पेस्ट 'ननक टिनिडंट' के लिए चयन करने में सक्षम होना चाहता हूं। 'प्रोइन डोलर', और 'एनीन लैसीनिया'। या शीर्षक का भी हिस्सा (उदा। 'प्रोइन', 'एनीन', 'टिनिडंट')।

Answer 1

यहाँ एंकर कि चयन <span> तत्वों के साथ टैब को परिभाषित को बदलने के लिए कुछ हद तक एक hacky तरीका है। आप समारोह निर्धारित करने के लिए इस कोड का उपयोग कर सकते हैं और फिर बस डबल क्लिक करें पर यह कहते हैं:

चयन के लिए फंक्शन:

function select_all(el) { 
    if (typeof window.getSelection != "undefined" && typeof document.createRange != "undefined") { 
     var range = document.createRange(); 
     range.selectNodeContents(el); 
     var sel = window.getSelection(); 
     sel.removeAllRanges(); 
     sel.addRange(range); 
    } else if (typeof document.selection != "undefined" && typeof document.body.createTextRange != "undefined") { 
     var textRange = document.body.createTextRange(); 
     textRange.moveToElementText(el); 
     textRange.select(); 
    } 
} 

और फिर बस टैब पर इसे कहते डबल क्लिक करें:

$('#tabs').children('ul').children('li').children('a').dblclick(function() { 
    select_all(this); 
}); 

यहाँ मैं आप के लिए डेमो बनाया: Demo

पीएस:फिर आप पाठ के साथ टैब पर टूल-टिप शीर्षक का उपयोग कर सकते हैं "टेक्स्ट का चयन करने के लिए डबल-क्लिक करें" या ऐसा कुछ, केवल जानकारी के लिए।

Answer 2

UI टैब पहले से ही यूआई selectable interaction का उपयोग कर चयन स्थिति को संभालते हैं। इस प्रकार jQuery जानता है कि कौन सा टैब वर्तमान में सामग्री प्रदर्शित करता है। तो जब कोई उपयोगकर्ता एक टैब का चयन करता है, तो यह सक्रिय हो जाता है और सामग्री दिखायी जाती है।

आप क्या कर सकते हैं टैब पर प्रतिलिपि आइकन जोड़ना है। क्लिक करने पर, टैब का शीर्षक क्लिपबोर्ड पर कॉपी किया गया है। यह manipulation उदाहरण की तरह काम करेगा। एक करीबी आइकन दिखाने के बजाय छोड़कर। आप ui-icon-copy का उपयोग कर सकते हैं।

Here is an example।

$(function() { 
    $("#tabs").tabs(); 

    $('.ui-tabs-anchor').each(function() { 
     var anchorText = $(this).text(), 
     tabIndex = $(this).attr('id').split('-')[2] - 1; 

     $(this).hide(); 
     $('<span class="selectable-tab-header">' + anchorText + '</span>').insertAfter(this).data('tabIndex', tabIndex); 
    }); 

    $('.selectable-tab-header').click(function() { 
     $('#tabs').tabs('option', 'active', $(this).data('tabIndex')); 
    }); 
}); 

Answer 3

मैं डबल क्लिक करें का चयन करने का प्रस्ताव कर सकते हैं:

Answer 4

मैं एक बेला में अपने सवाल का जवाब देने की कोशिश की है: http://jsfiddle.net/vcarluer/Rfw3t/

विचार: जब वर्तमान शीर्षक पर क्लिक उपयोगकर्ता द्वारा पाठ चयन सक्षम करने हेतु html इनपुट दिखा।

<li id="li-1"><a id ="a1" href="#fragment-1">Nunc tincidunt</a> 
<div id="divText-1" class="tabText"> 
<input id="input-1" size="13" readonly/> 
</div> 
<button id="copyToClipBoard-1" class="ccButton">cc</button> 
</li> 

$("#a1").click(function(e) { if (selected == 0) { $("#divText-1").show(); $("#input-1").val("Nunc tincidunt"); $("#input-1").focus(); } selected = 0; }); 
$("#input-1").blur(function(e) { $("#divText-1").hide(); }); 

आप IE के साथ इसे खोलने यदि आप भी एक 'सीसी' बटन (केवल IE के साथ काम) शीर्षक कॉपी करने के लिए क्लिपबोर्ड में

var headerText = $("#a2").text(); 
window.clipboardData.setData('text', headerText); 

मैं जावास्क्रिप्ट और इतने बहुत आलसी के साथ अच्छा नहीं हूँ मिलेगा मैंने आपको कोड और फ़ंक्शन कॉल को दोबारा करने दिया क्योंकि बहुत सारे कॉपी पेस्ट कोड हैं। आप इनपुट सीमा को भी हटा सकते हैं और इसे सही तरीके से संरेखित कर सकते हैं ... या नहीं ... मैंने आपके लिए सीमा और इनपुट ओवरले देखने के लिए सीमा दी है। सीएसएस भी खराब है लेकिन आपके पास विचार है।

मुझे उम्मीद है कि यह आपकी मदद करेगा।

Answer 5

इसके लायक होने के लिए, टैब चयन के लिए अनुमति देते हैं, आपको बस चयन करना शुरू करने के बारे में सटीक होना चाहिए।

टेक्स्ट चयन और माउस क्लिकिंग पर कुछ SO लेखों को जोड़कर यह उत्तर मिला। यह jquery UI टैब के संयोजन के साथ काम करता है। टेक्स्ट चयन के लिए एसओ के जेसन को क्रेडिट और माउस के लिए एसओ के एकोर्न को सही ढंग से पहचानने के लिए और खुद को संयोजन के लिए क्लिक करें :)। यह टैब पाठ का चयन करें और नकल के लिए मानक संदर्भ मेनू खुल जाएगा:

function SelectText(element) { 
    var doc = document, 
     text = doc.getElementById(element), 
     range, selection; 
    if (doc.body.createTextRange) { 
     range = document.body.createTextRange(); 
     range.moveToElementText(text); 
     range.select(); 
    } else if (window.getSelection) { 
     selection = window.getSelection(); 
     range = document.createRange(); 
     range.selectNodeContents(text); 
     selection.removeAllRanges(); 
     selection.addRange(range); 
    } 
} 

$(function() { 
    $('a[href^="#tabs"]').mousedown(function (event) { 
     if (event.which == 3) { //right click 
      SelectText($(this).attr('id')); 
     } 
    }); 
}); 

Fiddle