2013-04-12 23 views
12

मैं ट्विटर बूटस्ट्रैप बटन के लिए स्पिनर बनाने की कोशिश कर रहा हूं। स्पिनरों को कुछ काम प्रगति पर इंगित करना चाहिए (यानी AJAX अनुरोध)। http://jsfiddle.net/AndrewDryga/zcX4h/1/स्पिनर .btn

एचटीएमएल (jsfiddle पर पूर्ण):

यहाँ छोटा सा उदाहरण है

Unknown element (no animation here!): 
<p> 
    <button class="btn-success has-spinner"> 
    <span class="spinner"><i class="icon-spin icon-refresh"></i></span> 
    Foo 
    </button> 
</p> 

Works when width is defined: 
<p> 
    <a class="btn btn-success has-spinner"> 
    <span class="spinner"><i class="icon-spin icon-refresh"></i></span> 
    Foo 
    </a> 
</p> 

सीएसएस:

.spinner { 
    display: inline-block; 
    opacity: 0; 
    width: 0; 

    -webkit-transition: opacity 0.25s, width 0.25s; 
    -moz-transition: opacity 0.25s, width 0.25s; 
    -o-transition: opacity 0.25s, width 0.25s; 
    transition: opacity 0.25s, width 0.25s; 
} 

/* ... */ 

.has-spinner.active .spinner { 
    opacity: 1; 
    width: auto; /* This doesn't work, just fix for unkown width elements */ 
} 

/* ... */ 

.has-spinner.btn.active .spinner { 
    width: 16px; 
} 

.has-spinner.btn-large.active .spinner { 
    width: 19px; 
} 

सौदा है कि सीएसएस "मार्जिन: ऑटो" नहीं करता है ' सभी तत्वों के लिए अपेक्षित एनीमेशन और स्पिनर चौड़ाई का उत्पादन सीएसएस के माध्यम से परिभाषित किया जाना चाहिए। क्या इस समस्या को हल करने का कोई तरीका है? इसके अलावा, शायद स्पिनरों को संरेखित/दिखाने का बेहतर तरीका है?

और क्या मुझे बटन पैडिंग के साथ खेलना चाहिए और इसे रास्ते में बनाना चाहिए, जहां बटन चौड़ाई नहीं बदली जाती है, जब स्पिनर दिखाया जाता है या चौड़ाई बदलने वाले बटन ठीक है? (यदि बीमार इसे कहीं स्निपेट के रूप में रखता है)

+0

वे डुप्लीकेट किए गए प्रश्न नहीं हैं लेकिन वे आपके प्रश्न से संबंधित हैं: http://stackoverflow.com/q/3508605/1004046 और http://stackoverflow.com/q/3149419/1004046 – Pigueiras

+0

मैंने पहले से ही टाइप किया है अधिकतम-चौड़ाई के साथ खेलें और: नहीं (.active) चयनकर्ता, ऐसा लगता है कि आपको सभी तत्वों के लिए चौड़ाई की खोज निर्धारित करने की आवश्यकता है ... मैं पूर्ण स्थिति के साथ खेलने की कोशिश करता हूं। –

+1

वाह यह एक अच्छा दिखने वाला स्पिनर है! आपको इसे बूटस्ट्रैप में उचित रूप से प्राप्त करने का प्रयास करना चाहिए! –

उत्तर

34

मैं चौड़ाई की अधिकतम-चौड़ाई वाली आइसटेड का उपयोग करके इस समस्या को ठीक करने में सक्षम था। यह भी शुद्ध सीएसएस समाधान है, इसलिए इसे हर जगह काफी उपयोग किया जा सकता है (उदाहरण के लिए टैग पर एक्स एक्स दिखाएं, जब उपयोगकर्ता इसके ऊपर माउस होवर करता है)।

डेमो: http://jsfiddle.net/AndrewDryga/GY6LC/

नई सीएसएस:

