Konzept gesucht: Seiten-Navigator für Web-Anwendung

Narses · Verfasst: Di 27.09.11 17:33

Moin!

Ihr kennt ja diese wunderbaren Seiten-Navigatoren in Webanwendungen (habe wir hier ja auch). Ich habe auch sowas in meiner Anwendung, allerings habe ich das Problem, dass mal nur ein paar, aber auch mal 150 oder gar 350 (oder 500) Seiten auftreten können. :nixweiss:

Aktuell habe ich ein Navigator-Konzept, dass <= 12 Seiten alle Seiten als Link direkt verfügbar macht, aber der 13. Seite wird das so ähnlich wie in der EE gemacht:
1, 2, 3 ... 98, 99, 100
1, 2, 3 ... 10, 11, 12 ... 98, 99, 100

Wenn man jetzt aber weiß, dass die gesuchte Seite so ungefähr um die Mitte herum ist, dann klickt man sich ja einen Wolf. :roll:

Eine Dropdown-Box ist allgemein gesehen auch nicht praktikabel, wenn es wirklich viele Einträge sind, ein Eingabefeld ist zwar funktional, aber nicht so richtig elegant zu bedienen. :idea:

Man muss doch irgendwie ein intuitives, "direkt-klickbares" Konzept basteln können, wie man sowas ala binärer Suche in annährend log(n)-Schritten hinkriegen kann (kleine Einschränkung: ich bin jetzt nicht der JavaScript-Gott und sowas wie jquery habe ich auch nicht zur Verfügung, also max. "Hausmittelchen"). :gruebel:

Aber ich hab da wohl grade ein Brett vorm Kopp...

Suggestions, anyone?

cu
Narses

_________________
There are 10 types of people - those who understand binary and those who don´t.

platzwart · Verfasst: Di 27.09.11 18:06

Hmm.. vlt sowas wie eine Trackbar und dazu ein Label, dass dann sowas anzeigt wie "35/78" oder so...

_________________
Wissenschaft schafft Wissenschaft, denn Wissenschaft ist Wissenschaft, die mit Wissen und Schaffen Wissen schafft. (myself)

Narses · Verfasst: Di 27.09.11 18:10

Moin!

platzwart hat folgendes geschrieben :

vlt sowas wie eine Trackbar und dazu ein Label,

Wie willste das denn denn im Browser umsetzen? :nixweiss:

cu
Narses

_________________
There are 10 types of people - those who understand binary and those who don´t.

platzwart · Verfasst: Di 27.09.11 18:21

Dafür gibt es ja unmengen Frameworks. Eventuell kann man sich da was abschaun.

www.primefaces.org/s...e-labs/ui/slider.jsf

_________________
Wissenschaft schafft Wissenschaft, denn Wissenschaft ist Wissenschaft, die mit Wissen und Schaffen Wissen schafft. (myself)

jasocul · Verfasst: Di 27.09.11 18:22

Es gibt doch immer diese netten "Blätter"-Symbole.
Mache doch ein weiteres Symbol, dass immer 50% weiter geht in der entsprechenden Richtung. Natürlich immer 50% zwischen dem aktuellen Wert und dem End-, bzw. Anfangswert

jaenicke · Verfasst: Di 27.09.11 18:23

Ich habe in meiner DataSnap-HTML-Tabelle schlicht ein Eingabefeld, in das man eine Seitenzahl eingeben kann. (Das ist ein Objekt, das um eine html-table mit JavaScript initialisiert wird.)

Du könntest auch mathematisch herangehen und z.B. eine logarithmisch skalierte Auswahl oder wie bei einer Binärsuche einzelne Werte aus der Range oder ähnliches bauen.

Eine andere Lösung wäre eine graphisch ansprechendere Auswahl via viel JavaScript, aber wenn das auch für ältere Browser sein soll, siehts mau aus.

Narses · Verfasst: Di 27.09.11 18:41

Moin!

platzwart hat folgendes geschrieben :

Dafür gibt es ja unmengen Frameworks. Eventuell kann man sich da was abschaun.
www.primefaces.org/s...e-labs/ui/slider.jsf

Danke für den Tipp, aber das setzt Java voraus - und scheidet damit komplett aus.

(falls es irgendwie interessant sein sollte: es wird [momentan] ausschließlich der IE8 verwendet, und zwar ohne weitere Extras; daran wird sich auch so schnell nix ändern)

jasocul hat folgendes geschrieben :

