Question

我正在更新网站并逐渐将所有位更改为jquerymobile以使其更适合手机使用。

我有一个页面，用户可以选择特定月份或日期范围。我使用一些javascript在他们之间切换。但是，由于更改显示：块等似乎无法正常工作。它显示它们的位置。当您在它们之间切换时，输入字段现在显示在选择器上方。请参阅http://jsfiddle.net/pfLme/1/

显然我想让他们进入正确的位置。（下一个任务是尝试让Datepicker工作 - 如果有人想指出我正确的方向）

谢谢。

（代码全部在jsfiddle，但stackoverflow告诉我我也需要在这里包含它）

    function showType(allornone) {

    if (allornone == '1month')

    {
        document.getElementById('btwdateselector').style.display = 'none';
        document.getElementById('monthselector').style.display = 'block';

        document.getElementById('datestart').value = '';
        document.getElementById('dateend').value = '';

    }
    if (allornone == '2dates')

    {
        document.getElementById('btwdateselector').style.display = 'block';
        document.getElementById('monthselector').style.display = 'none';
    }

} //end function

...我当然意识到我必须习惯于思考＆amp;利用jquery mobile的jquery方面也是如此。到目前为止，我想出了

$(document).on('click', '#certainmonth', function(a) {
    $('#monthselector').hide();});

$(document).on('click', '#btwdates', function(a) {
    $('#btwdateselector').show();});

我不确定如何包含if语句并在show和hide之间切换。

Answer 1

错误仅发生在Firefox 27.0.1

中

解决方法是将放射线框周围的<fieldset data-type="controlgroup">更改为<div data-type="controlgroup">。感谢奥马尔的帮助。

http://jsfiddle.net/pfLme/11/

<form action="page.php" name="mileageform" class="responsive_block" data-ajax="false">
    <div data-role="controlgroup">
        <legend>Should be at TOP</legend>
        <input type="radio" name="searchtype" value="certainmonth" id="certainmonth" checked="checked" />
        <label for="certainmonth">Mileage for certain month</label>
        <input type="radio" name="searchtype" value="btwdates" id="btwdates" />
        <label for="btwdates">Mileage between two dates</label>
    </div>
    <fieldset id="monthselector" data-role="controlgroup" data-type="horizontal">
        <select name="month" data-native-menu="false">
            <option value="1">1</option>
            <option value="2">2</option>
        </select>
        <select name="year" data-native-menu="false">
            <option value="2000">2000</option>
            <option value="2001">2001</option>
        </select>
    </fieldset>
    <fieldset id="btwdateselector" class="ui-screen-hidden">
        <div class="ui-field-contain">
            <label for="datestart">Start Date:</label>
            <input type="date" id="datestart" name="datestart" placeholder="dd/mm/yyyy" />
        </div>
        <div class="ui-field-contain">
            <label for="dateend">End Date:</label>
            <input type="date" id="dateend" name="dateend" placeholder="dd/mm/yyyy" />
        </div>
    </fieldset>
    <input type="submit" onclick="return checkForm();" value="Display Mileage" />
</form>


$(document).on('change', '#certainmonth, #btwdates', function (a) {
    $('#monthselector').toggleClass("ui-screen-hidden");
    $('#btwdateselector').toggleClass("ui-screen-hidden");
});

jquerymobile控制组无法正常显示

1 个答案: