Вградена система за редактиране
Не принуждавайте потребителите да кликват върху няколко страници, за да редактират едно поле - това е остаряло. В този урок ще научите как да създадете вградена система за редактиране, подобна на много популярни сайтове като Flickr.
Днес ще научим как да създадем нещо подобно с помощта на - да, познахте! - нашата любима jQuery рамка! Интересувате ли се? Тогава давай напред!
Дефинирайте цели
Преди да започнем работа по функционалността, трябва да вземем решение за целите на нашата работа и очаквания краен резултат.
И така, вече сме решили целите и можем да започнем да разработваме план за постигането им.
План за действие
Необходимо е да съставим списък с действията, които ще трябва да извършим, както и да разработим техния ред.
Ето какво трябва да направим в процеса на писане на функционала. Разбира се, има някои подточки, но ще ги обясня в хода.
Оформление на основното тяло
HTML маркирането за демонстрацията изглежда по следния начин:
Както можете да видите, освен така наречения шаблон (повторение на синтактични модели), имаме два списъка, които трябва да бъдат подредени: всеки li елемент принадлежи към редактируемия клас и трябва да покажем на потребителя, че може да коригира тези елементи на уеб страницата. Използвахме също библиотеката jQuery и нашия собствен скрипт.
CSS
Нищо специално - само няколко html кода за маркиране и стилизиране. Обърнете внимание на функциите editHover и noPad - ще говорим за тях по-късно.
И така, сега имаме основата на функционалността, моделирана по някакъв начин - можем да започнем да довеждаме функционалността досъответствие с нашите изисквания. Не забравяйте, че ще използваме jQuery и ще ни трябва поне версия 1.3 - всичко останало няма да работи. Добавяне на псевдоклас при насочване на мишката за промяна на фона
Както вече решихме, когато задържите курсора на мишката върху текста, който може да се редактира, фонът му трябва да се промени на светлосин. За да направим това, използваме класа editHover.
Това малко парче код ще направи каквото е необходимо. За да редактирате класа editHover, ще използваме функцията за задържане на мишката, налична в jQuery, така че елементът на уеб страницата да промени цвета си, когато курсорът се задържи върху него, и да се върне към предишния цвят, когато курсорът бъде премахнат. Тази функция се използва за подчертаване на конкретни елементи - няма смисъл да се прилага към всички елементи на уеб страница.
Превключващи елементи
На първо място, трябва да сме сигурни, че нашият код ще работи след двукратно щракване върху редактируемия елемент, така че нека предоставим това в кода.
Прикрепихме функцията replaceHTML (замяна на HTML) към събитието с двойно щракване, в случай че събитието е свързано с елемента, който се редактира. Сега ще продължим да работим по организирането на превключването на елементите.
Нека продължим да работим върху кода стъпка по стъпка, бавно и подробно, обмисляйки всяко действие.
Сега нашият текст е сигурно запазен, достъпен за по-нататъшна употреба и можем да преминем към превключване на елементи. Първо анулираме елементите li с празен html функционален низ, след това добавяме някои стандартни HTML елементи, за да създадем поле за въвеждане на текст, и няколко връзки за запазване и отмяна на редактирането. Също така сме групирали всички елементи в класове, за да ги направим лесни за достъп до кода.
Както обикновено, използваме всичкитова е да се дефинира в кода началото на действията, които потребителят може да извърши с избрания елемент.
Запазване на редакцията
Първо, позволете ми да ви представя функция на jQuery, наречена live. Възможно е да не сте се сблъсквали с него досега, затова ще ви кажа накратко какво представлява.
Тази функция свързва операции и събития, независимо кога е създаден документът. Повече информация за функцията е достъпна в официалните рамкови документи.
Сега нека разгледаме по-отблизо нашия код. Първо, свързваме кода, съдържащ се в анонимната функция, към събитието с щракване на мишката. С помощта на функцията запазваме текста, съдържащ се в полето за въвеждане - това е доста чист ход, тъй като този текст все още няма собствена идентификация на страницата. След това преминаваме от оригиналния елемент към създадения от потребителя елемент и след това го запазваме.
След това получаваме достъп до оригиналния елемент и заместваме неговото HTML съдържание с текста, записан в предишната стъпка.
Тази част от кода може да се побере в един ред, но аз я разделих на няколко реда за по-лесна четливост на кода.
Отказ от редактирането
Всъщност е много просто - няма клопки, всичко е точно както е написано. Ако потребителят промени решението си относно запазването на редактирания текст, тогава ние просто заместваме HTML съдържанието на оригиналния елемент с текста, който първоначално се съдържа в елемента и е запазен с помощта на функцията oldText.
Е, основната част от работата е свършена, остават само няколко неща за редактиране, в случай че потребителят направи нещо, което не сме предвидили.
Свързване и прекъсване на връзката
Ако вече сте пробвализа да тествате писмения код, вероятно сте се натъкнали на такава грешка: когато потребителят щракне два пъти върху прозореца за въвеждане на текст, HTML кодът на системата за редактиране се появява в него. Опитайте - с всяко двойно кликване към него ще се добавят все повече и повече редове текст. Още по-лошо ще бъде, ако изберете сигнал с едно кликване на мишката, за да започнете да редактирате.
За да избегнете това, трябва да прекъснете връзката между щракване и започване на редактиране, когато прозорецът за въвеждане вече е на екрана, и да възстановите тази връзка, когато потребителят запази редакцията или я отмени напълно. Нека да продължим с това.
Трябва леко да променим кода, който написахме:
Направихме така, че сигналът "започнете редактиране" да не работи, ако редактирането вече е започнало. За други редактируеми елементи на страницата сигналът все още е активен.
След това възстановяваме връзката между двойно щракване и започване на редактиране на текста, независимо дали потребителят редактира текста отново или не. Ако не се свържем отново, текстът може да бъде коригиран само веднъж.
Довършителни работи
Последната част от нашия код е насочена единствено към външната ефектност на действията на програмата. Може би сте забелязали, че елементите на класа li имат хубаво подравняване, но когато редактирате текста, той изчезва, което разваля цялата картина. Искаме редактираният текст да бъде подравнен точно като оригинала, така че добавяме класа noPad към елемента, когато започнем да редактираме.
Напомням ви, че когато коригирате един елемент, можете да редактирате всички останали елементи на уеб страницата паралелно.
И още една стъпка:
За да не правя кода твърде дълъг, се ограничих доедна функционална опция. Ако решите да използвате тази функционалност в собствените си проекти, тогава ще трябва да осигурите използването на системи, различни от SAP, и в допълнение към модела AJAX.
Много е лесно да добавите тази функционалност към програмата, но не забравяйте, че горният код е само пример, илюстрация и не е предназначен за промишлена репликация. Както можете да видите, аз се въздържах от добавяне на допълнителни атрибути към елементите на уеб страницата и прозорците за редактиране, но в случай, че пишете програма, предназначена за масова употреба, ще трябва да направите всичко това.
За да добавите AJAX заявка, редактирайте функцията за запазване, както следва:
Имайте предвид, че на системи, различни от SAP, приложението изисква допълнителни атрибути за избор и редактиране на текст, за да работи правилно, които можете лесно да добавите към кода, който разработвам.
Изводи
Е, това е - имате код, който можете да добавите към вашите уеб разработки. Надявам се, че урокът ви е харесал и сте успели да научите нещо интересно и полезно от него. Чувствайте се свободни да използвате кода за свои собствени цели и да се свържете с мен, ако нещо не е ясно.
Този урок е подготвен за вас от екипа на ruseller.com Източник на урока: www.nettuts.com Преведен от: Максим Шкурупий Урокът е създаден: 23 октомври 2009 г. Преглеждания: 29539 Правила за препечатване
5 последни урока от рубриката "Разни"
Как да хоствате уебсайта си? Правилно избраният добър хостинг е бъдещето на вашите сайтове
Проектът е готов, всичко е проверено на локалния OpenServer сървър и можете да прехвърлите сайта на хостинга. Но коя фирма да избера? Предлагам да обмислите хостинг на fornex.com. Чудесно място за вашия проектперспективи за бърз растеж.
Разработка на уебсайт с онлайн платформата Wrike
Създаването на уеб сайт е трудоемък процес, който изисква добре координирано взаимодействие между клиента и изпълнителя, както и между всички членове на екипа, участващи в проекта. И онлайн платформата Wrike ще бъде от голяма помощ в това.
20 Ресурси за създаване на прототипи
Избор от десетки ресурси за създаване на макети и прототипи.
Топ 10 безплатни хостинг услуги
Малка селекция от безплатни хостинг доставчици с подробно описание.
Бърза бележка: Групово АКТУАЛИЗИРАНЕ в MySQL
Не е тайна как да внедрите масово INSERT в MySQL, но с UPDATE може да е трудно. За да не прибягвате до манипулации на събитието ON_DUPLICATE, можете да използвате специалната конструкция CASE ... WHEN ... THEN.