Spinning wheel - как сделать dropbox а-ля iDevice (на базе WebKit)

Рейтинг:   / 2
ПлохоОтлично 

Для построения интерфейса своего приложения на iPad я выбрал NimbleKit [http://nimblekit.com] (всё ни как не соберусь написать о нём, но процесс изучения завершился к нашему совместному удовлетворению) как основной движитель прогресса - написание iApp без Objective-C (достаточно javascript, который и даёт NimbleKit [http://macmix.ru/programming/383-nimblekit-v197-.html] и знаний HTML и CSS, ещё большим плюсом является то, что теперь я могу переносить своё приложение на любой гаджет в очень скромные сроки) и iWebKit [http://snippetspace.com] - как основую библиотеку для быстрого построения интерфейса на базе web-приложения.

Но случилось мне столкнуться с такой штукой, что нужно стало мне позарез написать пару дата-пикеров и вообще кучу droplist-ов. Всё бы было замечательно, но увы - iWebKit вместо ожидаемого

Spinning wheel - внешний вид. Как сделать на базе WebKit

он показывает вот такое:

iWebKit/iOS (droplist, dropdown, select) - внешний вид выпадающего списка

Встал извечный русский вопрос: что делать?

А делать пришлось следующее: 

прочитать вот этот интересный материал : http://cubiq.org/spinning-wheel-on-webkit-for-iphone-ipod-touch;

скачать скрипт этого виджета вот отсюда: http://cubiq.org/dropbox/sw/sw.zip?v=1.4 (может уже есть более новая версия, поэтому следите за изменениями на cubiq.org);

распаковать и залить в ваш проект на XCode, выкинув при этом index.html и spinningwheel.js (оставив тот, что с суфиксом -min, помятуя о ограниченности объёмов памяти на мобильных устройствах);

не забываем о том, что мы пишем на XCode, т.е. перетягиваем spinningwheel-min.js в Bundle

(сорри, я закрыл все упоминания названий проекта smiley)

Приступим к программированию...

Из описания:

виджет состоит из двух частей: CSS и JavaScript-ы, ни какого дополнительного HTML не нужно. Все элементы создаются жабоскриптом на лету. Этому контролу (spinning wheel) для работы так же нужно два PNG-имага для построения интерфейса. Код не требует инициализации по window.onload-у.

Само программирование состоит в следующих шагах:

добавляем в head самым традиционным образом

link rel="stylesheet" href="spinningwheel.css" type="text/css" media="all"

и не очень традиционно JS

script type="text/javascript" src="spinningwheel-min.js?v=1.4".

Теперь надо создать js функции которые, в свою очередь, будут создавать ваши data picker-ы или иные списковые органу управления.

Создание data picker:


	function openBirthDate() {

	var now = new Date();

	var days = { };

	var years = { };

	var months = { 1: 'Янв', 2: 'Февр', 3: 'Март',

	4: 'Апр', 5: 'Май' 6: 'Июнь',

	7: 'Июль', 8: 'Авг', 9: 'Сен',

	10: 'Окт', 11: 'Нбр', 12: 'Дек' };

	

	for( var i = 1; i < 32; i += 1 ) {

	  days[i] = i;

	}

	for( i = now.getFullYear()-100; i < now.getFullYear()+1; i += 1 ) {

	  years[i] = i;

	}

	//будут выведени в последовательности добавления, т.е. год, месц, число:

	SpinningWheel.addSlot(years, 'right', 1999);

	SpinningWheel.addSlot(months, '', 4);

	SpinningWheel.addSlot(days, 'right', 12);

	//в своей программе я поставил переключатель

	//и в зависимости от локализации меня число и год местами

	//попрошу заметить, что и результат тогда будет приходить в той же последовательности

	

	SpinningWheel.setCancelAction(cancel);

	SpinningWheel.setDoneAction(done);

	SpinningWheel.open(); }

	// функция обработки нажатия на DONE клавишу

	function done() {

	  var results = SpinningWheel.getSelectedValues();

	  //сюда пишете, что вы хотите сделать с результатом.

	  //очень рекомендую вывести скачала результат куда-нибудь,

	  //чтобы изучить в каком формате он приходит

	}

	//функция нажатия на клавишу cancel

	function cancel() {

	

	//сюда пишете код который по Cancel-у должен случится.

	//Или ни чего не пишете, но и SpinningWheel.setCancelAction(cancel) при этом не делаете

	

	}

	

	window.addEventListener(

	  'load',

	  function(){

	     setTimeout(

	          function(){ window.scrollTo(0,0); },

	         100);

	   },

	   true);