मैं ट्विटर बूटस्ट्रैप बटन के लिए स्पिनर बनाने की कोशिश कर रहा हूं। स्पिनरों को कुछ काम प्रगति पर इंगित करना चाहिए (यानी 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;
}
सौदा है कि सीएसएस "मार्जिन: ऑटो" नहीं करता है ' सभी तत्वों के लिए अपेक्षित एनीमेशन और स्पिनर चौड़ाई का उत्पादन सीएसएस के माध्यम से परिभाषित किया जाना चाहिए। क्या इस समस्या को हल करने का कोई तरीका है? इसके अलावा, शायद स्पिनरों को संरेखित/दिखाने का बेहतर तरीका है?
और क्या मुझे बटन पैडिंग के साथ खेलना चाहिए और इसे रास्ते में बनाना चाहिए, जहां बटन चौड़ाई नहीं बदली जाती है, जब स्पिनर दिखाया जाता है या चौड़ाई बदलने वाले बटन ठीक है? (यदि बीमार इसे कहीं स्निपेट के रूप में रखता है)
वे डुप्लीकेट किए गए प्रश्न नहीं हैं लेकिन वे आपके प्रश्न से संबंधित हैं: http://stackoverflow.com/q/3508605/1004046 और http://stackoverflow.com/q/3149419/1004046 – Pigueiras
मैंने पहले से ही टाइप किया है अधिकतम-चौड़ाई के साथ खेलें और: नहीं (.active) चयनकर्ता, ऐसा लगता है कि आपको सभी तत्वों के लिए चौड़ाई की खोज निर्धारित करने की आवश्यकता है ... मैं पूर्ण स्थिति के साथ खेलने की कोशिश करता हूं। –
वाह यह एक अच्छा दिखने वाला स्पिनर है! आपको इसे बूटस्ट्रैप में उचित रूप से प्राप्त करने का प्रयास करना चाहिए! –