0

Phill Pafford 提到了这段代码：

通过 CSS 调整按钮的大小

这个例子：

http://jsfiddle.net/3DSGT/

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>

我已经尝试过了，但它不起作用：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml">
  <h<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta content="text/html;charset=UTF-8" http-equiv="Content-Type" />
    <title></title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
    <script type="text/javascript">      


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

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

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

// Height of the button
//$('.ui-btn-inner').css('height','50px'); // this changes all buttons, might also need to adjust the vertical alignment for the text as well
$('#theButton2').prev().css('height','50px');

// Height of the font in the button
//$('.ui-btn-text').css('font-size','50px'); // this changes all buttons
$('#hrefButton3').children().children().css('font-size','60px');
​​​
    </script> 



  </head>
  <body>
    <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>
  </body>
</html>

我应该怎么做才能让它工作？在我的情况下，文本保持不变，而不像图像中的那样。

先感谢您。

在此处输入图像描述

4

2 回答 2

2

您运行脚本太早了。

做这个：

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

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

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

    // Height of the button
    //$('.ui-btn-inner').css('height','50px'); // this changes all buttons, might also need to adjust the vertical alignment for the text as well
    $('#theButton2').prev().css('height','50px');

    // Height of the font in the button
    //$('.ui-btn-text').css('font-size','50px'); // this changes all buttons
    $('#hrefButton3').children().children().css('font-size','60px');
});
于 2012-08-05T08:49:05.870 回答
0

这是答案：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta content="text/html;charset=UTF-8" http-equiv="Content-Type" />
    <title></title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
  </head>
  <body>
    <script type="text/javascript">      
      $(document).ready(function() {
        $('.ui-btn-text').css('font-size','50px')
        $('.ui-btn-inner').css('height','200px');
        });
</script> 
        <a data-corners="false" href="index.html" data-role="button" data-icon="delete"
          data-iconpos="top" data-theme="a">LIVINGROOM</a> </div>
    </div>
  </body>
</html>
于 2012-08-05T11:11:43.407 回答