Question

我有一个包含两个按钮图像的图像文件夹。（normal_button.png和button_pressed.png）。我想将它们包含到我的项目中。我可以编辑我的css文件吗？我是否需要创建一个新的css文件？以及我如何使用两个按钮图像来表示按钮按下状态和正常按钮状态？

Answer 1

<!DOCTYPE html>
<html>
 <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
 <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
 <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
 <style>
    .normal_button {/*background: green;*/background: url('normal_button.png');}
    .buton_pressed {/*background: red;*/background: url('buton_pressed.png');}
 </style>
 </head>
<body>
<div data-role="page" data-add-back-btn="true" id="form">
    <div data-role="header">
        <a href="#queue" data-icon="star" data-iconpos="notext" class="ui-btn-right" data-transition="flip">Queue</a>
        <h1>Form</h1>
    </div>
    <div data-role="content"> 
    <a href="" class="normal_button" id="btn" data-role="button">Button</a>         
    </div>
    <footer data-role="footer" data-position="fixed"></footer>
</div> 

</body>
<script>        
$("#btn").on("click",function(){
    if($(this).hasClass("normal_button")){
        $(this).removeClass("normal_button");
        $(this).addClass("buton_pressed");
        return;
    }if($(this).hasClass("buton_pressed")){
        $(this).removeClass("buton_pressed");
        $(this).addClass("normal_button");
        return;
    }
  });    
</script>
</html>

Answer 2

你shuold在你的css文件的btn-up部分添加你的normal_button.png地址图片（但是你的偏好主题例如/ * A）和btn-hover和btn-down和btn-active中的button_pressed.png地址你的css文件的一部分（所以你的偏好主题）。你应该在你喜欢的主题中找到/ *按钮* /并添加你的图像地址背景颜色definatin和上边框颜色。例如，看看这个：

/* Button up */
.ui-page-theme-a .ui-btn,
html .ui-bar-a .ui-btn,
html .ui-body-a .ui-btn,
html body .ui-group-theme-a .ui-btn,
html head + body .ui-btn.ui-btn-a,

如何将背景图像添加到jquery移动按钮

2 个答案: