Entwickler-Ecke
Off Topic - Konzept gesucht: Seiten-Navigator für Web-Anwendung
Narses - Di 27.09.11 17:33
Titel: Konzept gesucht: Seiten-Navigator für Web-Anwendung
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
platzwart - 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...
Narses - 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
jasocul - 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 - 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 - Di 27.09.11 18:41
Moin!
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. :? :nixweiss:
Auf den ersten Blick scheint mir Peters Vorschlag mit dem "50%-Button" ein guter Ansatz. Gibt´s noch andere Ideen? ;)
cu
Narses
elundril - 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?
JungerIslaender - 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
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 - 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 - Di 27.09.11 21:44
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 - 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 - 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 - 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. :?
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! 8) Hat nur einen Haken: das kriege ich in JS niemals hin... :(
Fazit: der "50%-Button" liegt weiter in Führung! ;)
cu
Narses
Boldar - Mi 28.09.11 00:06
Geile Idee, UGrohne...
Ich probiers ma aus...
pdelvo - Mi 28.09.11 07:18
Kann man Silverlight vorraussetzen? Dann könnte man auch einen Slider bauen. ich finde den ganz schön schick und intuiti zu bedienen
Narses - 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
Martok - 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.
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 ;)
Narses - Mi 28.09.11 23:32
Moin!
Ich habe jetzt mal den "50%-Button" getestet. Ist zwar auch nicht die überragende Eleganz, aber brauchbar. :P
Beeindruckend! :shock: Aber leider jQuery. :nixweiss:
| Martok hat folgendes geschrieben : |
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) |
Netter Ansatz, das in der Mitte zu präsentieren. Und Danke für den Code, das schaue ich mir nochmal genauer an. :lupe: ;)
cu
Narses
Martok - Do 29.09.11 00:43
Warum genau ist eigentlich kein jQuery verfügbar (und vor allem: warum kann man das nicht einfach ändern?)
Ohne das würde ich meine Variante auch nicht bauen wollen :P
thepaine91 - Do 29.09.11 08:53
Jo das frag ich mich grad auch vorallem da du doch schreibst Boardmittel CSS/JS und jQuery ist ja nur eine Bibliothek die man in seinen Projektordner legen muss (einbinden) ist mir grad auch nicht ganz klar?
Und ich stimme Martok zu ohne JQuery kann man fast nicht mehr gibt auch nicht all zu viele Webseiten die JS aber kein JQuery verwenden.
Narses - Do 29.09.11 12:10
Moin!
| Martok hat folgendes geschrieben : |
| Warum genau ist eigentlich kein jQuery verfügbar (und vor allem: warum kann man das nicht einfach ändern?) |
| thepaine91 hat folgendes geschrieben : |
| Jo das frag ich mich grad auch vorallem da du doch schreibst Boardmittel CSS/JS und jQuery ist ja nur eine Bibliothek |
Ganz einfach: weil das eine Fehlerquelle ist, die ich nicht riskieren möchte. ;) Es ist ja nicht so, dass jQuery bugfrei ist und zumindest Martok weiß von einem ganz bestimmten, bisher unerklärtem Fall, wo jQuery im IE nicht das tut, was es sollte (OK, von mir aus auch der IE, das kommt aber auf´s gleiche raus). :nixweiss:
| thepaine91 hat folgendes geschrieben : |
| Und ich stimme Martok zu ohne JQuery kann man fast nicht mehr gibt auch nicht all zu viele Webseiten die JS aber kein JQuery verwenden. |
Es ist keine Webseite, sondern eine firmeninterne Anwendung, für die ich die Verantwortung trage. Dass muss alles nicht hypermodern und mit viel Schnickschnack und Eyecandy sein - aber es muss möglichst immer funktionieren, und wenn es das mal nicht tut, dann muss ich ebenfalls möglichst sofort Abhilfe schaffen. Wenn man dann eine unbekannte Fehlerquelle einbaut, dann macht man sich selbst das Leben schwer. :) Ich brauch das jedenfalls nicht. :P
anders gesagt: ich habe nicht die Zeit, das alles so detailiert zu testen und damit zu experimentieren, diese Webanwendung ist ein Arbeitspferd, kein Spaßprojekt, das keinen Stört, wenn´s mal down ist
Irgendwann kommt auch mal jQuery, aber nicht jetzt.
cu
Narses
Regan - Do 29.09.11 12:44
Ich würde ein folgendes vorschlagen:
Wenn man auf die Pfeil geht, dann verschiebt sich die Navigation nach links und die nächsten Seiten kommen zum Vorschein:
thepaine91 - Do 29.09.11 12:59
Hm du hast mich überzeugt ;) muss natürlich jeder selbst wissen.
BenBE - Do 29.09.11 20:47
Wenn ich Bugs in jQuery hatte, dann waren die in der Regel schon gefixt; und das obwohl ich IMMER die aktuelle jQuery-Version reingehauen hab. Sprich: Bugfix bei jQuery ist einmal Updaten ;-)
Ansonsten find ich die mehrstufige Schrittgrößen-Navi durchaus recht günstig. Eine Frage stellt sich mir aber: Wenn du weißt, dass die wichtigen Einträge in der Mitte erscheinen, warum sortierst Du dann nicht die Mitte nach außen? :mrgreen:
Narses - Fr 30.09.11 12:59
Moin!
| Regan hat folgendes geschrieben : |
Ich würde ein folgendes vorschlagen:
Wenn man auf die Pfeil geht, dann verschiebt sich die Navigation nach links und die nächsten Seiten kommen zum Vorschein:
|
OK, Hausaufgabe: wie oft muss der User klicken, wenn die gesuchte Info auf Seite 497 von 513 Seiten gesamt ist? ;) Lies nochmal mein Eröffnungsposting, bitte. :les: :think: Aber trotzdem Danke für den Beitrag. :)
| BenBE hat folgendes geschrieben : |
| Wenn ich Bugs in jQuery hatte, dann waren die in der Regel schon gefixt; und das obwohl ich IMMER die aktuelle jQuery-Version reingehauen hab. Sprich: Bugfix bei jQuery ist einmal Updaten |
Die Grundsatzdiskussion über jQuery ist nutzlos. :nixweiss: Es sei denn, du möchtest mir einen kostenlosen 24/7-Supportvertrag mit 30min. Wiederherstellungszeit anbieten... 8)
| BenBE hat folgendes geschrieben : |
| Ansonsten find ich die mehrstufige Schrittgrößen-Navi durchaus recht günstig. Eine Frage stellt sich mir aber: Wenn du weißt, dass die wichtigen Einträge in der Mitte erscheinen, warum sortierst Du dann nicht die Mitte nach außen? :mrgreen: |
Genau lesen ;) ich weiß nicht, wo die gesuchte Information auf den Seiten steht, das hängt vom Seitencontent ab, ich habe als Einfluss nur den Navigator. Also sollte das Ziel nahe an log(n) Klicks liegen, sonst habe ich die Info-Vorlesungen nicht nur kostenlos (ja, damals war das noch so), sondern sogar umsonst besucht. :roll: Und dabei darf das auch ruhig noch elegant/intuitiv sein, schadet nicht. :D
cu
Narses
Regan - Fr 30.09.11 17:06
| Narses hat folgendes geschrieben : |
| Regan hat folgendes geschrieben : | Ich würde ein folgendes vorschlagen:
Wenn man auf die Pfeil geht, dann verschiebt sich die Navigation nach links und die nächsten Seiten kommen zum Vorschein:
|
OK, Hausaufgabe: wie oft muss der User klicken, wenn die gesuchte Info auf Seite 497 von 513 Seiten gesamt ist? ;) Lies nochmal mein Eröffnungsposting, bitte. :les: :think: Aber trotzdem Danke für den Beitrag. :) |
Exakt 1 mal. Lies nochmal meinen Beitrag, bitte :les: :think: Aber trotzdem Danke für die Abstempelung :evil:
Und ja, bei vielen Seite mag das sein. Allerdings ist keine Navigation in dieser Hinsicht perfekt und nur eine Eingabe der exakten Seitenzahl schafft dabei Abhilfe. Und ob ich nun die gesamte Seite (wer weiß wie groß die ist/wird?) neulade, um mich meiner Zielseite zu nähern (bei der Anzeige von "Richtwerten"), kann ich auch diese Zeit damit verbringen, abzuwarten, und dann gleich die
richtige Seite auszuwählen. Alternativ kannst du diese Verschiebung ja auch mit deinen Zwischenschritten machen.
Edit: Oder mit einem Einfachpfeil, der die Verschiebung verlangsamt.
Narses - Fr 30.09.11 17:21
Moin!
| Regan hat folgendes geschrieben : |
| Exakt 1 mal. Lies nochmal meinen Beitrag, bitte :les: :think: |
:shock: :oops: Oh, stimmt,
Klicken müsste er nur ein mal. :nixweiss: Allerdings habe ich bei dem Vorschlag die Scroll-Wartezeit zusätzlich. :?
| Regan hat folgendes geschrieben : |
bei vielen Seite mag das sein. Allerdings ist keine Navigation in dieser Hinsicht perfekt und nur eine Eingabe der exakten Seitenzahl schafft dabei Abhilfe. Und ob ich nun die gesamte Seite (wer weiß wie groß die ist/wird?) neulade, um mich meiner Zielseite zu nähern
[...]
und dann gleich die richtige Seite auszuwählen. |
OK, mir scheint, dass ich die tatsächlichen Probleme nicht gut genug geschrieben habe. Also:
- Es ist nicht möglich die gesuchte Seitenzahl exakt im Voraus zu bestimmen, das hängt von der Auswahl Elemente ab, die seitenweise ausgegeben werden. Deshalb muss der User raten, klicken, sich orientieren und neu raten, klicken, etc.
- Die Elemente in der Auswahl sind sortiert (Voraussetzung für binäres Suchen gegeben)
- Es geht darum, mit möglichst wenigen Klicks auszukommen (also nahe bei log(n) Klicks zu landen)
cu
Narses
Regan - Fr 30.09.11 17:35
| Narses hat folgendes geschrieben : |
- Es ist nicht möglich die gesuchte Seitenzahl exakt im Voraus zu bestimmen, das hängt von der Auswahl Elemente ab, die seitenweise ausgegeben werden. Deshalb muss der User raten, klicken, sich orientieren und neu raten, klicken, etc.
|
Das ändert die Situation natürlich und lässt meine Variante alt aussehen :( Damit wird der Vorteil des "Nicht-Ladens" natürlich wettgemacht, da das Laden der Seiten explizit gewünscht wird. Bis auf die Mittellösung nach Binärer Suche wird dir wohl nicht anderes bleiben :nixweiss:
Entwickler-Ecke.de based on phpBB
Copyright 2002 - 2011 by Tino Teuber, Copyright 2011 - 2026 by Christian Stelzmann Alle Rechte vorbehalten.
Alle Beiträge stammen von dritten Personen und dürfen geltendes Recht nicht verletzen.
Entwickler-Ecke und die zugehörigen Webseiten distanzieren sich ausdrücklich von Fremdinhalten jeglicher Art!