Question

所以我在我的网络应用程序中使用jQuery Mobile，并且我使用 ui-field-contains 和 ui-grid-a 作为容器div为我的内容。

但是，由于这一点，其中包含的所有元素似乎都设置为屏幕的整个宽度，并且每个元素占据页面上的整行（甚至是span元素）。

我已经能够使用CSS调整宽度尺寸了，但是，我想将这些元素中的一些放在一起，而我在如何实现这一目标方面感到茫然，因为它“我不喜欢用 br 标签将它们隔开。

这是我的一些代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta name="viewport" content="width=device-width,initial-scale=1">

        <!--CSS Stylesheets-->
        <link rel="stylesheet" type="text/css" href="includes/css/style.css">

        <!--jQuery Mobile Stylesheets-->
        <link rel="stylesheet" type="text/css" href="includes/jQueryMobile/jquery.mobile-1.4.5.min.css">

        <!--jQuery Library-->
        <script src="includes/jQuery/jquery-1.11.3.min.js"></script>

        <!--jQuery Mobile Library-->
        <script src="includes/jQueryMobile/jquery.mobile-1.4.5.min.js"></script>

        <!--jQuery Functions-->
        <script src="includes/js/functions.js"></script>

    </head>
    <body>   
        <div data-role="page" data-theme="b">

            <div data-role="header">
                <h1>
                    Create Survey
                </h1>
            </div>

            <div id="main" data-role="main" class="ui-content">
                <form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
                    <div class="ui-field-contain">
                        <div class="ui-grid-a">
                            <label for="addQ" class="ui-hidden-accessible">Add Question</label>
                            <input type="button" value="Add Question" id="addQ" class="smallerBtns">

                            <!--Transportation Div-->
                            <div id="container">
                            </div>
                                <br>
                            <label for="submitSurvey" class="ui-hidden-accessible">Submit Survey</label>
                            <input type="submit" value="Submit Survey" id="submitSurvey">
                        </div>
                    </div>
                </form>
            </div>

            <div data-role="footer" data-position="fixed">
                <nav data-role="navbar">
                    <ul>
                        <li><a href="index.php">Home</a></li>
                        <li><a href="createSurvey.php">Create Survey</a></li>
                        <li><a href="takeSurvey.php">Take Survey</a></li>
                    </ul>
                </nav>
            </div>

        </div>
    </body>
</html>

以下是我通过javascript添加到容器div中的一些内容：

//Question Type Visibility
$(document).bind("pageinit",function(){

    $("#container").empty();

    //Reset qCount
    qCount = 0;



    //jquery Add Question Event
    $(document).undelegate('#addQ', 'click').delegate('#addQ','click', function() {

        //Increment question counter
        qCount++;

        $('\
            <div id="newQ' + qCount + '">\
                <span id="num' + qCount + '" class="nums">' + qCount + '.</span>\
                \
                <!--Question Title-->\
                <label id="qTitleLabel' + qCount + '" for="qTitle" class="ui-hidden-accessible">\
                    Question Title:\
                </label>\
                <input type="text" name="qTitle' + qCount + '" id="qTitle' + qCount + '" placeholder="Question Title">\
                \
                <!--Question Type-->\
                <label id="qTypeLabel' + qCount + '" for="addQType' + qCount + '" class="ui-hidden-accessible">\
                    Question Type:\
                </label>\
                <select name="addQType' + qCount + '" id="addQType' + qCount + '" class="' + qCount + '">\
                    <option selected disabled hidden value=\'\'>Pick a Type</option>\
                    <option value="smallTextDiv">Small Text</option>\
                    <option value="tORfDiv">True or False?</option>\
                    <option value="dropdownDiv">Dropdown</option>\
                    <option value="numDiv">Number</option>\
                    <option value="radDiv">Radio Buttons</option>\
                    <option value="largeTextDiv">Large Text</option>\
                    <option value="checkboxDiv">Checkboxes</option>\
                </select>\
                \
                <!--Small Text-->\
                <div id="smallTextDiv' + qCount + '" class="types' + qCount + '">\
                    <label id="addQSmallTextLabel' + qCount + '" for="addQSmallText' + qCount + '">\
                        Preview:\
                    </label>\
                    <input type="text" name="addQSmallText' + qCount + '" id="addQSmallText' + qCount + '">\
                </div>
          ').hide().appendTo("#container").fadeIn(1000).enhanceWithin();
    }) //end add question
}) //end document ready function

Answer 1

此页面可以帮助您使用网格... http://demos.jquerymobile.com/1.4.1/grids/

如果您需要将表单元素内联（并排），您还应该能够使用网格来使用嵌套网格完成布局

<div class="ui-grid-a">
   <div class="ui-grid-a"><div>
   <div class="ui-grid-b"><div>
</div>

看到这个小提琴...... http://jsfiddle.net/j5zbB/

如何在jQuery Mobile中构造元素

1 个答案: