ページングの Web 標準実装 bar_javascript スキル

ページング バーは、Web ページで最も一般的なコンポーネントです。このブログ投稿では、web2.0 ページング バーの標準的な例を示し、簡単な分析を行います。このページング バーのインターフェイス効果は次のとおりです:

このページング バー コンポーネントには次の特性があります:

1。現在のページ番号に関係なく、ページング バーには常に最初のページのページ番号と最後のページのページ番号が表示されます (上の図を参照)。これにより、ユーザーは最後のページ番号から合計ページ数がわかるだけでなく、最後のページと最初のページの間を簡単に移動することができます。

2. は、表示されるページ番号 (省略記号は 1 と数えます) の数を常に固定します。たとえば、9 に固定します。以下の 2 つの図に示すように、現在のページ番号が 1 または 9 (またはその他の番号) の場合、表示されるページ番号の数は 9 です。 。このように、Ajax ページングを実行する場合、ボタンの位置が変わるため、ユーザーは移動することなく、次のページ ボタンの位置は常に変更されません。マウスを使用すると、ユーザー エクスペリエンスが大幅に向上します。

3. 表示されるページ番号の数は、インターフェースのパラメーターを通じて簡単に設定できます。 genPaginationHtml() インターフェースの deviation (オフセット) パラメーターは、現在のページ番号の左側または右側に表示されるページ番号の数を設定するために使用されます。したがって、表示されるページ番号の総数は 2*偏差 1 となります。たとえば、この例では、deviation が 4 に設定されている場合、合計 9 ページ番号が表示されます。

この例の次のソース コードをコメントアウトし、インターフェイスのコメント前後の 2 つの違いを比較してください。 Google のページネーションの動作を比較することもできます。その動作は、この例の次のコードをコメントアウトした後の動作であることがわかります。この例を作成するときに、Google のページネーションの動作を研究し、それを徐々に進化させ、拡張しました。