JQuery प्रगति बार इनलाइन टेक्स्ट

Question

मैं मूल प्रगति पट्टी का उपयोग करने की कोशिश कर रहा हूं हालांकि मैं वास्तव में बार के अंदर कुछ पाठ डालने के लिए css/command को समझने में असमर्थ हूं। मैं इस प्रगति पट्टी का उपयोग कर रहा हूं: http://docs.jquery.com/UI/Progressbar हालांकि मैं अन्य लोगों के लिए खुला हूं यदि वे लागू करने के लिए उतने ही सरल हैं। मैं चाहता हूं कि यह बाएं कोने में कुछ स्थिर जानकारी प्रदर्शित करे और फिर सही अनुभाग में कहीं भी पूर्ण प्रतिशत का प्रतिशत। मैंने जिस सीएसएस को करने का प्रयास किया है, वह सिर्फ नीचे या उसके पक्ष में जानकारी प्रदर्शित करता है। साथ ही मुझे यकीन है कि JQuery विधि (JQuery के लिए नया) के आधार पर वास्तव में इस सीएसएस परिवर्तन को कैसे प्राप्त किया जाए।

नीचे मेरा वास्तविक JQuery है। यूआरएल मान को समझने की कोशिश न करें, मान लीजिए कि यह 0-100 लौटाता है।

<script type="text/javascript"> 

    var url = "%%$protocol_url%%/bin/task_status?id=%%$tid%%&cmd=percent_done"; 

    $(function() { 
    var progress = 0; 
    //alert("some value" + value, value); 
    $("#progressbar").progressbar({ progress: 0 }); 
    setTimeout(updateProgress, 500); 

}); 


function updateProgress() { 
    var progress; 
    $.get(url, function(data) { 
     // data contains whatever that page returns  

     if (data < 100) { 
      $("#progressbar") 
       .progressbar("option", "value", data); 
      setTimeout(updateProgress, 500); 
     } else { 
      $("#progressbar") 
       .progressbar("option", "value", 100); 
     } 

     });  
} 

धन्यवाद

Answer 1

मैं प्लगइन से परिचित नहीं हूँ, लेकिन सीएसएस के साथ आप सिर्फ प्रगति बार से अधिक अभिलेख के साथ div स्थित कर सकते हैं। मुझे यकीन नहीं है कि यह नेस्टेड divs के साथ काम करेगा, क्योंकि प्रगति पट्टी के लिए सामग्री प्रदान की जाती है जब आंतरिक div मिटा दिया जा सकता है।

आप जहां चाहें टेक्स्ट को स्थान देने के लिए शीर्ष और बाएं स्थितियों के साथ खेल सकते हैं। चेहरे में आप गतिशील रूप से बाएं बदल सकते हैं, ताकि टेक्स्ट बार के साथ चलता है, हालांकि यह थोड़ा सा ट्रिकियर हो सकता है।

जेड-इंडेक्स कोई समस्या नहीं होनी चाहिए, लेकिन यदि आप divs के क्रम को बदलना चाहते हैं, तो आपको यह सुनिश्चित करना होगा कि टेक्स्ट में बार की तुलना में अधिक ज़ेड-इंडेक्स हो।

सीएसएस:

#bardivs { 
    width:400px; /* or whatever the of the porgress bar is */ 
    /* 
     The position of #bardivs must be something other than 
     static (the default) so that its children will be positioned 
     relative to it. 
    */ 
    position:relative; 
} 
#progresstext { 
    position:absolute; 
    top:0; 
    left:0; 
} 

HTML:

<div id="bardivs"> 
    <div id="progressbar"></div> 
    <div id="progresstext"></div> 
</div> 

जे एस:

$("#progressbar").progressbar("option", "value", data); 
$("#progresstext").html("<p>Hard code or string here<p>"); 

Answer 2

मैं एक पहले से ही विकसित progressbar अवधारणा है कि बस jQuery और सीएसएस पर सुधार किया गया है आधारित (लेकिन jquery-ui का उपयोग नहीं कर रहा है)। आप आप अपने विवरण होने के कारण दिए गए लिंक पर देख सकते हैं पसंद है:

http://progressbar-simple.blogspot.com/

आशा है कि मदद करता है।