3

誰かがページネーションの定義された標準を知っていますか？私たちのためにウェブサイトを構築しているコンサルタント会社があり、サイトの一部にはページネーションを使用するアイテムのリストがあります。それらは、数字のリスト（リンク）の両側にある2つのボタンで構成されるかなり標準的なページネーションレイアウトを持っています。 

[<<]  [<]   1   2   3   4   5   [>]  [>>]

ボタン[<]と[>]は、ページを前後に移動します。番号はすべてページへの直接リンクです。

私が抱えている問題は、二重の「矢印」が付いたボタンにあります。これらはあなたを最初または最後のページに連れて行くべきだと思います。ここの誰もがそれに同意し、それがそのように機能することを期待しています。ただし、サイトを設計した会社では、これらのボタンが10ページ前後にジャンプしています。私はこれがこのように行われるのを見たことがないので、期待される動作は私や他のユーザーが期待するものではありません。このサイトは昨夜公開されたばかりで、すでに3人のユーザーがこの機能をバグとして報告しています。

コンサルタントに見せるためにこれに使用できる一連の基準はありますか？彼らはこの機能を変更したくありません。

前もって感謝します。

4

4 に答える 4

3

ページ付け標準の問題は、最善の解決策が実際に以下に依存することです。

  • 何がページ化されているか
  • 結果セットのサイズ
  • 結果セットを移動するパフォーマンスと技術的実現可能性

あなたの特定のケースでは、二重矢印が10を移動することは期待していません。これは最初/最後よりも便利かもしれませんが、任意の10値を何らかの方法でユーザーに表示する必要があります。

UIページネーションの例を次に示します。

于 2012-07-06T16:29:40.200 に答える
1

個人的には、左端と右端のボタンはそれぞれ最初と最後のページに移動する必要があります。しかし、それを作った会社は、二重矢印を使用していることを考えると、正しい動作を使用したと思います。私にとって、二重矢印は、単一矢印と同じことをしますが、それ以上のことを示します。つまり、1本の矢印は1ページ左または右に移動するので、2本の矢印は10ページ左または右に移動するのが理にかなっていると思います。

基本的に：

  • 使用されている記号に関する動作に同意します。
  • 記号の選択に同意しません。ほとんどの場合、単一の矢印+垂直線（l<および>l）の方が明確だと思いますが、それは私の個人的な意見です。
于 2012-07-06T16:32:19.193 に答える
1

標準のようなものは聞いたことがありませんが、あなたが説明する方法で常にコーディングしています。ページ数が比較的多い場合は forward 10 が便利ですが、ページ数が非常に多い場合は面倒です。ただし、それだけ多くのページがある場合、ユーザーがデータをページングする可能性はほとんどありません。その場合に必要なのは検索です。とにかく、あなたが間違っているとあなたに言っているコンサルタントは、あなたが新しいコンサルタントを探すべきであるように思えます. 彼らは同意しないかもしれません (そして、私は議論の彼らの側を見ることができました) でも、最終決定権はあなたにあるはずです...

于 2012-07-06T16:19:23.920 に答える
1

これは、最近作成したページネーション コントロールのコードで、次の利点があります。

  • 最初と最後のページ番号は常に表示されます ([<<] または [>>] ボタンは必要ありません)。
  • [...] をクリックすると、任意のページにすばやくジャンプできます
  • ローカライズする単語はありません (コントロールが明確であるため、次、前、最初、最後のボタンは必要ありません)
  • 依存関係なし (jQuery は不要)

以下のコード スニペットを実行して、ご意見をお聞かせください。

var Pagination = {
  code: '',

  Extend: function(data) {
    data = data || {};
    Pagination.size = data.size || 300;
    Pagination.page = data.page || 1;
    Pagination.step = data.step || 3;
  },

  Add: function(s, f) {
    for (var i = s; i < f; i++) {
      Pagination.code += '<a>' + i + '</a>';
    }
  },

  Last: function() {
    Pagination.code += '<i>...</i><a>' + Pagination.size + '</a>';
  },

  First: function() {
    Pagination.code += '<a>1</a><i>...</i>';
  },


  Click: function() {
    Pagination.page = +this.innerHTML;
    Pagination.Start();
  },

  Prev: function() {
    Pagination.page--;
    if (Pagination.page < 1) {
      Pagination.page = 1;
    }
    Pagination.Start();
  },

  Next: function() {
    Pagination.page++;
    if (Pagination.page > Pagination.size) {
      Pagination.page = Pagination.size;
    }
    Pagination.Start();
  },

  TypePage: function() {
    Pagination.code = '<input onclick="this.setSelectionRange(0, this.value.length);this.focus();" onkeypress="if (event.keyCode == 13) { this.blur(); }" value="' + Pagination.page + '" /> &nbsp; / &nbsp; ' + Pagination.size;
    Pagination.Finish();
    var v = Pagination.e.getElementsByTagName('input')[0];
    v.click();
    v.addEventListener("blur", function(event) {

      var p = parseInt(this.value);

      if (!isNaN(parseFloat(p)) && isFinite(p)) {
        if (p > Pagination.size) {
          p = Pagination.size;
        } else if (p < 1) {
          p = 1;
        }
      } else {
        p = Pagination.page;
      }

      Pagination.Init(document.getElementById('pagination'), {
        size: Pagination.size,
        page: p,
        step: Pagination.step
      });
    }, false);
  },


  Bind: function() {
    var a = Pagination.e.getElementsByTagName('a');
    for (var i = 0; i < a.length; i++) {
      if (+a[i].innerHTML === Pagination.page) a[i].className = 'current';
      a[i].addEventListener('click', Pagination.Click, false);
    }
    var d = Pagination.e.getElementsByTagName('i');
    for (i = 0; i < d.length; i++) {
      d[i].addEventListener('click', Pagination.TypePage, false);
    }
  },

  Finish: function() {
    Pagination.e.innerHTML = Pagination.code;
    Pagination.code = '';
    Pagination.Bind();
  },

  Start: function() {
    if (Pagination.size < Pagination.step * 2 + 6) {
      Pagination.Add(1, Pagination.size + 1);
    } else if (Pagination.page < Pagination.step * 2 + 1) {
      Pagination.Add(1, Pagination.step * 2 + 4);
      Pagination.Last();
    } else if (Pagination.page > Pagination.size - Pagination.step * 2) {
      Pagination.First();
      Pagination.Add(Pagination.size - Pagination.step * 2 - 2, Pagination.size + 1);
    } else {
      Pagination.First();
      Pagination.Add(Pagination.page - Pagination.step, Pagination.page + Pagination.step + 1);
      Pagination.Last();
    }
    Pagination.Finish();
  },


  Buttons: function(e) {
    var nav = e.getElementsByTagName('a');
    nav[0].addEventListener('click', Pagination.Prev, false);
    nav[1].addEventListener('click', Pagination.Next, false);
  },

  Create: function(e) {
    var html = [
      '<a>&#9668;</a>', // previous button
      '<span></span>', // pagination container
      '<a>&#9658;</a>' // next button
    ];
    e.innerHTML = html.join('');
    Pagination.e = e.getElementsByTagName('span')[0];
    Pagination.Buttons(e);
  },

  Init: function(e, data) {
    Pagination.Extend(data);
    Pagination.Create(e);
    Pagination.Start();
  }
};

var init = function() {
  Pagination.Init(document.getElementById('pagination'), {
    size: 30, // pages size
    page: 1, // selected page
    step: 2 // pages before and after current
  });
};

document.addEventListener('DOMContentLoaded', init, false);
html {
  height: 100%;
  width: 100%;
  background-color: #ffffff;
}
body {
  margin: 0;
  height: 100%;
  width: 100%;
  text-align: center;
  font-family: Arial, sans-serif;
}
body:before {
  content: '';
  display: inline-block;
  width: 0;
  height: 100%;
  vertical-align: middle;
}
#pagination {
  display: inline-block;
  vertical-align: middle;
  padding: 1px 2px 4px 2px;
  font-size: 12px;
  color: #7D7D7D;
}
#pagination a,
#pagination i {
  display: inline-block;
  vertical-align: middle;
  width: 22px;
  color: #7D7D7D;
  text-align: center;
  padding: 4px 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}
#pagination a {
  margin: 0 2px 0 2px;
  cursor: pointer;
}
#pagination a:hover {
  background-color: #999;
  color: #fff;
}
#pagination i {
  border: 2px solid transparent;
  cursor: pointer;
}
#pagination i:hover {
  border: 2px solid #999;
  cursor: pointer;
}
#pagination input {
  width: 40px;
  padding: 2px 4px;
  color: #7D7D7D;
  text-align: right;
}
#pagination a.current {
  border: 1px solid #E9E9E9;
  background-color: #666;
  color: #fff;
}
<div id="pagination"></div>

于 2014-11-26T04:36:51.387 に答える