djsaeedkhan
شنبه 24 دی 1390, 17:38 عصر
با سلام خدمت دوستان
در این آموزش قصد داریم بگیم چگونه یه صفحه با اسکرول (زیاد) رو در چند صفحه خلاصه کنیم. یعنی بجای اینکه کاربر یه صفحه بلند رو ببینه بجاش با زدن کلید های قبلی بعد یا شماره صفحات بین اونها جابجا بشه (بدون هیچ کد اضافه آجاکس و ...)
<html dir="rtl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>سوال </title>
</head>
<script>
var pagenumber=10000;
//-----------------------------------------------------------------------------------------------------------------------------
function nextpage()
{
if(document.form1.username.value=='')
{ alert("لطفا نام کاربری را وارد کنید","aa"); return false; }
if(pagenumber==10004)
{
//document.form1.NextPage.disabled=true;
}
else if(pagenumber<10005)
{
pagenumber++;
showonlyone(pagenumber);
//alert(pagenumber);
//document.form1.NextPage.disabled=false;
}
}
//-----------------------------------------------------------------------------------------------------------------------------
function Prepage()
{
if(document.form1.username.value=='')
{ alert("لطفا نام کاربری را وارد کنید"); return false; }
if(pagenumber==10001)
{
//document.form1.PrePage.disabled=true;
}
else if(pagenumber>10000)
{
pagenumber--;
showonlyone(pagenumber);
//alert(pagenumber);
//document.form1.PrePage.disabled=false;
}
}
function showonlyone(thechosenone) {
var newboxes = document.getElementsByTagName("div");
for(var x=0; x<newboxes.length; x++) {
name = newboxes[x].getAttribute("name");
if (name == 'newboxes') {
if (newboxes[x].id == thechosenone) {
newboxes[x].style.display = 'block';
pagenumber=newboxes[x].id;
//alert(pagenumber);
}
else {
newboxes[x].style.display = 'none';
//alert(pagenumber);
}
}
}
}
function save_name2(){
document.form1.username.value=document.usernam.una me.value;
}
function save_name(){
if(document.form1.username.value=='')
{
alert("لطفا یک نام وارد کنید");
document.usernam.uname.focus();
//document.getElementById("page_number_top").style.display = 'none';
//document.getElementById("page_number_but").style.display = 'none';
}
else
{
//document.getElementById("page_number_but").style.display = 'block';
//document.getElementById("page_number_top").style.display = 'block';
document.form1.username.value=document.usernam.una me.value;
nextpage();
}
}
</script>
<body style="font-family: Tahoma; font-size: 10pt">
<!----------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<div id=page_number_top style="border: 1px solid black; background-color: #CCCCCC; padding: 3px;">
<center>
<input type=button value="قبلی" name="PrePage" onclick="Prepage()" style="font-family: B Yekan; font-size: 14pt"><input type=button value="بعدی" name="NextPage" onclick="nextpage()" style="font-family: B Yekan; font-size: 14pt"></center>
</div>
<!----///////////////////////////////////////////---->
<div name="newboxes" id="10000" >
<span lang="fa">راهنما:</span><ol>
<li>
<p style="line-height: 150%"><span lang="fa">برای دیدن ادامه سوالات از کلید
های قبلی و بعدی در بالای صفحه استفاده کنید</span></p></li>
<li>
<p style="line-height: 150%"><span lang="fa">دکمه ثبت اطلاعات در صفحه آخر می
باشد.</span></p>
</li>
<li>
<p align="right" style="line-height: 150%"><span lang="fa">بهترین مرورگر
برای نمایش آزمون </span>Internet Explorer <span lang="fa">می باشد</span>.</li>
<li>
<p align="right" style="line-height: 150%"></li>
<li>
<p align="right" style="line-height: 150%"><br></li>
</ol>
<center>
<form name=usernam onsubmit="return false;">
<p>
<input type=text id=uname name=uname onkeyup="save_name2()" style="font-family: Tahoma; font-size: 12pt; border: 1px solid #7D7DFF; padding-left: 4px; padding-right: 4px; padding-top: 1px; padding-bottom: 1px; background-color: #CACAFF; text-align:center" size="35">
<br>
<input type=button name="start" onclick="nextpage()" style="font-family: Tahoma; font-size: 12pt; font-weight: 700; border: 1px solid #CCCCFF; padding-left: 4px; padding-right: 4px; padding-top: 1px; padding-bottom: 1px; background-color: #ECECFF" value="شروع " >
</p>
<p> </p>
</p></form>
</center></div>
<form action=ShowExamResult.php method=POST name=form1>
<input type=hidden name=username>
<div name="newboxes" id="10001" style="display: none;padding: 5px;">
<!----///////////////////////////////////////////---->
متن صفحه اول
<!----///////////////////////////////////////////---->
</div><div name="newboxes" id="10002" style="display: none;padding: 5px;">
<!----///////////////////////////////////////////---->
متن صفحه دوم
<!----///////////////////////////////////////////---->
</div><div name="newboxes" id="10003" style="display: none;padding: 5px;">
<!----///////////////////////////////////////////---->
متن صفحه سوم
<!----------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!----///////////////////////////////////////////---->
</div><div name="newboxes" id="10004" style="display: none;padding: 5px;">
<!----///////////////////////////////////////////---->
متن صفحه چهارم
<!----///////////////////////////////////////////---->
<input type=submit value=ثبت>
<input type=reset value=دوباره>
</div>
<!----///////////////////////////////////////////---->
<div id=page_number_But style="border: 1px solid black; background-color: #CCCCCC; padding: 3px;">
<center><input type=button value="قبلی" name="PrePage" onclick="Prepage()" style="font-family: B Yekan; font-size: 14pt"><input type=button value="بعدی" name="NextPage" onclick="nextpage()" style="font-family: B Yekan; font-size: 14pt"></center>
</div>
</form>
</body>
</html>
دوستان عزیز این کد در بیشتر براوز ها تست شده و جواب میده
اگر جایی تست کردید و جواب نداد یا درستش کنید یا خبر بدید
با تشکر
در این آموزش قصد داریم بگیم چگونه یه صفحه با اسکرول (زیاد) رو در چند صفحه خلاصه کنیم. یعنی بجای اینکه کاربر یه صفحه بلند رو ببینه بجاش با زدن کلید های قبلی بعد یا شماره صفحات بین اونها جابجا بشه (بدون هیچ کد اضافه آجاکس و ...)
<html dir="rtl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>سوال </title>
</head>
<script>
var pagenumber=10000;
//-----------------------------------------------------------------------------------------------------------------------------
function nextpage()
{
if(document.form1.username.value=='')
{ alert("لطفا نام کاربری را وارد کنید","aa"); return false; }
if(pagenumber==10004)
{
//document.form1.NextPage.disabled=true;
}
else if(pagenumber<10005)
{
pagenumber++;
showonlyone(pagenumber);
//alert(pagenumber);
//document.form1.NextPage.disabled=false;
}
}
//-----------------------------------------------------------------------------------------------------------------------------
function Prepage()
{
if(document.form1.username.value=='')
{ alert("لطفا نام کاربری را وارد کنید"); return false; }
if(pagenumber==10001)
{
//document.form1.PrePage.disabled=true;
}
else if(pagenumber>10000)
{
pagenumber--;
showonlyone(pagenumber);
//alert(pagenumber);
//document.form1.PrePage.disabled=false;
}
}
function showonlyone(thechosenone) {
var newboxes = document.getElementsByTagName("div");
for(var x=0; x<newboxes.length; x++) {
name = newboxes[x].getAttribute("name");
if (name == 'newboxes') {
if (newboxes[x].id == thechosenone) {
newboxes[x].style.display = 'block';
pagenumber=newboxes[x].id;
//alert(pagenumber);
}
else {
newboxes[x].style.display = 'none';
//alert(pagenumber);
}
}
}
}
function save_name2(){
document.form1.username.value=document.usernam.una me.value;
}
function save_name(){
if(document.form1.username.value=='')
{
alert("لطفا یک نام وارد کنید");
document.usernam.uname.focus();
//document.getElementById("page_number_top").style.display = 'none';
//document.getElementById("page_number_but").style.display = 'none';
}
else
{
//document.getElementById("page_number_but").style.display = 'block';
//document.getElementById("page_number_top").style.display = 'block';
document.form1.username.value=document.usernam.una me.value;
nextpage();
}
}
</script>
<body style="font-family: Tahoma; font-size: 10pt">
<!----------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<div id=page_number_top style="border: 1px solid black; background-color: #CCCCCC; padding: 3px;">
<center>
<input type=button value="قبلی" name="PrePage" onclick="Prepage()" style="font-family: B Yekan; font-size: 14pt"><input type=button value="بعدی" name="NextPage" onclick="nextpage()" style="font-family: B Yekan; font-size: 14pt"></center>
</div>
<!----///////////////////////////////////////////---->
<div name="newboxes" id="10000" >
<span lang="fa">راهنما:</span><ol>
<li>
<p style="line-height: 150%"><span lang="fa">برای دیدن ادامه سوالات از کلید
های قبلی و بعدی در بالای صفحه استفاده کنید</span></p></li>
<li>
<p style="line-height: 150%"><span lang="fa">دکمه ثبت اطلاعات در صفحه آخر می
باشد.</span></p>
</li>
<li>
<p align="right" style="line-height: 150%"><span lang="fa">بهترین مرورگر
برای نمایش آزمون </span>Internet Explorer <span lang="fa">می باشد</span>.</li>
<li>
<p align="right" style="line-height: 150%"></li>
<li>
<p align="right" style="line-height: 150%"><br></li>
</ol>
<center>
<form name=usernam onsubmit="return false;">
<p>
<input type=text id=uname name=uname onkeyup="save_name2()" style="font-family: Tahoma; font-size: 12pt; border: 1px solid #7D7DFF; padding-left: 4px; padding-right: 4px; padding-top: 1px; padding-bottom: 1px; background-color: #CACAFF; text-align:center" size="35">
<br>
<input type=button name="start" onclick="nextpage()" style="font-family: Tahoma; font-size: 12pt; font-weight: 700; border: 1px solid #CCCCFF; padding-left: 4px; padding-right: 4px; padding-top: 1px; padding-bottom: 1px; background-color: #ECECFF" value="شروع " >
</p>
<p> </p>
</p></form>
</center></div>
<form action=ShowExamResult.php method=POST name=form1>
<input type=hidden name=username>
<div name="newboxes" id="10001" style="display: none;padding: 5px;">
<!----///////////////////////////////////////////---->
متن صفحه اول
<!----///////////////////////////////////////////---->
</div><div name="newboxes" id="10002" style="display: none;padding: 5px;">
<!----///////////////////////////////////////////---->
متن صفحه دوم
<!----///////////////////////////////////////////---->
</div><div name="newboxes" id="10003" style="display: none;padding: 5px;">
<!----///////////////////////////////////////////---->
متن صفحه سوم
<!----------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!----///////////////////////////////////////////---->
</div><div name="newboxes" id="10004" style="display: none;padding: 5px;">
<!----///////////////////////////////////////////---->
متن صفحه چهارم
<!----///////////////////////////////////////////---->
<input type=submit value=ثبت>
<input type=reset value=دوباره>
</div>
<!----///////////////////////////////////////////---->
<div id=page_number_But style="border: 1px solid black; background-color: #CCCCCC; padding: 3px;">
<center><input type=button value="قبلی" name="PrePage" onclick="Prepage()" style="font-family: B Yekan; font-size: 14pt"><input type=button value="بعدی" name="NextPage" onclick="nextpage()" style="font-family: B Yekan; font-size: 14pt"></center>
</div>
</form>
</body>
</html>
دوستان عزیز این کد در بیشتر براوز ها تست شده و جواب میده
اگر جایی تست کردید و جواب نداد یا درستش کنید یا خبر بدید
با تشکر