今天開始說非常簡單的bootstrap-button組件。
button設計得非常smart，只有一個調用介面，你可以在$().button(str)中傳入不同的字串，來切換它的文本，其中有三個是架構佔用的——toggle, reset, loading。
button的文本切換是通過data-xxx-text自訂屬性控制。$().button("xxx")，就是取data-aaa-text的值作為新文本。如果要還原最初狀態，使用$().button("reset")。loading參數會在這基礎上添加disabled類名與disabled屬性，目的是不讓人家修改。
button的類型是通過data-toggle自訂屬性決定，目前有三種。普通的單個按鈕，checked類型的按鈕組，radio類型的按鈕組，分別對應button, buttons-checked, buttons-radio。
要使用bootstrap的樣式，必須加btn類名。皮膚在通用樣式名前加個btn-首碼，即.btn-primary, .btn-warning, .btn-danger, .btn-success, .btn-info, .btn-inverse
除了切換文本需要你動手外，切換狀態的點擊事件組件已經為你做好了，你只要引入它就能用了。
!function ($) { "use strict"; // jshint ;_; /* BUTTON PUBLIC CLASS DEFINITION * ============================== */ var Button = function (element, options) { this.$element = $(element) this.options = $.extend({}, $.fn.button.defaults, options) } Button.prototype.setState = function (state) { var d = 'disabled' , $el = this.$element , data = $el.data() , val = $el.is('input') ? 'val' : 'html'//如果是button標籤，使用html方法 state = state + 'Text' //如果是reset，則變成resetText保留起來，換言之reset對架構而言是個保留字 data.resetText || $el.data('resetText', $el[val]()) //切換文本 $el[val](data[state] || this.options[state]) //如果是loading，那麼它就添加一個disabled類名與disabled屬性，換言之reset對架構而言是個保留字 setTimeout(function () { state == 'loadingText' ? $el.addClass(d).attr(d, d) : $el.removeClass(d).removeAttr(d) }, 0) } //這個用於按鈕組，通過$().button('toggle')調用 Button.prototype.toggle = function () { var $parent = this.$element.closest('[data-toggle="buttons-radio"]') //radio具有排他性，只有一個按鈕組只有一個按鈕存在啟用狀態 $parent && $parent .find('.active') .removeClass('active') this.$element.toggleClass('active') } var old = $.fn.button /* BUTTON PLUGIN DEFINITION * ======================== */ $.fn.button = function (option) { return this.each(function () { var $this = $(this) , data = $this.data('button') , options = typeof option == 'object' && option //重複利用之前的執行個體 if (!data) $this.data('button', (data = new Button(this, options))) if (option == 'toggle') data.toggle() else if (option) data.setState(option) }) } $.fn.button.defaults = { loadingText: 'loading...' } $.fn.button.Constructor = Button /* BUTTON NO CONFLICT * ================== */ $.fn.button.noConflict = function () { $.fn.button = old return this } /* BUTTON DATA-API * =============== */ //為存在data-toggle屬性，並且其值以button開頭的按鈕綁定點擊事件 $(document).on('click.button.data-api', '[data-toggle^=button]', function (e) { var $btn = $(e.target) if (!$btn.hasClass('btn')) $btn = $btn.closest('.btn') $btn.button('toggle') })}(window.jQuery);
</p><p><!DOCTYPE html><br /><html><br /> <head><br /> <title>bootstrap學習 by 司徒正美</title><br /> <meta http-equiv="Content-type" content="text/html; charset=utf-8"></p><p> <link rel="stylesheet" href="http://files.cnblogs.com/rubylouvre/bootstrap.css"/><br /> <script src="http://files.cnblogs.com/rubylouvre/jquery1.83.js" > </script><br /> <script src="http://files.cnblogs.com/rubylouvre/bootstrap-transition.js"></script><br /> <script src="http://files.cnblogs.com/rubylouvre/bootstrap-button.js"></script></p><p> <script><br /> $(function(){<br /> var btn = $("#example1")<br /> btn.click(function(){<br /> btn.button('loading');<br /> setTimeout(function(){<br /> btn.button("reset")<br /> },1200)<br /> })<br /> new function(){<br /> var btn = $("#example2")<br /> btn.click(function(){<br /> btn.button('complete');<br /> setTimeout(function(){<br /> btn.button("reset")<br /> },1200)<br /> })<br /> }<br /> new function(){<br /> var btn = $("#example3")<br /> btn.click(function(){<br /> btn.button('error');<br /> setTimeout(function(){<br /> btn.button("reset")<br /> },1200)<br /> })<br /> }<br /> new function(){<br /> var btn = $("#example4")<br /> btn.click(function(){<br /> btn.button('error');<br /> setTimeout(function(){<br /> btn.button("first")<br /> },600)<br /> setTimeout(function(){<br /> btn.button("second")<br /> },1600)<br /> setTimeout(function(){<br /> btn.button("third")<br /> },2400)<br /> setTimeout(function(){<br /> btn.button("reset")<br /> },3400)<br /> })<br /> }<br /> })</p><p> </script><br /> </head><br /> <body><br /> <button type="button" id="example1" class="btn btn-primary" data-loading-text="載入中...">第一個按鈕</button><br /> <button type="button" id="example2" class="btn btn-info" data-complete-text="完成了..">換一個文本提示屬性</button><br /> <button type="button" id="example3" class="btn btn-error" data-error-text="出錯了..">換另一個文本提示屬性</button><br /> <button type="button" id="example4" class="btn btn-success"<br /> data-first-text="狀態1.." data-second-text="狀態2.." data-third-text="狀態3..">同時有多個文本提示屬性</button><br /> <p>點擊切換樣本，添加一個active類名</p><br /> <div><br /> <p>data-toggle="button"</p><br /> <button type="button" id="example5" class="btn btn-primary" data-toggle="button">這是單個按鈕切換狀態</button><br /> </div><br /> <p>data-toggle="buttons-checkbox"</p><br /> <div class="btn-group" data-toggle="buttons-checkbox"><br /> <button type="button" class="btn btn-primary">Left</button><br /> <button type="button" class="btn btn-primary">Middle</button><br /> <button type="button" class="btn btn-primary">Right</button><br /> </div><br /> <p>data-toggle="buttons-radio"</p><br /> <div class="btn-group" data-toggle="buttons-radio"><br /> <button type="button" class="btn btn-primary">Left</button><br /> <button type="button" class="btn btn-primary">Middle</button><br /> <button type="button" class="btn btn-primary">Right</button><br /> </div><br /> </body><br /></html><br />
運行代碼
以下是它對應的less，產生的CSS大概是它的五倍以上。
//// Buttons// --------------------------------------------------// Base styles// --------------------------------------------------// Core.btn { display: inline-block; .ie7-inline-block(); padding: 4px 12px; margin-bottom: 0; // For input.btn font-size: @baseFontSize; line-height: @baseLineHeight; text-align: center; vertical-align: middle; cursor: pointer; .buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark, 0 1px 1px rgba(255,255,255,.75)); border: 1px solid @btnBorder; *border: 0; // Remove the border to prevent IE7's black border on input:focus border-bottom-color: darken(@btnBorder, 10%); .border-radius(@baseBorderRadius); .ie7-restore-left-whitespace(); // Give IE7 some love .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)"); // Hover state &:hover { color: @grayDark; text-decoration: none; background-position: 0 -15px; // transition is only when going to hover, otherwise the background // behind the gradient (there for IE
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
