4
Strkutur oder Leitfaden erstellen!
Hallo zusammen,
ich möchte gerne eine Leitfaden in meine Seite einbauen, damit die User wissen, wo sie sich befinden!
Ihr kennt es aus diversen Bestellvorgängen, wo oben eine Navigation angezeigt wird. (Bestellung - Konto -Lieferadresse - usw. - Abschicken)
Ich habe keinerlei Ideen, wie ich damit anfangen soll bzw. wie ich das mit den einzelnen Seiten verknüpfen kann!
Google konnte mir auch nicht weiterhelfen!
Vielen Dank im Voraus für eure Hilfe!
Florian
ich möchte gerne eine Leitfaden in meine Seite einbauen, damit die User wissen, wo sie sich befinden!
Ihr kennt es aus diversen Bestellvorgängen, wo oben eine Navigation angezeigt wird. (Bestellung - Konto -Lieferadresse - usw. - Abschicken)
Ich habe keinerlei Ideen, wie ich damit anfangen soll bzw. wie ich das mit den einzelnen Seiten verknüpfen kann!
Google konnte mir auch nicht weiterhelfen!
Vielen Dank im Voraus für eure Hilfe!
Florian
<html>
<head>
<title>Navigation mit Auswahllisten – Teil 1</title>
<link rel="stylesheet" type="text/css" href="format.css">
<script type="text/javascript"><!--
function checkBoxes(objForm){
// Alle Input-Elemente im Formular ermitteln
var arrInput = objForm.getElementsByTagName("input");
var arrCB = new Array();
// Input-Elemente durchlaufen
for(var i=0; i<arrInput.length; i++){
// Falls es sich um eine Checkbox handelt und diese markiert ist -> in CB-Array schreiben
if((arrInput[i].type=="checkbox") && (arrInput[i].checked)){
arrCB[arrCB.length] = arrInput[i];
}
}
// Länge in verstecktes Feld eintragen
objForm.hiddenLength.value = arrCB.length;
return arrCB;
}
//Verbindung der Unterpunkte mit der Kategorie
var beschriftung = [[], ['0.0', '0.1'], ['1.0', '1.1', '1.2'], ['2.0', '2.1', '2.2']];
function kategorie_anzeigen(f){
var kategorie = f.kategorien.selectedIndex;
var strID = "infoID";
document.getElementById(strID).style.display = "none";
document.getElementById('unterpunkte').innerHTML = '';
for (var i=0; i<beschriftung[kategorie].length; i++){
var strInsert = (beschriftung[kategorie][i]=="2.2")? " id=\"infoBoxID\"" : "" ;
document.getElementById('unterpunkte').innerHTML+='<input type="checkbox"'+strInsert+' onclick="toggleInfo(this);" name="unterpunkte" value="'+beschriftung[kategorie][i]+'">'+beschriftung[kategorie][i]+'<br>';
}
}
function toggleInfo(objCB){
var strComp = "2.2";
var strID = "infoID";
try{
document.getElementById(strID).style.display = (document.getElementById("infoBoxID").checked ||((objCB.value == strComp) && objCB.checked))? "" : "none";
}catch(objExc){}
}
document.write('<style type="text/css">' //write out CSS for class ".hidepeice" that hides pieces of contents within pages
+'.hidepiece{display:none}\n'
+'@media print{.hidepiece{display:block !important;}}\n'
+'</style>')
function virtualpaginate(config){ //config: {piececlass:, piececontainer:, pieces_per_page:, defaultpage:, persist}
this.piececlass=config.piececlass
var elementType=(typeof config.piececontainer=="undefined")? "div" : config.piececontainer //The type of element used to divide up content into pieces. Defaults to "div"
this.pieces=virtualpaginate.collectElementbyClass(config.piececlass, elementType) //get total number of divs matching class name
//Set this.chunksize: 1 if "chunksize" param is undefined, "chunksize" if it's less than total pieces available, or simply total pieces avail (show all)
this.chunksize=(typeof config.pieces_per_page=="undefined")? 1 : (config.pieces_per_page>0 && config.pieces_per_page<this.pieces.length)? config.pieces_per_page : this.pieces.length
this.pagecount=Math.ceil(this.pieces.length/this.chunksize) //calculate number of "pages" needed to show the divs
this.paginatediv=, this.flatviewlinks=, this.cpspan=, this.selectmenu=
this.persist=config.persist
var persistedpage=virtualpaginate.getCookie("dd_"+this.piececlass) || 0
var urlselectedpage=virtualpaginate.urlparamselect(this.piececlass) //returns null or index from: mypage.htm?piececlass=index
this.currentpage=(typeof urlselectedpage=="number")? urlselectedpage : ((this.persist)? persistedpage : config.defaultpage)
this.currentpage=(this.currentpage<this.pagecount)? parseInt(this.currentpage) : 0 //ensure currentpage is within range of available pages
this.showpage(this.currentpage) //Show selected page
}
virtualpaginate.prototype.navigate=function(keyword){
var prevlinkindex=this.currentpage //Get index of last clicked on page
if (keyword=="previous")
this.currentpage=(this.currentpage>0)? this.currentpage-1 : (this.currentpage==0)? this.pagecount-1 : 0
else if (keyword=="next")
this.currentpage=(this.currentpage<this.pagecount-1)? this.currentpage+1 : 0
else if (keyword=="first")
this.currentpage=0
else if (keyword=="last")
this.currentpage=this.pagecount-1 //last page number
else
this.currentpage=parseInt(keyword)
this.currentpage=(this.currentpage<this.pagecount)? this.currentpage : 0 //ensure pagenumber is within range of available pages
this.showpage(this.currentpage)
for (var p=0; p<this.paginatediv.length; p++){ //loop through all pagination DIVs
if (this.flatviewpresent)
this.flatviewlinks[p][prevlinkindex].className="" //"Unhighlight" previous page (before this.currentpage increments)
if (this.selectmenupresent)
this.selectmenu[p].selectedIndex=this.currentpage
if (this.flatviewpresent)
this.flatviewlinks[p][this.currentpage].className="selected" //"Highlight" current page
}
}
virtualpaginate.prototype.buildpagination=function(divids, optnavtext){
var divids=(typeof divids=="string")? [divids] : divids //force divids to be an array of ids
var primarypaginatediv=divids.shift() //get first id within divids
var paginaterawHTML=document.getElementById(primarypaginatediv).innerHTML
this.paginate_build(primarypaginatediv, 0, optnavtext)
for (var i=0; i<divids.length; i++){
document.getElementById(divids[i]).innerHTML=paginaterawHTML
this.paginate_build(divids[i], i+1, optnavtext)
}
}
virtualpaginate.collectElementbyClass=function(classname, element){ //Returns an array containing DIVs with specified classname
if (document.querySelectorAll){
var pieces=document.querySelectorAll(element+"."+classname) //return pieces as HTMLCollection
}
else{
var classnameRE=new RegExp("(^|\\s+)"+classname+"($|\\s+)", "i") //regular expression to screen for classname within element
var pieces=
var alltags=document.getElementsByTagName(element)
for (var i=0; i<alltags.length; i++){
if (typeof alltags[i].className=="string" && alltags[i].className.search(classnameRE)!=-1)
pieces[pieces.length]=alltags[i] //return pieces as array
}
}
return pieces
}
virtualpaginate.urlparamselect=function(vpclass){
var result=window.location.search.match(new RegExp(vpclass+"=(\\d+)", "i")) //check for "?piececlass=2" in URL
return (result==null)? null : parseInt(RegExp.$1) //returns null or index, where index (int) is the selected virtual page's index
}
virtualpaginate.getCookie=function(Name){
var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re).split("=")[1] //return its value
return null
}
virtualpaginate.setCookie=function(name, value){
document.cookie = name+"="+value
}
virtualpaginate.prototype.showpage=function(pagenumber){
var totalitems=this.pieces.length //total number of broken up divs
var showstartindex=pagenumber*this.chunksize //array index of div to start showing per pagenumber setting
var showendindex=showstartindex+this.chunksize-1 //array index of div to stop showing after per pagenumber setting
for (var i=0; i<totalitems; i++){
if (i>=showstartindex && i<=showendindex)
this.pieces[i].style.display="block"
else
this.pieces[i].style.display="none"
}
if (this.persist){ //if persistence enabled
virtualpaginate.setCookie("dd_"+this.piececlass, this.currentpage)
}
if (this.cpspan.length>0){ //if <span class="paginateinfo> element is present, update it with the most current info (ie: Page 3/4)
for (var p=0; p<this.cpspan.length; p++)
this.cpspan[p].innerHTML='Page '+(this.currentpage+1)+'/'+this.pagecount
}
}
virtualpaginate.prototype.paginate_build=function(divid, divpos, optnavtext){
var instanceOfBox=this
var paginatediv=document.getElementById(divid)
if (this.chunksize==this.pieces.length){ //if user has set to display all pieces at once, no point in creating pagination div
paginatediv.style.display="none"
return
}
var paginationcode=paginatediv.innerHTML //Get user defined, "unprocessed" HTML within paginate div
if (paginatediv.getElementsByTagName("select").length>0) //if there's a select menu in div
this.paginate_build_selectmenu(paginatediv.getElementsByTagName("select"), divpos, optnavtext)
if (paginatediv.getElementsByTagName("a").length>0) //if there are links defined in div
this.paginate_build_regularlinks(paginatediv.getElementsByTagName("a"))
var allspans=paginatediv.getElementsByTagName("span") //Look for span tags within passed div
for (var i=0; i<allspans.length; i++){
if (allspans[i].className=="flatview")
this.paginate_output_flatview(allspans[i], divpos, optnavtext)
else if (allspans[i].className=="paginateinfo")
this.paginate_build_cpinfo(allspans[i], divpos)
}
this.paginatediv[divpos]=paginatediv
}
virtualpaginate.prototype.paginate_output_flatview=function(flatviewcontainer, divpos, anchortext){
var flatviewhtml=""
var anchortext=anchortext || new Array()
for (var i=0; i<this.pagecount; i++){
if (typeof anchortext[i]!="undefined") //if custom anchor text for this link exists
flatviewhtml+='<a href="#flatview" rel="'+i+'">'+anchortext[i]+'</a> ' //build pagination link using custom anchor text
else
flatviewhtml+='<a href="#flatview" rel="'+i+'">'+(i+1)+'</a> ' //build pagination link using auto incremented sequential number instead
}
flatviewcontainer.innerHTML=flatviewhtml
this.paginate_build_flatview(flatviewcontainer, divpos, anchortext)
}
virtualpaginate.prototype.paginate_build_flatview=function(flatviewcontainer, divpos, anchortext){
var instanceOfBox=this
var flatviewhtml=""
this.flatviewlinks[divpos]=flatviewcontainer.getElementsByTagName("a")
for (var i=0; i<this.flatviewlinks[divpos].length; i++){
this.flatviewlinks[divpos][i].onclick=function(){
var prevlinkindex=instanceOfBox.currentpage //Get index of last clicked on flatview link
var curlinkindex=parseInt(this.getAttribute("rel"))
instanceOfBox.navigate(curlinkindex)
return false
}
}
this.flatviewlinks[divpos][this.currentpage].className="selected" //"Highlight" current flatview link
this.flatviewpresent=true //indicate flat view links are present
}
virtualpaginate.prototype.paginate_build_selectmenu=function(paginatedropdown, divpos, anchortext){
var instanceOfBox=this
var anchortext=anchortext || new Array()
this.selectmenupresent=1
for (var i=0; i<this.pagecount; i++){
if (typeof anchortext[i]!="undefined") //if custom anchor text for this link exists, use anchor text as each OPTION's text
paginatedropdown.options[i]=new Option(anchortext[i], i)
else //else, use auto incremented, sequential numbers
paginatedropdown.options[i]=new Option("Page "+(i+1)+" of "+this.pagecount, i)
}
paginatedropdown.selectedIndex=this.currentpage
setTimeout(function(){paginatedropdown.selectedIndex=instanceOfBox.currentpage}, 500) //refresh currently selected option (for IE's sake)
paginatedropdown.onchange=function(){
instanceOfBox.navigate(this.selectedIndex)
}
this.selectmenu[divpos]=paginatedropdown
this.selectmenu[divpos].selectedIndex=this.currentpage //"Select" current page's corresponding option
}
virtualpaginate.prototype.paginate_build_regularlinks=function(paginatelinks){
var instanceOfBox=this
for (var i=0; i<paginatelinks.length; i++){
var currentpagerel=paginatelinks[i].getAttribute("rel")
if (currentpagerel=="previous" || currentpagerel=="next" || currentpagerel=="first" || currentpagerel=="last"){ //screen for these "rel" values
paginatelinks[i].onclick=function(){
instanceOfBox.navigate(this.getAttribute("rel"))
return false
}
}
}
}
virtualpaginate.prototype.paginate_build_cpinfo=function(cpspan, divpos){
this.cpspan[divpos]=cpspan
cpspan.innerHTML='Page '+(this.currentpage+1)+'/'+this.pagecount
}
//-->
</script>
</head>
<body>
<table border="0">
<tr>
<td align="left" valign="top" width="200">
<form name="input" action="ausgabe2.php" method="post" onsubmit="checkBoxes(this);">
<select name="kategorien" onchange="kategorie_anzeigen(this.form);">
<option>Bitte auswählen</option>
<option>Buchaltung</option>
<option>Rechtsabteilung</option>
<option>Shop</option>
</select>
</td>
<td >
</td>
</tr>
<tr>
<td align="left" valign="top">
<input type="hidden" name="hiddenLength" value="-1">
<div id="unterpunkte"></div>
<br><br>
<input type="submit" value="Absenden">
</td>
<td align="left" valign="top">
<div id="infoID" style="display: none;">
<div style="width: 300px; height: 230px;">
<div class="virtualpage hidepiece">
<h2>Bitte füllen Sie alle nachfolgenden Felder aus!</h2>
<table border="0" height="625px">
<tr>
<td>Vorname:</td>
<td><input name="vorname" type="text" size="50"></td>
</tr>
<tr>
<td>Name:</td>
<td><input name="name" type="text" size="50"></td>
</tr>
</table>
</div>
<div class="virtualpage hidepiece">
<h2>Artikel 1</h2>
<table border="0" height="600px">
<tr>
<td>Realisierung zum:</td>
<td>
<?php
//Dropdown Tage
echo "<select name=\"tag\">";
echo "<option selected>Tag";
for($i=1;$i<32;$i++)
{
$tag=$i;
echo "<option value=\"$tag\">$tag";
}
echo "</select>";
echo " ";
//Dropdown Monate
$monat=array("Jan.","Feb.","März","Apr.","Mai","Jun.","Jul.","Aug.", "Sep.", "Okt.", "Nov.", "Dez.");
echo "<select name=\"monat\">";
echo "<option selected>Monat";
for($i=0;$i<12;$i++)
{
echo "<option value=\"$monat[$i]\">$monat[$i]";
}
echo "</select>";
//Dropdown Jahre
echo "<select name=\"jahr\">";
echo "<option selected>Jahr";
for($i=2009;$i<2015;$i++)
{
$jahr=$i;
echo "<option value=\"$jahr\">$jahr";
}
echo "</select>";
?>
</td>
</tr>
<tr>
<td>Funktion:</td>
<td><textarea name="funktion" cols="50" rows="10"></textarea></td>
</tr>
<tr>
<td>Artikel 2:</td>
<td><textarea name="aenderung" cols="50" rows="10"></textarea></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>Gleiche Berechtigungen (Name des MItarbeiters):</td>
<td><input name="vorname" type="text" size="50"></td>
</tr>
<tr>
<td>sonstige Erwähnungen:</td>
<td><textarea name="sontiges" cols="50" rows="5"></textarea></td>
</tr>
</table>
</div>
<div class="virtualpage hidepiece">
<h2>Artikel</h2>
<table border="0">
<tr>
<td>Realisierung zum:</td>
<td>
<?php
//Dropdown Tage
echo "<select name=\"tag2\">";
echo "<option selected>Tag";
for($i=1;$i<32;$i++)
{
$tag=$i;
echo "<option value=\"$tag\">$tag";
}
echo "</select>";
echo " ";
//Dropdown Monate
$monat=array("Jan.","Feb.","März","Apr.","Mai","Jun.","Jul.","Aug.", "Sep.", "Okt.", "Nov.", "Dez.");
echo "<select name=\"monat2\">";
echo "<option selected>Monat";
for($i=0;$i<12;$i++)
{
echo "<option value=\"$monat[$i]\">$monat[$i]";
}
echo "</select>";
//Dropdown Jahre
echo "<select name=\"jahr2\">";
echo "<option selected>Jahr";
for($i=2009;$i<2015;$i++)
{
$jahr=$i;
echo "<option value=\"$jahr\">$jahr";
}
echo "</select>";
?>
</td>
</tr>
<tr>
<td>Gültigkeitszeitraum:</td>
<td>
<?php
//Dropdown Tage
echo "<select name=\"tag3\">";
echo "<option selected>Tag";
for($i=1;$i<32;$i++)
{
$tag=$i;
echo "<option value=\"$tag\">$tag";
}
echo "</select>";
echo " ";
//Dropdown Monate
$monat=array("Jan.","Feb.","März","Apr.","Mai","Jun.","Jul.","Aug.", "Sep.", "Okt.", "Nov.", "Dez.");
echo "<select name=\"monat3\">";
echo "<option selected>Monat";
for($i=0;$i<12;$i++)
{
echo "<option value=\"$monat[$i]\">$monat[$i]";
}
echo "</select>";
//Dropdown Jahre
echo "<select name=\"jahr3\">";
echo "<option selected>Jahr";
for($i=2009;$i<2015;$i++)
{
$jahr=$i;
echo "<option value=\"$jahr\">$jahr";
}
echo "</select>";
?>
bis zum
<?php
//Dropdown Tage
echo "<select name=\"tag4\">";
echo "<option selected>Tag";
for($i=1;$i<32;$i++)
{
$tag=$i;
echo "<option value=\"$tag\">$tag";
}
echo "</select>";
echo " ";
//Dropdown Monate
$monat=array("Jan.","Feb.","März","Apr.","Mai","Jun.","Jul.","Aug.", "Sep.", "Okt.", "Nov.", "Dez.");
echo "<select name=\"monat4\">";
echo "<option selected>Monat";
for($i=0;$i<12;$i++)
{
echo "<option value=\"$monat[$i]\">$monat[$i]";
}
echo "</select>";
//Dropdown Jahre
echo "<select name=\"jahr4\">";
echo "<option selected>Jahr";
for($i=2009;$i<2015;$i++)
{
$jahr=$i;
echo "<option value=\"$jahr\">$jahr";
}
echo "</select>";
?>
</td>
</tr>
<tr>
<td>Gültig von:</td>
<td>
<?php
//Dropdown Tage
echo "<select name=\"tag5\">";
echo "<option selected>Tag";
for($i=1;$i<32;$i++)
{
$tag=$i;
echo "<option value=\"$tag\">$tag";
}
echo "</select>";
echo " ";
//Dropdown Monate
$monat=array("Jan.","Feb.","März","Apr.","Mai","Jun.","Jul.","Aug.", "Sep.", "Okt.", "Nov.", "Dez.");
echo "<select name=\"monat5\">";
echo "<option selected>Monat";
for($i=0;$i<12;$i++)
{
echo "<option value=\"$monat[$i]\">$monat[$i]";
}
echo "</select>";
//Dropdown Jahre
echo "<select name=\"jahr5\">";
echo "<option selected>Jahr";
for($i=2009;$i<2015;$i++)
{
$jahr=$i;
echo "<option value=\"$jahr\">$jahr";
}
echo "</select>";
?>
</td>
</tr>
<tr>
<td>Gültig bis:</td>
<td>
<?php
//Dropdown Tage
echo "<select name=\"tag6\">";
echo "<option selected>Tag";
for($i=1;$i<32;$i++)
{
$tag=$i;
echo "<option value=\"$tag\">$tag";
}
echo "</select>";
echo " ";
//Dropdown Monate
$monat=array("Jan.","Feb.","März","Apr.","Mai","Jun.","Jul.","Aug.", "Sep.", "Okt.", "Nov.", "Dez.");
echo "<select name=\"monat6\">";
echo "<option selected>Monat";
for($i=0;$i<12;$i++)
{
echo "<option value=\"$monat[$i]\">$monat[$i]";
}
echo "</select>";
//Dropdown Jahre
echo "<select name=\"jahr6\">";
echo "<option selected>Jahr";
for($i=2009;$i<2015;$i++)
{
$jahr=$i;
echo "<option value=\"$jahr\">$jahr";
}
echo "</select>";
?>
</td>
</tr>
<tr>
<td>Funktion:</td>
<td><textarea name="funktion2" cols="50" rows="10"></textarea></td>
</tr>
<tr>
<td>Beschreibung der gewünschten Änderungen<br> der Berechtigungen im SAP:</td>
<td><textarea name="aenderung2" cols="50" rows="10"></textarea></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>Gleiche Berechtigungen (Name des MItarbeiters):</td>
<td><input name="vorname" type="text" size="50"></td>
</tr>
<tr>
<td>sonstige Erwähnungen:</td>
<td><textarea name="sontiges" cols="50" rows="5"></textarea></td>
</tr>
</table>
</div>
<div class="virtualpage hidepiece">
<p>Seite 3</p>
</div>
<div class="virtualpage hidepiece">
<p>Seite 4</p>
</div>
</div>
<div id="paginatediv" class="paginationstyle" style="width: 300px; text-align: left">
<br><br>
<a href="#" rel="previous">zurück</a> <span class="flatview"></span> <a href="#" rel="next">weiter</a>
</div>
<script>
var pagecontent=new virtualpaginate({
piececlass: "virtualpage",
piececontainer: "div",
pieces_per_page: 1,
defaultpage: 0,
persist: true
})
pagecontent.buildpagination(["paginatediv"])
</script>
</div>
</div>
</td>
</tr>
</table>
</form>
<script>
function checkForm() {
var strFehler='';
if (document.forms.vorname.value=="")
strFehler += "Feld Vorname ist leer\n";
if (document.forms.name.value=="")
strFehler += "Feld Name ist nicht korrekt ausgef¸llt\n";
}
if (strFehler.length>0) {
alert("Festgestellte Probleme: \n\n"+strFehler);
return(false);
}
</script>
</body>
</html>
Auf Facebook teilen
Auf Twitter teilen
Auf Reddit teilen
Auf Linkedin teilenBitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben
Content-ID: 119136
Url: https://administrator.de/contentid/119136
Ausgedruckt am: 23.11.2024 um 09:11 Uhr
4 Kommentare
Neuester Kommentar
Zeig mal deine Seite ...
Ist sie statisch? dynamisch?
Ist sie statisch? dynamisch?
Moin,
die Seite ist dynamisch mit JavaScript erstellt worden.
Ich habe oben den gesamten Quellcode eingefügt.
Ich hoffe, ich konnte zuerst einmal helfen!
Florian
die Seite ist dynamisch mit JavaScript erstellt worden.
Ich habe oben den gesamten Quellcode eingefügt.
Ich hoffe, ich konnte zuerst einmal helfen!
Florian
Ich glaube du solltest mal unter dem Stichwort "Breadcrumb Navigation" weitersuchen...
Grüße
Max
Grüße
Max
Hallo dog,
Breadcrumb Navigation kommt meiner Frage sehr nah.
Aber eine Breadcrumb Navigation zeigt nur die einzelnen Internetseiten in der Navigation an.
Ich habe nur eine Seite mit diversen div Abschnitten, die mit JavaScript verändert werden!
Wenn ich nun auf weiter bzw. 2 drücke, soll sich der Navigationpunkt (aktuelles div) verändern!
Kopier doch einmal den Quellcode und seh es dir kurz selbst an!
Florian
Breadcrumb Navigation kommt meiner Frage sehr nah.
Aber eine Breadcrumb Navigation zeigt nur die einzelnen Internetseiten in der Navigation an.
Ich habe nur eine Seite mit diversen div Abschnitten, die mit JavaScript verändert werden!
Wenn ich nun auf weiter bzw. 2 drücke, soll sich der Navigationpunkt (aktuelles div) verändern!
Kopier doch einmal den Quellcode und seh es dir kurz selbst an!
Florian
