2016-07-07 133 views
1

我想有一組標籤和文本輸入,在文本字段右側有一個可點擊的按鈕。這個按鈕需要是一個切換(點擊時爲灰色,點擊時爲白色),它的logo應該有一個PNG圖像。Bootstrap切換按鈕附加pgn圖像

我做了一個簡單的代碼片段來展示一下我目前有:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<br> 
 
<br> 
 
<div class="col-lg-6"> 
 
    <div class="input-group" style="float:left;"> 
 
    <textarea class="form-control"></textarea> 
 
    <span class="input-group-addon"><a href="#" tabindex="-1" style="width: 100%;"><img class="clIcon btn btn-default" src="http://dummyimage.com/15x15/26bf8f/fff" /></a></span> 
 
    </div> 
 
</div> 
 
<!-- /.col-lg-6 -->

正如你所看到的,我居然按鈕中有一個白色正方形,這是我正在使用的實際切換。我想讓我的開關撥到這個按鈕在文本區的右側,而不僅是裏面的

現在,只有那個小的白色方塊是可點擊的,而不是整個按鈕,這是一個問題。我需要整個按鈕是可點擊的並且像切換(開/關)一樣。我使用此切換來激活或停用其他頁面中的網址預覽。當加載其他頁面時,客戶端必須能夠查看預覽是否處於活動狀態,並且按鈕的顏色(如任何切換)。

你有什麼想法嗎?謝謝。


UPDATE

外觀我想是基本的自舉的樣子,就像你可以在the official documentation examples,其中Go!按鈕將是一個鏈接,而Go!文本由.png圖像替換看到。

如果可能的話,我想使用默認引導類而不是在它之上構建我自己的CSS或替換它,因爲我想要與其他表單一致,我使用官方引導類來獲得相同的外觀(例如正常的按鈕)。

回答

1

首先,您沒有按照正確的順序參考腳本。

的jQuery應bootstrap.js

這裏以前被引用爲<textarea>,並與裏面的圖片鏈接和 「按鈕」 是調整<textarea>https://jsfiddle.net/vmferrtx/4/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
     
 
    <br><br> 
 
    <div class="col-lg-6"> 
 
    <div class="input-group"> 
 
    <textarea class="form-control"></textarea> 
 
    <span class="input-group-addon input-group-btn"> 
 
     <a href="#" class="link-button-right btn btn-default" type="button"> 
 
      <img class="clIcon" src="http://dummyimage.com/15x15/26bf8f/fff" /> 
 
     </a> 
 
     </span> 
 
    </div> 
 
    <!-- /input-group --> 
 
</div> 
 
<!-- /.col-lg-6 -->

與resizible位的css:

.link-button-right { 
     height: 100%; 
     position: relative; 
     width: 50px; 
    } 

    .input-group-addon { 
     position: relative; 
     padding: 0; 
     border: none; 
    } 

    .clIcon { 
     position: absolute; 
     top: 50%; 
     left: 50%; 
     transform: translate(-50%, -50%); 
    } 
0

不幸的是,你要求的東西很難用你試圖使用的bootstrap構造實現。如果不將CSS大幅改爲.input-group-addon課程或使用javascript進行補充,我無法做到這一點。下面是javascript版本,但你可能完全從頭開始構建這個東西,忘記組插件部分(它使用display:table,這導致按鈕填充整個區域時出現問題)。

在下面的示例中,我使用<label>來使整個區域可點擊。我還包含一個<input type="checkbox">來創建可切換狀態。那麼這只是使用label input[type=checkbox]:checked + whatever { ... }的一些變化來更改背景顏色和應用其他樣式的問題。 javascript部分只是設置複選框的父級背景顏色,因爲我可以使按鈕圖像的全寬和高度不需要display: table.input-group-addon和公司。結果是我認爲你想要的,但一點也不乾淨,很好。同樣,我建議只從頭開始,不要使用引導程序的輸入組插件。

我也用!important而不是添加規則:focus:active:hover,天知道還有什麼引導增加了扔在那些惱人的盒子陰影和輪廓。我不建議在生產中這樣做。

$('label.input-group-addon input[type=checkbox]').on('change', function(){ 
 
    $(this).closest('label').each(function(){ 
 
    $(this).css('background', $('.btn', this).css('background')); 
 
    }); 
 
}).trigger('change');
label.input-group-addon { 
 
    cursor: pointer; 
 
} 
 

 
label.input-group-addon .btn { 
 
    border: none; 
 
    outline: none!important; 
 
    box-shadow: none!important; 
 
} 
 

 
label.input-group-addon .btn:hover { 
 
    background: white; 
 
} 
 

 
label.input-group-addon input:checked + .btn { 
 
    background: #d4d4d4; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<br> 
 
<br> 
 
<div class="col-lg-6"> 
 
    <div class="input-group" style="float:left;"> 
 
    <textarea class="form-control"></textarea> 
 
    <label class="input-group-addon"> 
 
     <input type="checkbox" tabindex="-1" class="sr-only"> 
 
     <img class="clIcon btn btn-default" src="http://dummyimage.com/15x15/26bf8f/fff" /> 
 
    </label> 
 
    </div> 
 
</div>