Mache doch ein weiteres Symbol, dass immer 50% weiter geht in der entsprechenden Richtung. Natürlich immer 50% zwischen dem aktuellen Wert und dem End-, bzw. Anfangswert

Hmm, das hört sich doch gar nicht so schlecht an... :think:

jaenicke hat folgendes geschrieben :

Ich habe in meiner DataSnap-HTML-Tabelle schlicht ein Eingabefeld, in das man eine Seitenzahl eingeben kann.

Ja, hab ich ja auch schon geschrieben, total funktional, aber wenig elegant bzw. intuitiv zu bedienen (im Browser).

jaenicke hat folgendes geschrieben :

Du könntest auch mathematisch herangehen und z.B. eine logarithmisch skalierte Auswahl oder wie bei einer Binärsuche einzelne Werte aus der Range oder ähnliches bauen.

Tja, da so ein paar "Zwischenstationen" einzusteuen hat mir auch schon vorgeschwebt, aber dann kommen die Details: aus welcher Richtung "gesehen", das spielt ja dann eine Rolle, wie sieht´s mit dem Cursor aus, usw.usf. :gruebel:

jaenicke hat folgendes geschrieben :

Eine andere Lösung wäre eine graphisch ansprechendere Auswahl via viel JavaScript, aber wenn das auch für ältere Browser sein soll, siehts mau aus.

Wie oben angedeutet ist das ausschließlich IE8 (die User haben da keine Wahl), aber das "viel Javascript" wird nix.

Auf den ersten Blick scheint mir Peters Vorschlag mit dem "50%-Button" ein guter Ansatz. Gibt´s noch andere Ideen?

cu
Narses

_________________
There are 10 types of people - those who understand binary and those who don´t.

elundril · Verfasst: Di 27.09.11 18:53

Und so wie in den neuen phpBB-foren ein "Gehe zu"-Feld machen willst nich, nehm ich an, oder?

_________________

This Signature-Space is intentionally left blank.
Bei Beschwerden, bitte den Beschwerdebutton (gekennzeichnet mit PN) verwenden.

Kha · Verfasst: Di 27.09.11 19:01

So schlecht steht es um IE8 doch gar nicht :gruebel:

. jQuery UI soll angeblich schon ab 6.0 laufen.

_________________
>λ=

JungerIslaender · Verfasst: Di 27.09.11 20:18

Ich weiss nict ob diese Idee umsetzbar ist, aber hier mein Vorschlag

jede hunderter/zehner/einer Stelle ist Anklickbar

markieren

Quelltext

1:
2:

Hunderter         Zehner        Einer
012               012345        0123456789

Hier mit 259 Seiten. Sieht in der Form nicht elegant aus, jede seite ist per Klick ohne eingabe erreichbar. Und graphisch wie Bei "dem Telephon mit dem Apfel" als Drehrad für jede Stelle darstellbar.

UGrohne · Verfasst: Di 27.09.11 21:25

@JungerIslaender: Dein Beispiel stimmt nicht ganz, denn auch der Zehner müsste von 0-9 gehen. Nimmt wieder recht viel Platz weg und ist nicht besonders intuitiv. Ich hätte da folgende Kurzschlussidee, müsste man mal ausprobieren, ob man das praktikabel hinbekommt.

- Die Breite der Leiste erhöhen, den Rest so wie in Deinem Beispiel, nur mit größeren Zwischenräumen: 1 2 3 ....... 10 11 12 ....... 154
- Mit der Maus kann man nun über die Punkte fahren und per JavaScript wird darunter ein genauso breites Panel eingeblendet, das die Zwischenräume beinhaltet.
- Je nach verfügbarer Breite (gesamtes Control) und der Anzahl der darzustellenden Seitenlinks wird u.U. wieder unterteilt.
- Im ersten Bereich siehts also so aus:

1 2 3 ....... 10 11 12 ....... 154
4 5 6 7 8 9

- Und im zweiten Bereich so:
1 2 3 ....... 10 11 12 ....... 154
13 .... 45 .... 80 ... 115 ... 154
46 .... 55 .... 65 .... 75 .... 79
47 48 49 50 51 52 53 54

Dürfte vom Algorithmus nicht ganz einfach werden, aber man kommt mit der Maus auf jede einzelne Seite.

So und jetzt brauchen wir einen JS-Master, der das benutzerfreundlich hinbekommt

JungerIslaender · Verfasst: Di 27.09.11 21:44

JungerIslaender hat folgendes geschrieben :

Hier mit 259 Seiten.

