Я постоянно ищу способы улучшить и улучшить удобство использования моих веб-приложений. В частности, я всегда пытаюсь найти способы улучшить свои формы, потому что, давайте посмотрим правде в глаза: если вы создаете веб-приложения, вы собираетесь создавать формы. Скорее всего, вы собираетесь построить много форм.
Любой, кто наблюдал за обычным пользователем, пытающимся заполнить форму или серию форм, знает, что опыт часто разочаровывает. Примите дополнительные меры для повышения удобства использования ваших форм — даже незначительными — и вы действительно сможете повысить удобство использования вашего приложения в целом.
Один из методов, который вы можете использовать для улучшения юзабилити ваших форм — это сохранить прокрутку страницы после постбэков. Вы можете использовать эту функцию на странице поиска, например, на которой пользователь может сортировать результаты по столбцу. Если в верхней части страницы есть страница, которая принимает параметры поиска, и отображаются результаты, представленные ниже, пользователям может быть очень неприятно прокручивать страницу после параметров к результатам каждый раз, когда они хотят отсортировать свои результаты по данному столбцу. К счастью, мы можем что-то сделать с этим.
Решение
В этом уроке я покажу вам, как легко поддерживать позицию прокрутки страницы, когда страница формы отправляется обратно на себя. Несмотря на то, что я описал этот пример в ColdFusion, этот метод можно легко перенести на другие языки.
Есть только две вещи, которые вам нужно сделать, чтобы эта техника работала. Вам нужно будет написать немного JavaScript, чтобы получить текущие координаты прокрутки X и Y на вашей странице и поместить их в форму, чтобы они были отправлены при повторной публикации на текущей странице. Затем вам нужно будет взять эти координаты прокрутки X и Y и, используя комбинацию серверных и клиентских сценариев, установить координаты прокрутки страницы после ее перезагрузки. Кусок пирога!
Код формы
Здесь я использую форму, чтобы вы могли четко сосредоточиться на механике того, как работает процесс, а не на создании более сложной поисковой страницы, о которой я упоминал выше. Когда вы знаете, как все работает, вы можете легко адаптировать этот пример к вашим собственным потребностям и быть настолько умным, насколько вы хотите.
<cfparam name="FORM.name" default="Testing"> <html> <head> <title>Test</title> </head> <body> <form name="Form1" method="POST" action="<cfoutput>#CGI.SCRIPT_NAME#</cfoutput>"> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>8</p> <p>9</p> <p>10</p> <hr width="2000"> <nobr> Name: <input type="text" name="name" value="<cfoutput>#FORM.name#</cfoutput>"> <input type="submit" value="Submit"></nobr> <hr width="2000"> <p>11</p> <p>12</p> <p>13</p> <p>14</p> <p>15</p> <p>16</p> <p>17</p> <p>18</p> <p>19</p> <p>20</p> </form> </body> </html> Эта страница формы не делает ничего особенного в данный момент. Он просто отправляет обратно самому себе, передавая параметр имени. Я закодировал абзацы и цифры, чтобы у нас был прокручиваемый контент на странице, и чтобы у нас было наглядное руководство, которое поможет оценить, насколько далеко страница прокрутилась по вертикали (обратите внимание, что этот скрипт сохранит как вертикальную, так и горизонтальную прокрутку, хотя ).
Отслеживание свитка
Первый шаг — добавить JavaScript, чтобы получить значения прокрутки X и Y и поместить их в форму. Для этого нам нужно добавить два скрытых ввода в нашу форму вместе с несколькими строками JavaScript, которые будут захватывать текущие значения прокрутки при отправке формы и передавать их на скрытые вводы. Функция saveScrollCoordinates() будет искать в браузере поддержку document.all и использовать правильные ссылки, чтобы получить значения прокрутки и соответственно обновить входные данные формы. Мы будем использовать обработчик события onSubmit() в нашей форме, чтобы вызвать его в этом примере.
В этом примере я закодировал скрытые поля, в которых значения прокрутки хранятся в виде текстовых полей, поэтому, если у вас быстрый взгляд, вы можете посмотреть, как изменяются значения перед отправкой формы.
<cfparam name="FORM.name" default="Testing"> <html> <head> <title>Test</title> <script language=javascript> function saveScrollCoordinates() { document.Form1.scrollx.value = (document.all)?document.body.scrollLeft:window.pageXOffset; document.Form1.scrolly.value = (document.all)?document.body.scrollTop:window.pageYOffset; } </script> </head> <body> <form name="Form1" method="POST" onSubmit="saveScrollCoordinates()" action="<cfoutput>#CGI.SCRIPT_NAME#</cfoutput>"> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>8</p> <p>9</p> <p>10</p> <hr width="2000"> <nobr> Name: <input type="text" name="name" value="<cfoutput>#FORM.name#</cfoutput>"> <input type="text" name="scrollx" value="0"> <input type="text" name="scrolly" value="0"> <input type="submit" value="Submit"></nobr> <hr width="2000"> <p>11</p> <p>12</p> <p>13</p> <p>14</p> <p>15</p> <p>16</p> <p>17</p> <p>18</p> <p>19</p> <p>20</p> </form> </body> </html>
Второй шаг — взять те значения, которые передаются с формой, и что-то с ними сделать. Для этого нам нужно добавить несколько строчек Javascript с небольшим прикосновением к ColdFusion. Сначала мы cfparam два дополнительных cfparam вверху страницы, чтобы у нас было несколько значений прокрутки по умолчанию для работы при каждой загрузке страницы. Затем мы определим scrollToCoordinates() для установки прокрутки страницы и вызовем ее при загрузке страницы с помощью обработчика события onLoad() в <body> .
<cfparam name="FORM.name" default="Testing"> <cfparam name="FORM.scrollx" default="0"> <cfparam name="FORM.scrolly" default="0"> <html> <head> <title>Test</title> <script language=javascript> function scrollToCoordinates() { <cfoutput> window.scrollTo(#FORM.scrollx#, #FORM.scrolly#); </cfoutput> } function saveScrollCoordinates() { document.Form1.scrollx.value = (document.all)?document.body.scrollLeft:window.pageXOffset; document.Form1.scrolly.value = (document.all)?document.body.scrollTop:window.pageYOffset; } </script> </head> <body onload="javascript:scrollToCoordinates()"> <form name="Form1" method="POST" onSubmit="saveScrollCoordinates()" action="<cfoutput>#CGI.SCRIPT_NAME#</cfoutput>"> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>8</p> <p>9</p> <p>10</p> <hr width="2000"> <nobr> Name: <input type="text" name="name" value="<cfoutput>#FORM.name#</cfoutput>"> <input type="text" name="scrollx" value="0"> <input type="text" name="scrolly" value="0"> <input type="submit" value="Submit"></nobr> <hr width="2000"> <p>11</p> <p>12</p> <p>13</p> <p>14</p> <p>15</p> <p>16</p> <p>17</p> <p>18</p> <p>19</p> <p>20</p> </form> </body> </html>
Вот разбивка по играм, которая описывает, что происходит, когда пользователь нажимает кнопку, чтобы отправить форму:
- Функция
saveScrollCoordinates()выполняется обработчиком событияonSubmit(). -
saveScrollCoordinates()обновляетscrollxиscrollyскрытые вводы соответствующими значениями. - Форма отправляет обратно на ту же страницу.
- Параметры формы ColdFusion
scrollxиscrollyустанавливают координаты прокрутки в функцииscrollToCoordinates(). -
onLoad()событияonLoad()в<body>вызываетscrollToCoordinates(). - Свойства прокрутки окна корректируются в соответствии с переданными координатами.
Протестируйте форму, и вы заметите, что независимо от того, где вы прокручиваете, когда вы отправляете страницу, вы попадаете в одно и то же место, откуда начинали как вертикально, так и горизонтально. Чтобы лучше проверить горизонтальную прокрутку, измените размер своего браузера, чтобы он был очень узким, а затем отправьте форму. Ваша прокрутка X и Y сохраняется автоматически. Альтернативный способ сделать это — использовать href-якоря, но это не так точно и плавно.
Завершение
Как насчет приведенного выше примера, где у нас была страница поиска, содержащая форму ввода и результаты, которые можно сортировать по столбцам? В этом случае вы, скорее всего, будете отправлять форму и выполнять немного SQL с немного отличающимися значениями всякий раз, когда пользователь решит щелкнуть заголовок столбца для сортировки. Если вы обновляете некоторые скрытые входные данные с помощью нового столбца сортировки и направления сортировки, добавить эту функцию на свою страницу будет несложно. Вам нужно только вставить дополнительные скрытые входные данные в вашу форму и включить JavaScript, представленный здесь, в ваш собственный JavaScript. Ссылки для сортировки могут использовать обработчик событий onClick() для обновления скрытых значений прокрутки и повторной отправки формы.
То, что я показал вам, является простым примером этой техники. Код здесь был протестирован с использованием Internet Explorer 6 и Mozilla Firefox для Windows и Safari на Mac. Используйте идею этого метода в качестве отправной точки. Примените свои собственные творческие способности и навыки, чтобы добавить более изысканный, интуитивно понятный вид к формам, которые вы используете в своих приложениях.