Допустим, в вашем приложении для Windows 8 есть куча плиток.
И пользователь берет этот список пальцем и показывает некоторое расстояние вправо. Есть шанс, что список окажется в таком положении…
Обратите внимание, что плитки слева обрезаны. Список составил какое-то произвольное расстояние и остановился там, где его остановила судьба. Я знаю, что все это научно, но забавно сказать, что судьба приземлилась здесь.
Но что, если вы не хотите отдавать свое приложение в непостоянные руки судьбы и предпочитаете каждый раз останавливаться на краю плитки. Этот кадр из моего последнего примера, следовательно, должен найти вас здесь …
… С краями плиток 9, 10 и 11, аккуратно выровненными по левому краю.
Это возможно? Конечно, это является.
Это легко? Ага. Это тоже.
Еще раз, пользовательские свойства CSS в Windows 8 приходят на помощь. Я собираюсь поговорить о паре свойств в области -ms-scroll *. Если вы хотите получить хороший список доступных свойств, просто введите -ms-scroll на листе CSS и позвольте IntelliSense стать вашим руководством.
Мы реализовали бы это, используя точки привязки . Точки привязки — это концепция IE. Я не знаю, были ли они предложены W3C для рассмотрения в стандарте CSS (я не смог найти ничего, что указывало бы на это), но они должны быть, потому что они очень полезны.
Если у вас есть контейнер, содержимое которого выходит за границы контейнера, тогда для просмотра всего содержимого необходима прокрутка, верно? И когда пользователь щелкает пальцем, содержимое прокручивается внутри контейнера и, отпуская палец, пользователь немного дольше наблюдает за прокруткой содержимого с некоторой очевидной инерцией, верно? Ну, точка привязки — это место в этом контенте, где имеет смысл остановить прокрутку. Вы можете определить точки привязки одним из двух способов: обязательным или близким.
Определение контейнера для использования обязательных точек привязки означает, что он всегда останавливается в ближайшей точке привязки. Это никогда не остановится где-то посередине. Однако определение его для использования точек привязки сближения означает, что если он окажется достаточно близко к точке привязки, то он найдет свой путь туда, но если он не будет достаточно близко, то будет хорошо, если он остановится между точками.
Вот CSS, который вы должны добавить, чтобы достичь вышеуказанного …
.snappoints #list .win-viewport {
-ms-scroll-snap-x: mandatory snapInterval(0px,200px);
}
Позвольте мне разобрать это для вас.
.snappoints — это имя моей страницы, которое в навигационных приложениях Windows 8 автоматически получает класс с именем вашей страницы. Таким образом, .snappoints по сути пространства имен этого CSS на этой странице.
#list — это элемент управления ListView в моем HTML. Я вручную дал ему идентификатор списка . Кстати, я недавно обнаружил, что если вы знаете, что у вас будет только один список на вашей странице, было бы легче отказаться от присвоения ему названия и вместо этого просто обратиться к нему с помощью [data-win-control = WinJS.UI .ListView] . Хорошо, а?
.win-viewport — это окно просмотра моего ListView. Если вы много работаете с ListView и еще не видели его, вам обязательно следует проверить стилизацию ListView и его элементов в Центре разработки . В этой статье он разбивает компоненты ListView, чтобы вы могли понять, как их стилизовать. Вот как это визуально определяет win-viewport…
Первая часть свойства ( обязательно ) указывает на то, что мы используем обязательные точки привязки, поэтому, как я уже говорил, мы уверены, что остановимся на точке привязки и никогда между ними.
Вторая часть свойства ( snapInterval (0px, 200px); ) указывает на то, что я хочу начать содержимое в самом начале ( 0px ) и хочу, чтобы точка привязки каждые 200 пикселей. Я должен знать, что мои плитки имеют ширину 200 пикселей, чтобы сделать эту работу. CSS на самом деле не распознает край плитки, он просто указывает каждые 200 пикселей.
Я был немного обескуражен тем, что не смог найти способ указать вручную (со свойствами CSS на HTML-элементах, я думаю), где я хочу, чтобы точки привязки были, а затем просто чтобы контейнер распознал их, но этот способ тоже работает довольно хорошо.
Вот и все. Счастливого щелчка!