Цитата:
в демки три компонента, все слабо связанны между собой. Для хардкора не испозованы даже хелперы. Собственно это просто доказательство возможности, на angular это проблема конечно изящнее решается. в демках UI я вообще не ивдел никогда декомпозиции, походу её там тупо нет. всё описание использования и взаимодействия компонентов занимает 4 строчки. <div id="contr1" class="controller"> <menu data-source="imglist" select="selectitem"></menu> <slide data-source="imglist" select="selectitem"></slide> </div> Роль контрола прежде всего в обепечение данными. Слайдер и меню независимы, и могут распространятся как jQuery плагины, независимо друг от друга. <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script> $(function(){ //================== плагин слайдера ===================// $('slide').each(function(){ var me= $(this), ds=me.attr('data-source'), selItem=me.attr('select'), scope=me.parent('.controller'); //применим шаблон me.append('<ul class="Slideshow"></ul>'); //слушаем изменения в data-source scope.on('change-'+ds, function(){ $('li',me).remove(); scope.data(ds).forEach(function(img){ $('ul',me).append('<img src="'+img+'" class="Slideshow_slide">'); }) }) //слушаем изменения в selectItem scope.on('change-'+selItem,function(){ me.find('img').removeClass('Slideshow_slide').addClass('Slideshow_slide_hide'); me.find('img:eq('+scope.data(selItem) +')').removeClass('Slideshow_slide_hide').addClass('Slideshow_slide'); }) }); //================== плагин меню ===================// $('menu').each(function(){ var me= $(this), ds=me.attr('data-source'), selItem=me.attr('select'), scope=me.parent('.controller'); //применим шаблон me.append('<ul></ul>'); //слушаем изменения в data-source scope.on('change-'+ds,function(e){ scope.data(ds).forEach(function(img){ $('ul',me).append('<li>'+img+'</li>'); }) me.find('li').click(function(e){ scope.data(selItem, $(this).index() ); scope.trigger('change-'+selItem); }) }) }); //================== контроллер ===================// $('#contr1').each(function(){ var me=$(this); me.data('imglist',[ 'http://cs402424.vk.me/v402424516/5f39/j9NEVbzaFho.jpg', 'http://cs540109.vk.me/c540101/v540101247/1e08/h5zYSV2a3C8.jpg', 'http://cs413921.vk.me/v413921890/1b63/q1lALPeD_9k.jpg', 'http://cs413921.vk.me/v413921890/1b52/gfODdvg3BeU.jpg', 'http://cs540109.vk.me/c540101/v540101247/1dfa/9tZrEKSJUPs.jpg', 'http://cs540109.vk.me/c540101/v540101247/1dec/IdbEO_5ghdE.jpg', 'http://cs417724.vk.me/v417724583/9737/OmJeOnhTQ9I.jpg' ]) me.data('selectitem',0); //оповестим плагины об изменении данных me.trigger('change-imglist'); me.trigger('change-selectitem'); }) }) </script> <style> .Slideshow { position : relative; width : 600px; height : 400px; list-style : none; padding : 0; overflow : hidden; } .Slideshow_slide_hide{ position : absolute; width : 0%; left : 50%; height : 100%; transition : all 0.2s; } .Slideshow_slide { position : absolute; width : 100%; height : 100%; transition : all 0.2s 0.2s; } li:hover { background-color : red; cursor : pointer; } </style> <div id="contr1" class="controller"> <menu data-source="imglist" select="selectitem"></menu> <slide data-source="imglist" select="selectitem"></slide> </div> |
Ну окей, теперь сделай так чтобы при клике колесиком мышки по активному слайду он и его пункт меню удалялся) ^__^
это то что у меня делается вот так $('slide').on('click(m-middle)', function(event, index){ $('slide').splice(index, 1); }); кстати надо обертку на удалялку написать) точно) п.с. и теперь посмотри на мои 15 строчек кода и на свои, а так же я не понял что ты хочешь доказать, ты хочешь показать свое незнание зачем нужны шаблонизаторы или что)? Если ты не знаешь зачем они нужны я могу быстренько по задавать тебе квесты от которых у тебя руки дыбом встанут) которые на шаблонизаторах решаются за 5 секунд) если уж тебе лень смотреть пособия по ангуляру) ок ок небольшое соревнование, давай напишем простое TODO приложение)) щас я опишу цель задания |
Причём тут шаблонизаторы, или размер кода.
Я не это пытаюсь донести. Я не полный псих чтобы angular серьёзно заменять jQuery. То что я написал это хардкор, по принципу могу жопой пропердеть концерт рахманинова. Я сделал важную вещь, я создал два независимых компонента и отправил их в чёрный ящик. с точки зрения пользователя компонентов приложение выглядит так. <script> $('#contr1').each(function(){ var me=$(this); me.data('imglist',[ 'http://cs402424.vk.me/v402424516/5f39/j9NEVbzaFho.jpg', 'http://cs540109.vk.me/c540101/v540101247/1e08/h5zYSV2a3C8.jpg', 'http://cs413921.vk.me/v413921890/1b63/q1lALPeD_9k.jpg', 'http://cs413921.vk.me/v413921890/1b52/gfODdvg3BeU.jpg', 'http://cs540109.vk.me/c540101/v540101247/1dfa/9tZrEKSJUPs.jpg', 'http://cs540109.vk.me/c540101/v540101247/1dec/IdbEO_5ghdE.jpg', 'http://cs417724.vk.me/v417724583/9737/OmJeOnhTQ9I.jpg' ]) me.data('selectitem',0); //оповестим плагины об изменении данных me.trigger('change-imglist'); me.trigger('change-selectitem'); }) </script> <div id="contr1" class="controller"> <menu data-source="imglist" select="selectitem"></menu> <slide data-source="imglist" select="selectitem"></slide> </div> У тебя все кишки на виду. <script> ui.module['Slideshow'] = function($, scope) { scope.active = 0; $.on('keydown(left)', function() { scope.active-- }); $.on('keydown(right)', function() { scope.active++ }); var srcs = [ 'http://cs402424.vk.me/v402424516/5f39/j9NEVbzaFho.jpg', 'http://cs540109.vk.me/c540101/v540101247/1e08/h5zYSV2a3C8.jpg', 'http://cs413921.vk.me/v413921890/1b63/q1lALPeD_9k.jpg', 'http://cs413921.vk.me/v413921890/1b52/gfODdvg3BeU.jpg', 'http://cs540109.vk.me/c540101/v540101247/1dfa/9tZrEKSJUPs.jpg', 'http://cs540109.vk.me/c540101/v540101247/1dec/IdbEO_5ghdE.jpg', 'http://cs417724.vk.me/v417724583/9737/OmJeOnhTQ9I.jpg' ]; $('slide').model({position: 'middle', src: ''}); $('slide').repeat('src', srcs); $('slide').watch('active', function(i, scope) { var active = scope.active; scope.position = (i < active) ? 'left' : (i > active) ? 'right' : 'center'; }); $('menu-item').model({index: 0}).repeat(srcs).each(function(i, scope) { scope.index = i; }).on('click', function(e, i) { scope.active = i; }); }; </script> <div ui="Slideshow{ #myMenu toggle }"> <ul class="Slideshow"> <img ui="Slideshow-slide" src="{{src}}" class="Slideshow_slide slide_{{position}}"> </ul> <ul> <li ui="Slideshow-menu-item">слайд {{index}}</li> </ul> </div> Кода на функционал конечно меньше чем у jQuery, но то что ты с его помощью разрабатываешь слишком сложно использовать. И я немогу добится от тебя примера где бы ты показал что я могу разработать деталь которую удобно встроить. Я не хочу писать вот такую парашу каждый раз когда мне нужен слайдер. <div ui="Slideshow{ #myMenu toggle }"> <ul class="Slideshow"> <img ui="Slideshow-slide" src="{{src}}" class="Slideshow_slide slide_{{position}}"> </ul> <ul> <li ui="Slideshow-menu-item">слайд {{index}}</li> </ul> </div> неужели так сложно понять ДАЙ МНЕ НОРМАЛЬНЫЙ ИНТЕРФЕЙС ДЛЯ ИСПОЛЬЗОВАНИЯ КОМПОНЕНТОВ И Я ОТ ТЕБЯ ОТСТАНУ :) Я раз 10 уже пинал тебя за это :) |
Ты видимо просто не до конца понимаешь ЧТО такое UI.js и как им пользоваться)
Цитата:
<ul ui-template="Slideshow"> <img ui="Slideshow-slide" src="{{src}}" class="slide_{{position}}"> </ul> Цитата:
DjDiablo, то о чем ты говоришь называется шаблоны) ты пытался применить редактор модулей в шаблонизации по этому и предположил что это придется писать каждый раз) вот и все) видимо мне действительно надо сделать демки нормальные на сайте чтобы показать что да как) а то вы не понимаете) ну это и логично вы же не знаете что в коде, вы видите только то что я показал) |
Может и не понимаем, я прошу эту демку от тебя с первой версии :)
|
Ну вот смотри короче, ты оцениваешь то что есть, но дело в том что я пилю все с нижних уровней так чтобы удобно было не только юзать модули, но и описывать их и.т.п. то есть на самом верхнем уровне у тебя стена и взаимодействие между кирпичиками строится так:
![]() у меня же верхние кирпичики это модули и используются они так: ![]() да да, на это место автоматически подставятся разметка из шаблонов этих модулей )) 2 (зарание описаных с зарание опсиаными шаблонами) модуля, и связаны они по всем сокетам (хотя что у менюшки что у слайдшоу по сути юзается только один сокет toggle перкключалка, если не написать название сокетов после айдишника модуля на который подписываемся то подписывание происходит на все сокеты которые у него вообще есть) Ну как-то так, просто это версия 0.7 и тут я просто придумываю как красиво описывать логику модулей и их шаблоны. все ж по порядку ну) и разумеется я добавлю параметры тут) чтобы легко описывать настройки каждого модуля пока мы просто видим что модуль Слайд шоу подписан на все сокета модуля с айдишником myMenu =) и реагирует на них, меню о слайдшоу ничего не знает потому что сокеты могут только "слушать" но не передавать) |
а инфа c путями к картинкам где ?
|
Цитата:
но можно добавить чо то типа контролов как у тебя и передавать их имена в настройки, ну тип того <ui src="urlLust">Shideshow{ #myMenu }</ui> <ui src="urlLust">Menu#myMenu</ui> но блин мне кажется данные надо как то на сервере хранить и аяксом получать, не? у меня щас это делается так описывается api для работы с сервером: ui.api = function(){ this.getComments = function (){}; this.getImgURLs = function (){}; } а внутри модуля просто юзается этот метод ui.module["Slideshow"] = function($){ $.api.getImgURLs(function(urls){ $('slide').repeat(urls) }) }; ну типа того |
Если сайт, то нужно помнить что аякс враг поисковика.
Если приложение то вероятнее всего ajax с сервера. Но нужно биндить данные очень аккуратно, возможно данные не только слайдером используются. К тому же данные могут редактировать на клиенте, удалятся, добавляться, и возможно сохранятся обратно на сервер. |
Цитата:
Цитата:
п.с. а знаешь сделаю ка я уровень стены уже сейчас) чтобы показать как это удобно Цитата:
так то ^__^ |
Часовой пояс GMT +3, время: 23:05. |