3
Saya sentiasa mencari cara untuk memperbaiki dan memperbaiki kebolehgunaan aplikasi web saya. Khususnya, saya sentiasa berusaha mencari cara untuk membuat bentuk saya lebih baik kerana, mari kita hadapi: Jika anda membina aplikasi web, anda akan membina borang. Kemungkinan besar, anda akan membina banyak bentuk. 
Satu teknik yang boleh anda gunakan untuk meningkatkan kebolehgunaan borang anda adalah untuk mengekalkan skrol halaman selepas pasca-backs. Anda mungkin ingin menggunakan fungsi ini dalam halaman carian, sebagai contoh, di mana pengguna boleh menyusun hasilnya mengikut lajur. Sekiranya anda berada di bahagian atas halaman A dari yang menerima parameter carian, dan anda memaparkan hasil di bawah, ia boleh menjadi sangat menjengkelkan bagi pengguna untuk menatal ke bawah halaman melepasi parameter ke hasil setiap kali mereka mahu menyusun hasilnya dengan lajur yang diberikan. Nasib baik, kita boleh melakukan sesuatu tentang ini.
Penyelesaian
Dalam tutorial ini, saya akan menunjukkan kepada anda betapa mudahnya untuk mengekalkan kedudukan tatal halaman apabila jawatan halaman borang kembali kepada dirinya sendiri. Walaupun saya telah mengodkan contoh di ColdFusion, teknik ini dapat dengan mudah dipindahkan ke bahasa lain.
Terdapat hanya dua perkara yang perlu anda lakukan untuk membuat teknik ini berfungsi. Anda perlu menulis beberapa JavaScript untuk merebut koordinat X dan Y semasa halaman anda dan meletakkannya dalam bentuk supaya ia dikemukakan apabila anda menghantar kembali ke halaman semasa. Kemudian, anda perlu mengambil koordinat tatal X dan Y dan, melalui gabungan skrip pelayan dan klien, tetapkan koordinat tatal halaman apabila ia dimuat semula. Sekeping kek!
Saya menggunakan bentuk tulang telanjang di sini supaya anda benar-benar boleh memberi tumpuan dengan jelas pada mekanik bagaimana proses berfungsi, sebaliknya mewujudkan halaman carian yang lebih rumit dari jenis yang saya nyatakan di atas. Sebaik sahaja anda tahu bagaimana untuk mendapatkan sesuatu yang berfungsi, anda boleh menyesuaikan contoh ini dengan mudah dengan keperluan anda sendiri dan menjadi pandai seperti yang anda mahu.
Halaman borang ini tidak melakukan apa -apa yang istimewa pada masa ini. Ia hanya menyiarkan kembali kepada dirinya sendiri, lulus parameter nama. Saya telah mengodkan perenggan dan nombor supaya kami mempunyai kandungan yang boleh ditatal pada halaman, dan supaya kami mempunyai panduan visual untuk membantu menilai sejauh mana halaman itu telah menatal secara menegak (ambil perhatian bahawa skrip ini akan memelihara kedua -dua skrol menegak dan mendatar, walaupun).
Langkah pertama ialah menambah beberapa JavaScript untuk mendapatkan nilai tatal X dan Y dan memasukkannya ke dalam bentuk. Untuk melakukan ini, kami perlu menambah dua input tersembunyi ke borang kami bersama -sama dengan beberapa baris JavaScript yang akan merebut nilai tatal semasa apabila borang diserahkan dan lulus kepada input tersembunyi. Fungsi SavesCrollCoordinates () akan melihat sokongan penyemak imbas untuk Document.all dan gunakan rujukan yang betul untuk merebut nilai tatal dan mengemas kini input borang dengan sewajarnya. Kami akan menggunakan pengendali acara onSubmit () dalam borang kami untuk memanggilnya dalam contoh ini.
Saya telah mengodkan medan tersembunyi yang menyimpan nilai tatal sebagai medan teks dalam contoh ini, jadi jika anda mempunyai mata yang cepat, anda dapat melihat bagaimana nilai berubah sebelum borang diserahkan.
<cfparam name="FORM.name" default="Testing"> <br> <br> <html> <br> <head> <br> <title>Test</title> <br> </head> <br> <body> <br> <br> <form name="Form1" <br> method="POST" <br> action="<cfoutput>#CGI.SCRIPT_NAME#</cfoutput>"> <br> <br> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <br> <p>6</p> <p>7</p> <p>8</p> <p>9</p> <p>10</p> <br> <br> <hr width="2000"> <br> <br> <nobr> <br> Name: <input type="text" name="name" value="<cfoutput>#FORM.name#</cfoutput>"> <br> <input type="submit" value="Submit"></nobr> <br> <br> <hr width="2000"> <br> <br> <p>11</p> <p>12</p> <p>13</p> <p>14</p> <p>15</p> <br> <p>16</p> <p>17</p> <p>18</p> <p>19</p> <p>20</p> <br> <br> </form> <br> <br> </body> <br> </html>
Langkah kedua ialah mengambil nilai -nilai yang diluluskan dengan bentuk dan melakukan sesuatu dengan mereka. Untuk ini, kita perlu menambah beberapa baris JavaScript dengan hanya sentuhan ColdFusion. Pertama, kami akan memasukkan dua tag cfParam tambahan di bahagian atas halaman supaya kami mempunyai beberapa nilai tatal lalai untuk berfungsi pada setiap beban halaman. Kemudian, kami akan menentukan fungsi scrollTocoordinates () untuk menetapkan skrol halaman dan memanggilnya apabila halaman memuat menggunakan onload () pengendali acara dalam tag
.
<cfparam name="FORM.name" default="Testing"> <br>
<br>
<html> <br>
<head> <br>
<title>Test</title> <br>
<script language=javascript> <br>
function saveScrollCoordinates() { <br>
document.Form1.scrollx.value = (document.all)?document.body.scrollLeft:window.pageXOffset; <br>
document.Form1.scrolly.value = (document.all)?document.body.scrollTop:window.pageYOffset; <br>
} <br>
</script> <br>
</head> <br>
<body> <br>
<br>
<form name="Form1" <br>
method="POST" <br>
onSubmit="saveScrollCoordinates()" <br>
action="<cfoutput>#CGI.SCRIPT_NAME#</cfoutput>"> <br>
<br>
<p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <br>
<p>6</p> <p>7</p> <p>8</p> <p>9</p> <p>10</p> <br>
<br>
<hr width="2000"> <br>
<br>
<nobr> <br>
Name: <input type="text" name="name" value="<cfoutput>#FORM.name#</cfoutput>"> <br>
<input type="text" name="scrollx" value="0"> <br>
<input type="text" name="scrolly" value="0"> <br>
<input type="submit" value="Submit"></nobr> <br>
<br>
<hr width="2000"> <br>
<br>
<p>11</p> <p>12</p> <p>13</p> <p>14</p> <p>15</p> <br>
<p>16</p> <p>17</p> <p>18</p> <p>19</p> <p>20</p> <br>
<br>
</form> <br>
<br>
</body> <br>
</html>Berikut adalah pecahan main-main yang menerangkan apa yang berlaku apabila pengguna mengklik butang untuk menyerahkan borang:
bagaimana dengan contoh yang saya berikan di atas, di mana kami mempunyai halaman carian yang mengandungi borang input dan hasil yang boleh disusun mengikut lajur? Dalam hal ini, anda mungkin akan mengemukakan borang dan melaksanakan sedikit SQL dengan nilai yang sedikit berbeza apabila pengguna memilih untuk mengklik tajuk lajur untuk disusun. Jika anda mengemas kini beberapa input tersembunyi dengan lajur jenis baru dan susun arah, ia harus menjadi tugas yang mudah untuk menambah ciri ini ke halaman anda. Anda hanya perlu memasukkan input tersembunyi tambahan ke dalam borang anda dan memasukkan JavaScript yang dibentangkan di sini ke JavaScript anda sendiri. Pautan jenis anda boleh menggunakan pengendali acara OnClick () untuk mengemas kini nilai tatal tersembunyi dan serahkan borang anda.
Apa yang saya tunjukkan anda hanyalah contoh mudah teknik ini. Kod di sini telah diuji menggunakan Internet Explorer 6 dan Mozilla Firefox untuk Windows, dan Safari pada Mac. Gunakan idea di sebalik teknik ini sebagai titik permulaan. Sapukan kreativiti dan kemahiran anda sendiri untuk menambah rasa yang lebih digilap, intuitif kepada bentuk yang anda gunakan dalam aplikasi anda.
yang menunjukkan kedudukan tatal pada halaman dengan CSS dapat dicapai dengan menggunakan harta 'kedudukan'. Harta ini membolehkan anda meletakkan elemen berhubung dengan viewport, yang boleh digunakan untuk menunjukkan kedudukan tatal. Sebagai contoh, anda boleh menggunakan 'kedudukan: melekit' untuk membuat elemen melekat pada viewport, dengan itu menunjukkan kedudukan tatal. Ciri-ciri ini membolehkan anda mengawal kedudukan tatal dan menjadikannya snap ke titik-titik tertentu. lokasi sasaran. Hartanah 'licin' berguna apabila anda ingin membuat peralihan dari satu bahagian halaman ke yang lain yang lebih lancar, sementara harta 'auto' berguna apabila anda ingin melompat ke lokasi tertentu. Kemudian, anda boleh menggunakan kaedah 'window.scrollto' untuk memulihkan kedudukan tatal. Ini amat berguna apabila anda ingin mengekalkan kedudukan tatal selepas halaman menyegarkan atau apabila menavigasi kembali ke halaman. Harta ini menentukan di mana elemen harus diselaraskan apabila snap tatal berlaku. Sebagai contoh, anda boleh menggunakan 'SCROLL-SNAP-ALIGN: Mula' untuk menyelaraskan elemen pada permulaan bekas. Harta ini meletakkan elemen berdasarkan kedudukan tatal pengguna. Sebagai contoh, anda boleh menggunakan 'kedudukan: melekit; Atas: 0 'untuk membuat elemen melekat ke bahagian atas viewport.
Atas ialah kandungan terperinci Lebih banyak bentuk yang boleh digunakan - mengawal kedudukan tatal. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Penggunaan penyentuh AC
Bagaimana untuk memulihkan data dari cakera keras mudah alih
Penyelesaian kepada tandatangan tidak sah
Bagaimana untuk menyimpan program yang ditulis dalam pycharm
Lima sebab mengapa komputer anda tidak dapat dihidupkan
Penyelesaian kepada ralat sintaks prosedur sql
Formula pilih atur dan gabungan yang biasa digunakan
Penyelesaian ralat httpstatus500
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