.spinner { 
    display: inline-block; 
    opacity: 0; 
    max-width: 0; 

    -webkit-transition: opacity 0.25s, max-width 0.45s; 
    -moz-transition: opacity 0.25s, max-width 0.45s; 
    -o-transition: opacity 0.25s, max-width 0.45s; 
    transition: opacity 0.25s, max-width 0.45s; /* Duration fixed since we animate additional hidden width */ 
} 

/* ... */ 

.has-spinner.active .spinner { 
    opacity: 1; 
    max-width: 50px; /* More than it will ever come, notice that this affects on animation duration */ 
} 
+0

अच्छा। लेकिन आप उन्हें कैसे रोकते हैं? – liang

+0

मुझे लगता है कि आपको पहले JSFiddle जांचना चाहिए। स्पिनर –

+0

दिखाने/छुपाने के लिए बटन पर .active क्लास को बस जोड़ें/हटाएं क्या यह समाधान बूटस्ट्रैप 3 सीएसएस पर आधारित है? – mortensi

0

मैंने पाया अपने कोड सुपर सहायक हो। मुझे पता है कि यह एक साल हो गया है लेकिन मैंने कोड पर सुधार किया है। मुझे मैन्युअल रूप से अवधि जोड़ने की इच्छा नहीं थी और मैं प्रत्येक तत्व को टैग करता हूं। मैंने स्वचालित रूप से इन टैग को जोड़ने के लिए जावास्क्रिप्ट कोड tweaked। तो आपको बस एक बटन/लिंक में स्पिनर जोड़ने के लिए करना है, इसमें स्पिनर क्लास है और इसे डेटा स्पिनर = "[बाएं | दाएं]" टैग दें (यह निर्धारित करता है कि आपके बटन टेक्स्ट का कौन सा पक्ष स्पिनर है रखा जाना चाहिए)।

यहाँ संशोधित जावास्क्रिप्ट है:

$(function(){ 

var spinnerHTML = "<span class='spinner'><i class='fa fa-refresh fa-spin'></i></span>", 
    spinnerObjects = $(".has-spinner"); 

spinnerObjects.filter("[data-spinner=left]").prepend(spinnerHTML + "&nbsp;") 
spinnerObjects.filter("[data-spinner=right]").append("&nbsp;" + spinnerHTML) 
spinnerObjects.click(function() { 
    $(this).toggleClass('active'); 
}); 

});

http://jsfiddle.net/codyschouten/QKefn/2/

+1

धन्यवाद। मेरे कोड के साथ मुझे एक समस्या है, आपको बटन टेक्स्ट में   नहीं जोड़ना चाहिए, क्योंकि यह बटन में टेक्स्ट केंद्रित करता है। इसके अलावा मैं जावास्क्रिप्ट का उपयोग नहीं करना पसंद करता, क्योंकि मैं मार्कअप और तर्क को मिश्रण करना पसंद नहीं करता, इसलिए प्रोग्रामर हमेशा एचटीएमएल में जो कुछ भी प्राप्त करना चाहता है उसे सख्ती से घोषित करता है। मुझे लगता है कि यह अधिक बूटस्ट्रैप-जैसे दर्शन है –

4

मैं अब बूटस्ट्रैप (3.3.5), फ़ॉन्ट भयानक द्वारा नवीनतम उपयोग करने के लिए @andrew-dryga समाधान अद्यतन किया है:

यहाँ सभी परिवर्तनों (सीएसएस, एचटीएमएल) के साथ बेला के लिए लिंक है (4.3.0), jquery (2.1.3) और थोड़ा इसे संशोधित किया।

उदा।

<button class="btn btn-success has-spinner"> 
    <i class="fa fa-spinner fa-spin"></i> 
    Foo 
</button> 

और

$('a.has-spinner, button.has-spinner').click(function() { 
    $(this).toggleClass('active'); 
}); 

और उचित सीएसएस http://jsfiddle.net/oshybystyi/v04ag5ch/4/

0

बहुत सरल उपाय काम मुझ से

<i></i> 
with 
<em></em> 

केवल परिवर्तन तत्व बदल रहा था के लिए यह किया गया था बदल जाता है, मैं किया।

संबंधित मुद्दे