0

私はウェブサイトを更新しており、徐々にすべてのビットを jquerymobile に変更して、より携帯電話に適したものにしています。

ユーザーが特定の月または日付範囲を選択できるページがありました。JavaScriptを使用してそれらを切り替えました。ただし、display:block などを変更したため、正しく動作していないようです。それらを位置ずれして表示します。入力フィールドを切り替えると、セレクターの上に入力フィールドが表示されるようになりました。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

...もちろん、jquery mobile の jquery 側についても考えて利用することに慣れる必要があることを理解しています。これまでのところ、私は思いついた

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

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

if ステートメントを含めて、表示と非表示を切り替える方法はまだわかりません。

4

1 に答える 1

0

エラーは 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");
});
于 2014-02-24T00:56:02.457 に答える