hätte vlt maximal 259 Seiten schreiben sollen. Ist das iphone nicht der inbegriff von Intuitiv.

Und sonst wie wärs mit ner Scrollbar?

UGrohne · Verfasst: Di 27.09.11 22:08

Manchmal find ich das iPhone auch nicht intuitiv. Und zu Deinem Beispiel: wie kommst Du auf Seite 196?

JungerIslaender · Verfasst: Di 27.09.11 22:34

UGrohne hat folgendes geschrieben :

Manchmal find ich das iPhone auch nicht intuitiv. Und zu Deinem Beispiel: wie kommst Du auf Seite 196?

Ich drücke schnell die 6 und die 3 hintereinander, ich meine: Verdammt...

Narses · Verfasst: Di 27.09.11 22:55

Moin!

Vielen Dank für´s Mitdenken an Alle! :zustimm:

elundril hat folgendes geschrieben :

Und so wie in den neuen phpBB-foren ein "Gehe zu"-Feld machen willst nich, nehm ich an, oder?

Wie ich schon schrieb, ein Eingabefeld betrachte ich bis auf weiteres erstmal als "Backup", wenn sich nix brauchbareres findet, als das.

Kha hat folgendes geschrieben :

So schlecht steht es um IE8 doch gar nicht :gruebel:

. jQuery UI soll angeblich schon ab 6.0 laufen.

Geht auch nicht darum, dass es nicht laufen würde, ich kann aber (zunächst mal) nicht darauf zurückgreifen. :nixweiss:

UGrohne hat folgendes geschrieben :

Dürfte vom Algorithmus nicht ganz einfach werden, aber man kommt mit der Maus auf jede einzelne Seite.

So und jetzt brauchen wir einen JS-Master, der das benutzerfreundlich hinbekommt

Coole Idee!

Hat nur einen Haken: das kriege ich in JS niemals hin...

Fazit: der "50%-Button" liegt weiter in Führung!

cu
Narses

_________________
There are 10 types of people - those who understand binary and those who don´t.

Boldar · Verfasst: Mi 28.09.11 00:06

Geile Idee, UGrohne...
Ich probiers ma aus...

pdelvo · Beiträge: 55 Erhaltene Danke: 11

Kann man Silverlight vorraussetzen? Dann könnte man auch einen Slider bauen. ich finde den ganz schön schick und intuiti zu bedienen

Narses · Verfasst: Mi 28.09.11 11:29

Moin!

pdelvo hat folgendes geschrieben :

Kann man Silverlight vorraussetzen?

Nein, steht nicht zur Verfügung. Nur IE8 und Bordmittel (CSS, JS).

cu
Narses

_________________
There are 10 types of people - those who understand binary and those who don´t.

thepaine91 · Verfasst: Mi 28.09.11 11:45

Das finde ich persöhnlich noch ganz nett.

www.egrappler.com/jq...ackbar-smart-slider/

Martok · Verfasst: Mi 28.09.11 15:49

Also die ganz primitive Variante wäre ja, einfach mehrere "Spul-Links" zu haben, die jeweils in größeren Schritten springen:

1 <<< << < 37,38,39,40,41,42,43,44,45,46,47 > >> >>> 255 (generiert je nachdem wie weit man braucht)

Diese könnten dann 10,50,100 Seiten weiter springen. Damit kann man, wenn man von 1 zu 123 will das mit einigen wenigen Klicks machen: 100 rechts, 10 rechts, 10 rechts, 123 anklicken.

Den Prozess des auswählens kann man dann auch gerne per JS machen und erst beim wirklichen Seite auswählen einen Request auslösen.

markieren

Firebug

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:

var maxpages = 255;
var page=42;
var center=42;

links = [1];
if (center>100) links.push('<<<');
if (center>50) links.push('<<');
if (center>10) links.push('<');
for (var i=Math.max(center-5,2);i<=Math.min(center+5,maxpages-1);i++) {
  if (i==page)
    links.push('['+i+']');
  else
    links.push(i);
}

if (center<maxpages-10) links.push('>');
if (center<maxpages-50) links.push('>>');
if (center<maxpages-100) links.push('>>>');
links.push(maxpages);

console.log(links.join(', '))

Nach belieben mit DOM zu würzen

_________________
"The phoenix's price isn't inevitable. It's not part of some deep balance built into the universe. It's just the parts of the game where you haven't figured out yet how to cheat."

	Mitgliederliste
	Gruppen
	Das Team
	Richtlinien
	Synonyme