Объектілерді бояу. Векторлық нысандарды астындағы фон түсінде қайта бояуға арналған сценарий (сынақ аяқталды) Мобильді құрылғыларға арналған қолданба
Бұл жазбада мен тағы бір JavaScript туындысын ұсынғым келеді: Түс таңдау құралы - түс таңдау құралы. Сценарий функционалдық және орнату тұрғысынан өте қарапайым, негізінен оның коды өте күрделі емес. Ол jQuery және кескіндерді ҚОЛДАНБАДЫ, өлшемі кішкентай және өте қарапайым және жылдам. IE 6-9, Opera, FireFox, Safari, Chrom жүйелерінде жұмыс істейді.
Түс таңдау құралы әдепкі бойынша 216 веб-қауіпсіз түстер палитрасын жасайды және CSS стиліндегі көрінісі бар, бірақ палитраның көрінісі мен мазмұны теңшеуге болады. Төменде оның не істей алатынына бірнеше мысал келтірілген.
Сценарий 1.2 нұсқасына жаңартылды (бояғышты жабу түймесі қосылды), бірақ тізімдер өзгеріссіз қалды. Жаңа нұсқатек архивте.
Түс таңдау құралы демонстрациясы
Мысалдары бар сценарий мұрағатын осы жерден жүктеп алуға болады:
colorPicker.v1.1 (түпнұсқа нұсқасы)
colorPicker.v1.2 (Бояғышты жабатын түйме қосылды)
Сізге түсіндіруді жеңілдету үшін мен кейбір анықтамаларды енгіземін:
Палитра
Бояғыштың өзі түс үлгілерін қамтиды
Үлгі
Басқан кезде түсті таңдайтын палитра элементі.
Таңдаушы
Бұл пайдаланушы көретін түсі бар шаршы және түстер палитрасы пайда болуы үшін оны басу керек.
Түс таңдау құралын біріктіру
Сценарийді пайдалану өте оңай. Түс таңдау құралы - барлығы үшеуі бар қолжетімді әдістер(деректер түрімен көрсетілген):
ColorPicker.insertInto(HTMLlement элементі, жол атауы, жол таңдалды, int offsX, int offsY)
Негізгі әдіс – көрсетілген html элементіне Түс таңдау құралын кірістіреді. Опциялар:
- элемент элементі- DOM түйіні – Түс таңдау құралын орналастыратын ағаш
- жол атауы- таңдалған түсті көрсететін пішін элементінің аты*
- жол таңдалды- "#FFCC00" сияқты жол - әдепкі таңдағыш түсі
- int offsX- палитра координаттарының ығысуы (жоғарғы оң жақ бұрыш) тінтуірдің көлденең шертуіне қатысты
- int offsY- палитра координаттарының ығысуы (жоғарғы оң жақ бұрыш) тінтуірдің тігінен шертуіне қатысты
* - Түс таңдау құралының өзі жасырын INPUT элементін жасайды және оны таңдаушының алдында DOM ішіне орналастырады. Егер атауды нақты көрсетпесеңіз, сценарий жасырын INPUT элементінің атын бірінші параметрде көрсетілген элементтің идентификаторымен бірдей етіп орнатуға тырысады.
// Бетке қосу: ColorPicker.insertInto(document.getElementById("color_picker_two"), "негізгі_түс", "#0000ff", 10, 15); ColorPicker.setPalete(массивOfColors)
Жеке түстер палитрасын орнатуға мүмкіндік береді. Ол параметрді - массивті алады, мысалы:
ColorPicker.setPalete(["#FFFFFF","#FFCC00","#00FFCC","#0000FF","#00CCFF","#CC00FF"]); ColorPicker.setClasses(жол таңдау құралы, жол палитрасы, жолдың colorItem)
Таңдаушы, палитра және түс үлгілері үшін теңшелетін стиль сынып атауларын көрсетуге мүмкіндік береді, мысалы:
ColorPicker.setColors("col-safe-picker","col-safe-palette","col-safe-item");
Бұл өзіңіздің түстер палитрасын орнатқыңыз келсе немесе стандарттылардың сыртқы түрін өзгерткіңіз келгенде қажет болады.
Түс таңдау құралын пайдалану мысалы
Бізге қажет бірінші нәрсе - пішін - оның екі элементіне біз Түс таңдау құралдарын енгіземіз:
Біз негізгі Color Picker файлын қосамыз - a
Стандартты палитраға стильдерді қосамыз:
Шын мәнінде, Түс таңдау құралы үшін тек үш сынып қажет: таңдаушының өзі үшін, палитра үшін және үлгілер үшін. Экспрессивтілік үшін, түс үлгілері үшін біз тағы бір псевдокласс қостық... :hover Барлығы осы.
Мен оны қол жетімді түрде түсіндірдім деп үміттенемін, сценарий файлдарын мақаланың басындағы сілтемеден жүктеп алуға болады, бірақ мен сценарийдің тізімін үйіндіге беремін - әдеттегідей, мен қарапайым және қысқарақ болуға тырыстым сұрақтарыңыз болса жазыңыз.
Түс таңдау құралының тізімі
var ColorPicker = (функция (GLOB) ("қатаң пайдалану"; var DOC = GLOB.document, pickerClass = "col-pic-picker", paletteClass = "col-pic-palette", colorItemClass = "col-pic-element" , PALETTE = , // Түс үлгісі үшін DOM элементін жасайды getColorItem = функциясы (clickHandler) ( var colDiv = DOC.createElement("DIV"); colDiv.className = colorItemClass; colDiv.onclick = clickHandler; қайтару colDiv; ), / / Бетті айналдыруды алу: pageScroll = function() (қайтару ( y: GLOB.pageYOffset || DOC.documentElement.scrollTop || DOC.body.scrollTop, x: GLOB.pageXOffset || DOC.documentElement.scrollLeft || DOC. body .scrollLeft ) ), // Түстер палитрасын жасау (216 Safe Web Colors көмегімен) // Бұл функцияға сырттан кіру мүмкін емес createPalette = функция (srcPicker, srcInput) ( var palette = DOC.createElement("DIV"), ұзындық = PALETTE.length, hexR = "", hexG = "", hexB = "", colItem = null, i, q, m, // Басуды өңдеудің үлгісі: clickHandler = функция () ( srcPicker.styl e.фон = this.style.background; srcInput.value = this.hv; palette.style.display = «жоқ»; ), // Бояғышқа түс үлгісін қосады: addColor = функция (түс) ( colItem = getColorItem(clickHandler); colItem.style.background = colItem.hv = түс; palette.appendChild(colItem); ); // Пайдаланушы палитрасын орнатпаған болса: if (ұзындығы === 0) ( // Қауіпсіз веб түстер палитрасын жасау: for (i = 0x0; i)<= 0xff; i += 0x33) { hexR = (i >0) ? i.toString(16) : "00"; үшін (q = 0x0; q<= 0xff; q += 0x33) { hexG = (q >0) ? q.toString(16) : "00"; үшін (m = 0x0; m<= 0xff; m += 0x33) { hexB = (m >0) ? m.toString(16) : "00"; addColor("#" + hexR + hexB + hexG); ) ) ) // Әйтпесе, егер пайдаланушы өзінің түс массивін енгізген болса, оны көрсетіңіз: ) else ( for (i = 0; i)< length; i += 1) { addColor(PALETTE[i]); } } // Конфиг палитры: palette.className = paletteClass; palette.style.display = "none"; palette.style.position = "absolute"; // Добавляем в DOM DOC.body.appendChild(palette); return palette; }; return { /** * Установка имён классов стилей. * @param string picker - Имя класса для значка выбора цвета, по-умолчанию: "col-pic-picker". * @param string palette - Имя класса для появляющейся палитры, по-умолчанию: "col-pic-palette". * @param string colorItem - Имя класса элементов - образцов цвета в палитре, для по-умолчанию: "col-pic-item". * @return ColorPicker */ setClasses: function (picker, palette, colorItem) { pickerClass = picker; paletteClass = palette; colorItemClass = colorItem; return this; }, /** * Установка своей палитры цветов. * @param array arrayOfColors - массив HEX-значений цветов. * @return ColorPicker */ setPallete: function (arrayOfColors) { PALETTE = arrayOfColors; return this; }, /** * Вставить выбиралку цвета в HTMLElement * @param HTMLElement element - элемент, результат выборки: document.getElementById * @param string name - атрибут для элемента формы, представляющего выбранный цвет. * @param string selected - значение по-умолчанию для элемента формы, представляющего выбранный цвет. * @param int offsX - смещение палитры относительно эемента выбора цвета по горизонтали * @param int offsY - смещение палитры относительно эемента выбора цвета по вертикали * @return ColorPicker */ insertInto: function (element, name, selected, offsX, offsY) { var picker = DOC.createElement("DIV"), hideInput = DOC.createElement("INPUT"), palette = createPalette(picker, hideInput), oX = offsX || 1, oY = offsY || 1; // Скрытый элемент формы, значение которого // будет меняться, в зависимости от выбора цвета // и которое будет передаваться на сервер. hideInput.value = picker.style.background = selected; hideInput.type = "hidden"; hideInput.name = name || element.id; picker.className = pickerClass; // Обработчик клика на элементе - пикере picker.onclick = function (ev) { var e = ev || GLOB.event, x = e.clientX, y = e.clientY; palette.style.display = "block"; palette.style.top = (y + pageScroll().y) - oY + "px"; palette.style.left = (x + pageScroll().x) + oX + "px"; }; // Добавляем в DOM element.appendChild(picker); element.insertBefore(hideInput, picker); return this; } }; }(this));Бүгін біз пайдалы сценарийді ұсынамыз Adobe Illustrator. Оны Adobe Illustrator үшін сценарийлер мен плагиндердің дарынды украиндық әзірлеушісі және менің досым - Ярослав Табачковский (Yemz) жасаған, ол Mesh Tormentor тегін плагинінің әзірлеушісі ретінде де белгілі. RandomSwatchesFill сценарийі таңдалған нысандарды Swatches палитрасында таңдалған түстермен кездейсоқ бояйды.
Сценарийді осы шолудың басындағы немесе соңындағы Жүктеу түймесін басу арқылы тегін жүктеп алуға болады.
Сценарийді келесі қалтаға орналастырайық, мысалы:
Windows үшін: C:\Program Files\Adobe\Adobe Illustrator CS5\Presets\en_GB\Scripts
Mac үшін:Қолданбалар / Adobe\Adobe Illustrator CS5\Presets\en_GB\Scripts
Random Swatches Fill сценарийінің жұмысының мысалы үшін көптеген бір түсті нысандардан тұратын векторлық жұмысты алайық.
Сценарий қолданылатын нысандар топтан босатылып, таңдалуы керек екеніне назар аударамын. Таңдауды алып тастамай, Swatches тақтасын ашыңыз. Ctrl/Command пернесін пайдаланып Swatches палитрасынан біз нысандарды бояу үшін қолданатын түстерді таңдаңыз.
Біз RandomSwatchesFill сценарийін қолданамыз, ол үшін Файл > Сценарийлер > RandomSwatchesFill тармағына өтеміз. Нәтижесінде біз кездейсоқ боялған түрлі-түсті заттарды аламыз.
Бұл сценарийді бүкіл векторлық жұмысқа да, бірнеше нысандарға да қолдануға болады. Lasso құралын (Q) пайдаланып, бірнеше нысанды таңдап, Ctrl/Command пернесін пайдаланып, осы нысандарды бояу үшін Swatches палитрасынан түстерді таңдаңыз.
Нәтижесінде векторлық жұмыстың бір бөлігі таңдалған түстермен кездейсоқ боялады.
Swatches панелінде түстермен, градиент бояуларымен немесе үлгілермен тәжірибе жасап, қандай түпнұсқа нәтижелерге қол жеткізуге болатынын көруге болады. Мен өз атымнан Йемзге осы сценарий үшін алғыс айтқым келеді және бұл сіздің күнделікті шығармашылық жұмысыңызға пайдалы болады және күнделікті техникалық мәселелерге аз уақыт бөлесіз деп үміттенемін.
Жеке өзім өтініш бердім берілген сценарий, жаңа қоңырауға тапсырыс беру плагинін жасау кезінде. Бұл палитра пайдаланушыға түйменің түсін және тапсырыс пішінін таңдауға көмектеседі. Ұзақ уақыт бойы мен дұрыс сценарийді таңдадым, мен үшін бұл ең жақсылардың бірі. Оның үстіне, мен айтқанымдай, ол оңай имплантацияланады. Нәтижеде алынған нәрсенің мысалын төмендегі мысалда көруге болады. Градиенті бар өрістерде курсордың көмегімен түсті таңдаңыз.
Мұндай палитраны жасау үшін сізге 4 қадам жасау керек. Белгілеуден ретімен бастайық HTML. Сіз оны палитраның өзін көргіңіз келетін жерге қосуыңыз керек.
Идентификаторы бар негізгі ата-аналық блок - түс таңдаушы. Оның ішінде үш негізгі блок бар еншілес элементтер, ол біздің палитраның құрылымын жасайды. Төмендегі суретке қатысты оларды ретімен алайық.
- идентификаторы бар блоктау таңдаушы-орағышбірінші блок болып табылады. Оның реңкін таңдау үшін бір түстің градиенті бар шаршыны салуға жауапты. Оның ішінде градиенттің өзі бар блок және көрсеткішке жауапты блок бар.
- идентификаторы бар блоктау pcr орауыш- градиент түріндегі барлық түстерді көрсететін блокқа жауапты екінші блок. Ішінде градиенті бар блок және жоғары және төмен жылжитын сырғытпаны көрсететін блок бар.
- Идентификаторы бар UL тізімі түс мәндері– Оның ішінде бірнеше нүкте бар. Алғашқы үш, диаграммада олар нөмірленген - 3. Олар үш форматта түс кодтарын көрсетеді - RGB, HSV, HEX.
- Суреттегі №4 блок алдыңғы тізімнің элементтерінің бірі болып табылады. Бұл соңғы li элементі. Оның ішінде идентификаторы бар блок бар pcr_bg. Бұл блок ағымдағы таңдалған түсті көрсетеді.
Қажеттіліктеріңізге байланысты қажет емес элементтерді ауыстыруға немесе тіпті жоюға болады. Бояғышты орнатуды толығымен аяқтаған кезде, сіз өзіңіз егжей-тегжейлі түсініп, палитраның осы немесе басқа элементін қалай өзгерту керектігін анықтай аласыз.
Бояғышты орнатудың екінші қадамы стильдерді қосу болып табылады. css. Сіз оларды әдеттегідей сайтыңыздың стиль файлына немесе осы түстер палитрасын қосатын элементке қосасыз.
#color-picker( margin:25px auto; width:450px; ) #color-values( display:block; list-style: none; color:#222; float:left; margin:0 0 0 15px; толтыру: 5px; text-align:left; ) #pcr_bg( height:135px; ) .picker-wrapper, .pcr-wrapper (позиция: салыстырмалы; float: сол жақта; ) .picker-индикатор, .pcr-индикатор (позиция: абсолютті; сол жақта: 0; жоғарғы: 0; ) .picker, .pcr (курсор: қиғаш; қалқымалы: солға; ) .cp-әдепкі .picker ( ені: 200px; биіктік: 200px; ) .cp-әдепкі .pcr ( ені: 30px; биіктік : 200px; ) .cp-default .pcr-wrapper (сол жақтағы жиек: 10px; ) .cp-әдепкі .picker-индикатор (ені: 5px; биіктік: 5px; жиек: 2px тұтас қою көк; -moz-шектік-радиусы: 4px; -o-border-радиусы: 4px; -webkit-шекаралық радиусы: 4px; шекара радиусы: 4px; мөлдірлік: .5; -ms-сүзгі: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)" ;сүзгі: progid:DXImageTransform.Microsoft.Alpha(Мөлдірлік=50);сүзгі: альфа(мөлдірлік=50); фон-түсі: ақ; ) .cp-әдепкі .pcr-индикатор (ені: 100%; биіктік: 10px; сол t: -4px мөлдірлік: .6; -ms-сүзгісі: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; сүзгі: progid:DXImageTransform.Microsoft.Alpha(Мөлдірлік=60); сүзгі: альфа(мөлдірлік=60); жиек: 4px тұрақты ашық көк; -moz-шекаралық радиус: 4px; -o-шекаралық радиусы: 4px; -webkit-border-радиусы: 4px; шекара радиусы: 4px фон түсі: ақ )
Мен CSS туралы жазбаймын. Мен айтқанымдай, жаңадан бастаған адамның палитраны орнатуы екіталай, бірақ тәжірибелі адам CSS-пен таныс. Қандай параметр не үшін жауапты екенін түсінесіз деп ойлаймын. Келесі қадамға көшейік.
Орындау керек үшінші тармақ - түстер палитрасы сценарийінің өзін қамтитын файлды қосу. Файлдың өзі осы мақаланың дереккөздері бар мұрағатта болады. Сіз оны төмендегі сілтемеден жүктей аласыз.
Файл шақырылады colorpicker.min.js. Егер сіз палитраны сайтта көрсететін болсаңыз, оны сайттың үстіңгі немесе төменгі деректемесіне қосыңыз. Егер қандай да бір модульде, плагинде және т.б. болса, онда қалған сценарийлерді қай жерде қосасыз. Әрине, файлға дұрыс жолды көрсетіңіз.
Соңғы қадам - бояғыш мәндерінің шығысын басқаратын сценарийді қосу және өз жұмысын осылай бастау. Сценарий HTML көмегімен палитра блогынан кейін бірден жақсы қосылған.
Сценарийде конфигурациялауға болатын бірнеше нәрсе бар. Оларды бөлшектеп көрейік. Өзгертуге болатын нәрсе 9-шы жолдан басталады.
- 9-жол - идентификаторы бар блок - алтылық, түс мәні он алтылық форматта тағайындалады. Яғни, жоғарыдағы суретте №3 болатын тізімде бірінші жол. Осылайша, оны көрсету үшін кез келген блокқа түс кодын тағайындай аласыз.
- 10-жол - идентификаторы бар блок - rgb, rgb пішімінде мән тағайындайды. Барлығы алдыңғы абзацқа ұқсас.
- 11-жол - идентификаторы бар блок - hsv, hsv пішімінде мән тағайындайды.
- 13-жол - идентификаторы бар блок - pcr_bg, стиль он алтылық форматқа сәйкес фон түрінде тағайындалады. Яғни, ағымдағы түсті көрсететін шаршы. Осыған ұқсас жолмен сіз палитрадан түсті көрсете аласыз, мысалы, белгілі бір блоктың сайтының фоны үшін және т.б.
- 15-ші, соңғы жол әдепкі түсті орнатады. Сіз он алтылық форматта өзіңізді көрсете аласыз.
Бұл негізінен бүкіл байланыс түс палитрасы. Бастапқыда айтқанымдай, бұл мақала жаңадан бастаушыға көмектеспеуі мүмкін, ол тәжірибелі веб-шеберлерге арналған. Ол сізге көмектеседі деп үміттенемін.
Барлығы осы, назарларыңызға рахмет. 🙂
объект. Түйме атауы btn.cvet). Үшін негізгі жақтаусценарийін жасайық:var cvet: ColorTransform = rol.transform.colorTransform; btn.cvet.addEventListener(MouseEvent.CLICK, f); f(оқиға:MouseEvent):void ( cvet.color = 0x0000ff; rol.transform.colorTransform = cvet ) функциясы
Сценарийдегі өзгерістер қызыл түспен белгіленген келесі фрагменттерде жасалуы мүмкін: фильмнің аты (rol), түйме (btn.cvet), айнымалы (cvet), функция (f) және түс мәні (0000ff).
Жоғарыдағы сценарийді талдап көрейік:
- Рөлдің (сонымен бірге барлық белгілердің) нысанға қолданылатын әртүрлі түрлендірулер (мысалы, геометриялық түрлендірулер, түс параметрлері) туралы ақпаратты қамтитын түрлендіру қасиеті бар. Нысанның түсін орнатуға қатысты түрлендірулерді қолдану үшін colorTransform сипатын пайдаланыңыз.
- Жасалған жаңа cvet айнымалысы түс параметрлеріне қатысты фильм сипаттары ролінің мәніне орнатылады.
- Түс қасиетінің түс мәнін жаңасына өзгертеміз:
0000ff - қызыл, жасыл және RGB он алтылық көрінісі көк түстерон алтылық кодта екі таңбалы сандар ретінде беріледі (он алтылық кодта 0-9 араб цифрлары, ал 10, 11, 12, 13 сандарының аналогтары ретінде әрекет ететін a, b, c, d, e, f латын әріптері қолданылады) , 14 және 15). Нысанның соңғы түсі үш түсті көрсетілген пропорцияда араластыру арқылы алынады.
- Rol нысанының colorTransform сипатын жаңартыңыз (түс түзетуін орындаңыз).
№1 практикалық жұмыс
Сахнада фильмді (бояуға арналған нысан – рөл деп аталады) және түс палитрасындағы 2 түсті бейнелейтін 2 түймені (btn.cvet1 және btn.cvet2) жасайық. Әрбір түймені басу бейнені түймеге тағайындалған түске бояйды. Сыртқы түрітүймелер олардың мақсаты туралы айтуы керек (мысалы, түймелердің түсі боялған нысанның түсіне сәйкес келеді).
Сценарийде объект түсін оқу үшін айнымалыны жасау керек және басылған түймеге байланысты ол үшін екі түстің бірін орнату керек:
var cvet:ColorTransform = rol.transform.colorTransform; btn.cvet1.addEventListener(MouseEvent.CLICK, f1); f1 функциясы(оқиға:MouseEvent):void ( cvet.color = 0x0000ff; rol.transform.colorTransform = cvet; ) btn.cvet2.addEventListener(MouseEvent.CLICK, f2); f2 функциясы(оқиға:MouseEvent):void ( cvet.color = 0x00ff00; rol.transform.colorTransform = cvet; )
Тәжірибелік жұмыс №2
Сахнада 2 түймені (бояуға арналған объектілер – rol1, rol2 атауларымен) және 2 түймені (түстер палитрасында 2 түсті таңбалау – btn.cvet1 және btn.cvet2 атауларымен) жасайық. Түс палитрасы батырмасын басу – түсті таңдау; бояуға арналған түймелерді-нысандарды басу оларды қадамда бұрын таңдалған түске бояуға әкеледі. Түс палитрасының түймелерінің пайда болуы олардың мақсатын көрсетуі керек.
Объектіні бояудың 2 қадамы бар:
- түсті таңдау;
- таңдалған түске боялатын нысанды таңдаңыз.
var cvet:ColorTransform = rol1.transform.colorTransform; btn.cvet1.addEventListener(MouseEvent.CLICK, f1); f1 функциясы(оқиға:MouseEvent):void ( cvet.color = 0x0000ff; ) btn.cvet2.addEventListener(MouseEvent.CLICK, f2); функция f2(оқиға:MouseEvent):void ( cvet.color = 0x00ff00; ) rol1.addEventListener(MouseEvent.CLICK, f3); функция f3(оқиға:MouseEvent):void ( rol1.transform.colorTransform = cvet; ) rol2.addEventListener(MouseEvent.CLICK, f4); f4 функциясы(оқиға:MouseEvent):void ( rol2.transform.colorTransform = cvet; )
Әртүрлі заттардың бояуын талдамай, объектілерді бояу, әдетте, мағынасы жоқ. Берілген объект үшін таңдау құралы ретінде объектінің бояуын қолданатын қосымшаны құру кезінде жұмыс барысында объектілер қабылдаған түстерді талдау қажет. Бар бағдарламалық қамтамасыз ету объектінің түсін талдау.
Түс талдауы фигураны бояу үшін таңдалған түсті «есте сақтау» арқылы орындалатын тапсырманың мысалын қарастырамыз (және бұрын боялған фигураның түсін «талдау» арқылы емес).
Бұл жиынтықтан қажет делік геометриялық фигураларшаршыларды, үшбұрыштарды және ромбтарды келесідей белгілеңіз: түсті шаршыларды бір түспен, үшбұрышты басқасымен және т.б.
Күріш. 22.1.Түсті талдау қолданбасының интерфейсі
Сценарий жариялайды түрдегі айнымалыларсаны:
- c (таңдалған түс туралы ақпаратты сақтау үшін),
- fla.1, fla.2, fla.3 (әр шеңбер алған түс туралы ақпаратты сақтау үшін).
Сахнада «Тексеру» түймесі (оның аты pr) және динамикалық мәтін өрісі (ttt) орналастырылады, онда шеңберлердің бояуының дұрыс/дұрыс еместігі туралы ақпарат көрсетіледі.
Барлық фигуралар дұрыс боялған жағдайда (тармақталу пәрменіндегі логикалық өрнек барлық үш қарапайым болған кезде ақиқат болады. логикалық өрнектер– бірінші және (&&) екінші және (&&) үшінші) ttt динамикалық мәтін өрісінің мәтіндік қасиеті «verno» мәніне орнатылады, әйтпесе «ne verno» мәніне орнатылады:
... pr.addEventListener(MouseEvent.CLICK, f7); f7 функциясы(оқиға:MouseEvent):void ( if ((fla.1==1) && (fla.2==2) && (fla.3==3)) ( ttt.text = "verno"; ) else ( ttt.text = "ne verno"; ) )
Дәрістің қысқаша мазмұны:
Таңбада нысанға қолданылатын әртүрлі түрлендірулер (мысалы, геометриялық түрлендірулер, түс параметрлері) туралы ақпаратты қамтитын түрлендіру қасиеті бар. Нысанның түсін орнатуға қатысты түрлендірулерді қолдану үшін colorTransform сипатын пайдаланыңыз.
Менің ойымша, бұл блок өте пайдалы болады, әсіресе оны сіздің сайтыңызға енгізу қажет болған жағдайда. Бұл Түс таңдау блогы жұмыс істейді Javascript. Сонымен, оны сайтқа қалай қосуға болатынын және осы JQuery плагинінің нені қызықтыратынын қарастырайық.
Кодпен жұмыс
Ең алдымен, бізге Javascript және қосу керек css файлыс. CSS файлын өңдеуді және сайттың тақырыбына сәйкес келетін кескін жолдарын (қажет болса) түзетуді ұмытпаңыз.
XHTML
Плагин параметрлері
Арнаулы плагин параметрлері (міндетті емес).
- eventName – түс таңдау құралына қоңырау шалу үшін қажетті оқиға, әдепкі: «нұқыңыз».
- түс әдепкі түс болып табылады. үшін жол алтылық түстернемесе RGB және HSB үшін хэш ((r:255, r:0, b:0)), әдепкі: “FF0000″.
- flat - түс таңдау құралын бірден немесе тек нұқу арқылы көрсетеді, әдепкі мән false .
- livePreview - әдепкі бойынша шын.
- onShow - Түс таңдау құралы көрсетілгенде кері шақыру функциясы іске қосылады.
- onBeforeShow - Түс таңдау құралы көрсетілмей тұрып кері шақыру функциясы іске қосылады.
- onHide - Түс таңдау құралы жасырылған кезде кері шақыру функциясы іске қосылады.
- onChange - Түс өзгерген кезде кері шақыру функциясы іске қосылады.
- onSubmit - Түс таңдалған кезде кері шақыру орындалады.
Сізге бұл плагин ұнайды деп үміттенеміз. Сізге сәттілік пен сайтыңыздың дамуын тілеймін!
Бұл сабақты сізге сайт ұжымы дайындады
Сабақтың көзі: http://www.eyecon.ro/colorpicker/
Аударған: Владислав Бондаренко
