1

Web サイトのページネーションを作成していて、入力要素を使用してページ間を移動したいと考えています。

次の例のように:

ページネーションの例

入力では、スクリプトをトリガーするために「return」キーを押す必要があります。

入力した値が範囲内にない場合、アラートがトリガーされます。例：32ページだった場合「1～32の値を入力してください」

ページの範囲内で値の変更を検出し、そのページにリダイレクトすることで、jQueryまたはjavascriptを使用してこれを行うことはできますか?

ゲッティ イメージズで同じデバイスを作成しようとしています。

http://www.gettyimages.com.au/Search/Search.aspx?contractUrl=2&language=en-US&family=creative&p=ball&assetType=image&clarification=ball%3A60847

4

3 に答える 3

3

get form と javascript なしの html5 を使用してこれを行うことができます。

<form class="pageNumberForm" type="GET">
    <input type="number" name="page" class="pageNumber" min="1" max="6" value="1" />
</form>​​​​​​​​​​​​​​​​​​​​​​​​​

PHP を使用している場合は、最大ページと現在のページを入力できます。

<form class="pageNumberForm" type="GET">
    <input type="number" name="page" class="pageNumber" min="1" max="[page maximum]" value="[current page]" />
</form>​

jquery validate を追加して、html5 をサポートしていないブラウザーのフォームを検証することができます。

編集1：

または、次の jquery コードを追加して、getty のように単純な検証を行うこともできます。

$('.pageNumberForm').submit(function() {
    var pageInput = $(this).children('.pageNumber').first();
    var pageInputValue = pageInput.val();

    if (pageInputValue < pageInput.attr('min') || pageInputValue > pageInput.attr('max') || !pageInputValue.match(/\d+/)) {
        alert('Please enter a value between ' + pageInput.attr('min') + ' and ' + pageInput.attr('max'));
        return false;
    }
});​
于 2012-11-01T11:19:47.530 に答える
0

私のサイトは ASP で、次のコードを使用して動作するようになりました。

<form type="get" onchange="return false">
<input type="number" name="page" id="page" min="1" max="5" value="1" />

HTML5 をサポートしていないブラウザー用に jQuery 検証を追加しようとしますが、IE8 でも機能するので満足しています。

于 2012-11-01T23:28:20.290 に答える
0

「return」キーでページ変更スクリプトを実行するには、$('input').on('keypress')イベントを使用してプロパティをチェックevent.whichする必要があります (「return」の場合は「13」である必要があります)。

于 2012-10-31T02:14:14.510 に答える