0

私は html ファイルを変更していますが、それを扱う必要があります。頭には、いくつかのボタンを作成する一連の JavaScript があり、すべてのボタンに id="#content" というラベルが付けられます。

次に、本文では、すべてのボタンを列に配置するだけです。<div id="content" align:"center"></div>

ボタンを個別に移動できるようにしたい、つまりテーブルに配置したい。これどうやってするの？

コード：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content = "height = device-height, width = 420, user-scalable = no" />
        <title>Direct Current GUI</title>
        <script type="text/javascript" src="/webiopi.js"></script>
        <script type="text/javascript">
        webiopi().ready(function() {
                var content, button;
                content = $("#content");

                // create a "FORWARDS" labeled button for GPIO 7
                button = webiopi().createGPIOButton(7, "FORWARDS");
                content.append(button); // append button to content div

                // create a "REVERSE" labeled button for GPIO 8
                button = webiopi().createGPIOButton(8, "REVERSE");
                content.append(button); // append button to content div                                      
        });

        </script>

</head>
<body>
        <table>
                <tbody>
                        <tr><td id="content"></td></tr>

                </tbody>
        </table>
</body>
</html>
4

1 に答える 1

0

ボタンは好きな場所に配置できます。変更する行は次のとおりです。

    webiopi().ready(function() {
            var button;

            // create a "FORWARDS" labeled button for GPIO 7
            button = webiopi().createGPIOButton(7, "FORWARDS");
            $('#select-an-element-here').append(button); // append button to content div

            // create a "REVERSE" labeled button for GPIO 8
            button = webiopi().createGPIOButton(8, "REVERSE");
            $('#select-an-element-here').append(button); // append button to content div                                      
    });

$('#select-an-element-here')ビットは、ページ上の好きな要素をターゲットにすることができます。

例えば：

<p id="example1"></p>
<div id="example2"></div>

以下を使用して、これらのそれぞれに 1 つのボタンを配置できます。

    webiopi().ready(function() {
            var button;

            // create a "FORWARDS" labeled button for GPIO 7
            button = webiopi().createGPIOButton(7, "FORWARDS");
            $('#example1').append(button);

            // create a "REVERSE" labeled button for GPIO 8
            button = webiopi().createGPIOButton(8, "REVERSE");
            $('#example2').append(button);                                      
    });
于 2013-01-30T20:54:56.457 に答える