2012-11-06 51 views
1

我想用Jquery Mobile 1.2創建一個自定義按鈕。我的按鈕顯示,但與現有的自定義舍入默認按鈕。我需要按鈕來顯示。 http://i.imgur.com/RFeeQ.pngjquery移動自定義按鈕

http://i.imgur.com/MaQ2h.png

#homepage .my-button { 
background-image: url('../images/icons/btn_panel.png') !important; 
width:307px; 
height:50px; 
padding-top:0px auto; 
} 

#homepage .ui-icon-about-icon { 
border-radius:0px; 
background-image: url('../images/icons/about_up.png'); 
background-color: rgba(0, 0, 0, 0); 
width:36px; 
height: 36px; 
} 

<div data-role="content" class="content"> 
    <a href="about.html" data-transition="fade" data-role="button" data-icon="about-icon" data-iconshadow="false" class="my-button">About</a> 
</div> 

回答

0

我會看着文檔的按鈕:

直播例如:

JS:

// For all buttons use something like this 
$('.ui-btn').css('width','50%'); 

// For individual buttons use something like this 
$('#theButton1').parent().css('width', '75%'); 

// Or this for HREF data-role buttons 
$('#hrefButton4').css('width', '45%'); 

我認爲這是你在找什麼

// this changes the height for all buttons 
$('.ui-btn-text').css('font-size','50px'); 

// This changes the height for a single element 
$('#hrefButton3').children().children().css('font-size','30px'); 

HTML:

<div data-role="page" id="home"> 
    <div data-role="content"> 
     <input type="button" id="theButton1" value="Press Me 1" /> 
     <input type="button" id="theButton2" value="Press Me 2" /> 
     <input type="button" id="theButton3" value="Press Me 3" /> 
     <input type="button" id="theButton4" value="Press Me 4" /> 
     <br /> 
     <a href="#" data-role="button" id="hrefButton1">HREF Me 1</a> 
     <a href="#" data-role="button" id="hrefButton2">HREF Me 2</a> 
     <a href="#" data-role="button" id="hrefButton3">HREF Me 3</a> 
     <a href="#" data-role="button" id="hrefButton4">HREF Me 4</a> 
    </div> 
</div> 

相關:

1

,這是一個良好的開端,只要繼續操縱CSS ...我調整,因爲填充的高度,但物料隨意自己周圍玩...

<style> 
    #homepage .my-button { 
    background-image: url("btn_panel.png"); 
    width:307px; 
    height:75px; 
    padding-top:0px auto; 
    } 

    #homepage .my-button .ui-btn-inner { 
    padding-top: 25px; 
    } 

    #homepage .my-button .ui-btn-text { 
    left: -80px; 
    } 

    .ui-icon-about-icon { 
    border-radius:0px; 
    background-image: url("logo36.png"); 
    background-color: rgba(0, 0, 0, 0); 
    width:36px; 
    height:36px; 
    } 
</style> 

刪除圓角只需使用data-corners="false"

<a href="about.html" data-transition="fade" data-role="button" data-icon="about-icon" data-iconshadow="false" data-corners="false" class="my-button">About</a> 

我玩耍了一點點,來到了這個結果(我沒有你的圖片,但用一個又一個......) screenshot

,你也可以使用theme roller來定製你的CSS ...

+0

謝謝,對於一些說理數據角落= 「假」 並沒有爲我工作。它在Jquery Mobile 1.2中可用,因爲DW沒有在代碼提示中顯示它。也有可能刪除關於圖標周圍的灰色邊框? – user1205312

+0

'對於一些reaon數據 - 角=「假」不適合我'??? '它是否可用在Jquery Mobile 1.2''yes當然...再看看片段......'a href = ...'灰色的邊框只是背景,因爲我用'data-theme =在這個例子中「b」'...我推薦你使用主題滾輪來定製你的CSS,如前所述...... – Taifun