UcallWeconn

CurvyCorners па-беларуску



Original on http://www.curvycorners.net/instructions/

This translation became possible due to efforts of world's most complete How To Call guide authors, who work for UcallWeconn a VoIP provider in Denmark

Прыгожыя з закругленымі  вугламі для скрынкі HTML

Навігацыя

Атрыманне зыходнага кода

Каб праверыць апошнюю стабільную версію:
SVN co http://curvycorners.googlecode.com/svn/tags/2.0.x/stable [MYDIR]
Каб праверыць апошнія (пярэднім краем) змены:
SVN co http://curvycorners.googlecode.com/svn/trunk [MYDIR]
Для прагляду версіі:
http://code.google.com/p/curvycorners/source/browse/#svn/tags
Для прагляду апошняй рэвізіі:
http://code.google.com/p/curvycorners/source/browse/#svn/trunk
Вы таксама можаце запампаваць апошнюю версію CurvyCorners з распранула загрузкі.
Некаторыя больш раннія версіі таксама даступныя кодэкса загрузкі старонкі Google.

Выкарыстанне CurvyCorners новым спосабам - з дапамогай CSS

Пачынальна з 2.0.x, CurvyCorners дазваляе змясцаваць закругленымі  вугламі на старонцы элементы, выкарыстоўваючы для гэтага CSS. У наш час Ёсць дзве ўласныя сінтаксічныя CSS, па адной для Mozilla/Firefox і адзін для браўзараў Webkit, Safari і Google Chrome.
Усё, што вам трэба зрабіць, гэта паставіць адпаведныя круглявыя стылі ў вугал згодна  адпаведных правіл і CurvyCorners аўтаматычна намалюе вуглы для пацярпелых скрынак, у той час пакінуўшы яго ў новых браўзарах для   прыцягнення каторых неабходна выкарыстаць свае ўласныя метады.

Прыклад

Выкажам здагадку, што ў вас ёсць DIV на старонцы з класам акруглены. Вы жадаеце, каб усе чатыры  вуглы сталі круглымі з радыусам у паўтара EMS. Наступнае CSS будзе выконваць:

.rounded {
  -moz-border-radius:3ex;
  -webkit-border-radius:3ex;
 }

Калі вы жадаеце (напрыклад) толькі ў верхнім левым і ніжнім вуглах зрабіць акруглыя вуглы, то вы можаце зрабіць гэта наступным чынам:

.rounded {
  -moz-border-radius-topleft:3ex;
  -moz-border-radius-bottomright:3ex;
  -webkit-border-top-left-radius:3ex;
  -webkit-border-bottom-right-radius:3ex;
 }

(Заўважым, што сінтаксіс CSS3 вельмі падобны на сінтаксіс версіі Webkit, але, вядома, без "-WebKit-" прэфікса. Унутрана, CurvyCorners шукае сінтаксіс Webkit і ігнаруе версіі Mozilla.)

Абмежаванні CSS селектар

З-за неабходнасці механізм працаваць ва ўсіх браўзарах, CSS селектар сінтаксіс падтрымліваецца непазбежна абмежавана. Гэта ўсталёўвае, што пры падтрымцы:

  • Селектар-ліст, дзе селектар-ліст або аднаго селектара ці аднаго селектара вынікаюць коскі і дадатковы прабел, а затым селектар-ліст.
  • Аднаго селектара могуць быць як простымі-селектар ці просты селектар варта прабел, затым яшчэ адзін просты-селектар.
  • Просты-селектар можа быць або ідэнтыфікатар формы #myID, ці тэг-клас-селектар.
  • Тэг-клас-селектар можа быць адным з:
    1. імя тэга (напрыклад, div );
    2. імя класа папярэднічае кропка (напрыклад, .myClass); ці
    3. Імя тэга варта кропка варта імя класа (напрыклад, div.myClass).

Ніжэй прыведзены прыклады падтрымоўваных селектары:

  • .myclass
  • #mydiv frameset.myclass
  • form.rounded frameset,div.rounded

Папярэджанне: паколькі CurvyCorners дадае дадатковыя DIVs у скрынках вы жадаеце раўнд, наступны селектар будзе надзейна не працуе:

#myBox div

Гэта таму, што стыль будзе ўжывацца не толькі для верхняга ўзроўня DIVs усярэдзіне элемента з ідэнтыфікатарам myBox, але і дзівы дададзена CurvyCorners.

Наступныя селектары не можа працаваць, як чакалася:

  • div #mybox
  • div.rounded #mybox

Паколькі ID ідэнтыфікуе элемент старонкі адназначна, кваліфікацыйныя яго з вонкавай вобласці бачнасці можа прывесці да збою селектар (напрыклад, калі #mybox з'яўляецца верхняга ўзроўня DIV, ці калі ён не знаходзіцца ў DIV класа rounded). Аднак, CurvyCorners Мяркуецца, што элемент будзе спасылка ў любым выпадку і будзе ўжываць адпаведныя стылі акруглення.

Dynamic HTML

CurvyCorners зараз мае абмежаваную падтрымку дынамічных HTML. У прыватнасці, вы можаце змяніць змесціва скрынкі і скрынкі змяняць памер (паўторна звяртаецца), каб адпавядаць. Аднак, з-за тэхнікі CurvyCorners выкарыстоўвае, каб прыцягнуць куты, гэта не можа адбыцца аўтаматычна. Замест гэтага, вы павінны зрабіць наступнае:

  1. Пакажыце куты выкарыстаннем новых CSS стыль, а не старыя функцыі стылі пад нагрузкай;
  2. Дайце акне элементы паўторна звяртаецца (дадатковых) адмысловы клас імёнаў curvyRedraw ; і
  3. у JavaScript, відавочна выклікаць функцыю curvyCorners.redraw().

curvyCorners.redraw() не прымае параметраў і не вяртае выкарыстоўваць значэнне.

Калі вам неабходна змяніць некаторыя атрыбуты ці стыль redrawable элементаў, гэта не павінна быць зроблена непасрэдна праз DOM. Замест гэтага, вызначыўшы аб'ект DOM (напрыклад, з document.getElementById() ), выклік

curvyCorners.adjust(DOMObj, propertyName, newValue);

дзе:

DOMObj
з'яўляецца элементам аб'екта з ClassName curvyRedraw, што павінна быць зменена;
PropertyName
гэта імя ўласнасці без вядучай кропкі, калі гэта ўласцівасць стылю, яна павінна быць выяўлена як 'style.property'.
NewValue
гэта новае значэнне, напрыклад, 'none'.

curvyCorners.adjust() павінны прыняць усе тры параметру, апісаныя вышэй. Яна вяртае ніякага карыснага кошту.

Вялікі прыклад гэтага метаду ўтрымоўваецца ў дэма-5.

Апрацоўка памеру акна падзеі

curvyCorners падтрымлівае перамалёўкі выгнутыя скрынкі ў адказ на змену памеру акна браўзара. Калі вы жадаеце скарыстацца гэтым, вы можаце дадаць апрацоўнік падзей, каб выклікаць перамалёўваць. Тым не менш, некаторыя змены DOM будзе страляць ілжывых памеру акна падзеі ў некаторых браўзарах. Яны могуць адбыцца ў самы разгар змены DOM (у тым ліку тыя, якія curvyCorners само па сабе робіць той час перамалёўкі). Таму, не паведамляны ваш апрацоўнік выкліку curvyCorners.redraw() непасрэдна. Замест гэтага, усталяваць памер функцыі апрацоўніка выклікаў curvyCorners.handleWinResize().

Далей, калі вы выявіце, што некаторыя з вашых код запуску памеру акна падзеі прыкметных затрымак!), Аб'ёмны код (што прывядзе да:

curvyCorners.setWinResize (ілжывыя);// блок перамаляваць на памер//... ваш DOM-код маніпуляцыі тут curvyCorners.setWinResize (TRUE);// паўторнага ўключэння перамалёўвае на змене памеру акна

Прыкладам гэтага метаду ўтрымоўваецца ў дэма-5.

Адтэрміноўка CurvyCorners запуску кода

Калі плануецца дадаць некалькі элементаў старонкі пасля яе загрузкі і, калі гэтыя элементы павінны мець закругленыя куты, гэта можа быць выгодна затрымкі правядзенне запуску кода. Гэта можна зрабіць наступным чынам:

  1. Перад тэг, які ўключае curvycorners.js, дадаць наступнае ў частку <head> старонцы:

    <script type="text/javascript">
    var curvyCornersNoAutoScan = True;
    </ SCRIPT>

  2. Пасля скрыпт для дадання элементаў пабег, высылацца запуску кода з наступнай заявай:

    curvyCorners.init ();

Калі вы пакажаце ў CSS ID элемента са скругленымі кутамі, які яшчэ не дададзены на старонку, CurvyCorners будзе папярэджваць пра праблему з дапамогай Alert (). Для прыгнечання гэтага паведамлення, уключаюць наступны сцэнар на старонцы, перш чым уключаць CurvyCorners скрыпт:

<script type="text/javascript">
var curvyCornersVerbose = False;
</ SCRIPT>

Утоеныя Скрынкі

CurvyCorners падтрымлівае афармленне скрынкі, якія ў наш час не адлюстроўваюцца, г.зн. якія Стыль display:none. У такіх выпадках, гэта можа быць неабходна для CurvyCorners часова для адлюстравання акна, і гэта можа прывесці кароткую мігаценне, як старонка загружана.

Іншыя абмежаванні

  • Калі вы жадаеце выклікаць curvyCorners у браўзар, які падтрымлівае закругленымі кутамі ў натуральным выглядзе, напрыклад, Firefox, Chrome ці Safari, вы павінны выкарыстоўваць ручны метад, апісаны ніжэй.
  • Калі вы жадаеце выкарыстоўваць дынамічныя асаблівасці (напрыклад, змена памеру) на скрынцы асяроддзі curvyCorners, вы павінны выкарыстоўваць CSS стыль указанні куты, не стары стыль кіраўніцтва.
  • У некаторых выпадках браўзар не можа вылічыць дысплей шырыню акна, якія вы жадаеце стыль з закругленымі кутамі. Гэта можа быць або таму, што акно не адлюстроўваецца, ці з-за асаблівасцяў у браўзары. У такім разе, CurvyCorners будзе выводзіць паведамленне пра памылку і працягнуць, але ён не будзе ў стане ўжыць куты, каб акно ў пытанні элемент. Гэта можа быць магчымым, каб выправіць гэта, ужыўшы шырыні ці мін-шырыня стыль акна пацярпелых. Вы можаце адключыць адлюстраванне паведамлення пра памылку, уключыўшы ў наступнай частцы <head> старонкі перад тэг, які ўключае CurvyCorners скрыпт:

    <script type="text/javascript">
    var curvyCornersVerbose = False;
    </ SCRIPT>

  • У v9.x оперы, непрызнаных стыляў (у тым ліку круглявай стыляў куту) не ўключаны ў дрэва DOM. CurvyCorners можа выявіць іх толькі тады, калі ён мае доступ да CSS тэксту. Калі стыляў уваходзіць выкарыстаннем <link href="mystyle.css" rel="stylesheet"/> элемент, ці з дапамогай @import правіла, Opera не будзе мець магчымасць доступу да яго. Ён мае доступ толькі тады, калі стыль уваходзіць у старонкі HTML сябе. Мы спадзяемся, што для рашэння гэтага абмежавання хуткім часам.
  • Скрынкі стылі па CurvyCorners не можа быць зменены дынамічна выключэннем дапамогай методыкі, апісанай вышэй.
  • Калі акно ў моду CurvyCorners мае меж, то для дасягнення найлепшых вынікаў, шырыня мяжы павінна быць аднолькавым абапал, якія прылягаюць да круглай кутняй.
  • Калі акругленні мяжуе вокны, стыль мяжы заўсёды павінна быць solid : іншыя стылі не падтрымліваюцца.
  • Эліптычны радыусаў (напрыклад, border-radius:1em 2em; ) не падтрымліваюцца. Першы аспект будзе разглядацца як адзінае вымярэнне.
  • Калі скрынка мае фонавы малюнак, а два верхніх ці ніжніх радыусаў розных ненулявыя значэнні, акно не будзе правільна адлюстроўвацца. Ваш верхні і ніжні радыусы куту павінны быць або роўныя, або адна з іх павінна быць роўная нулю (квадрат).
  • <img> элементы не могуць быць акруглены выкарыстаннем curvyCorners. Замест гэтага, выкарыстоўвайце элемент <div> і ўсталяваць малюнак у якасці фону-выява <div>.
  • У старых браўзарах, пры выкарыстанні малюнкаў працоўнага стала, у ніжняй частцы акна можа быць да 1 піксель. Мы вывучаем гэта пытанне, які здаецца непрадказальным і можа быць артэфактам некаторых старажытных рухавікоў рэндэрынгу.

Выкарыстанне CurvyCorners уручную

Наступныя інструкцыі круглыя куты элемента DIV з радыусам 20 пікселяў.

Як толькі вы загрузілі файл, скапіюйце яго на ваш сайт. Затым скапіюйце прыведзены ніжэй код і ўстаўце яго ў галаўной частцы вэб-старонкі. Калі вы захавалі файл дзе-небудзь іншы, чым корань сайта, змяніць SRC месцы ніжэй.

<script type="text/javascript" src="curvycorners.js"> </ SCRIPT>

Затым стварыце элемент DIV. Калі ў вас ужо ёсць DIV куты якой патрабуецца акругліць, тое ўсё што вам трэба зрабіць, гэта даць DIV ID.

<DIV Id="myDiv"> </ DIV>

CurvyCorners аўтаматычна падабраць стыль інфармацыю з элемента DIV. Так напрыклад, калі вы даяце DIV 2px чорную акантоўку ў табліцы стыляў, то межы будуць аўтаматычна дададзены ў закругленымі кутамі.

Далей нам трэба дадаць JavaScript для загрузкі пры загрузцы вэб-старонкі. У частцы HEAD вэб-старонкі дадаць наступнае:

 <script type="text/JavaScript"> 
  window.onload = function() {

   var settings = {
    tl: { radius: 20 },
    tr: { radius: 20 },
    bl: { radius: 20 },
    br: { radius: 20 },
    antiAlias: true

   } 
   var divObj = document.getElementById("myDiv"); 
 
   curvyCorners(settings, divObj);
  }
 </script> 

Вось-вось, запуску сцэнара, каб даць яму паспрабаваць.

Разбіць яго

У мяне няма часу, каб напісаць поўную API так што гэта частка будзе спрабаваць увайсці ў настолькі падрабязна, наколькі гэта магчыма.

Налады

Першая частка папярэднім прыкладзе ствараецца зменная з імем налады, вы можаце змяніць гэта ў любое імя зменнай вы жадаеце. Вам трэба будзе выкарыстоўваць гэту зменную пазней у сцэнар. Гэта зменная захоўвае ўсе налады, неабходныя для curvyCorners аб'екта да працы.

Кожны радок налады аб'екта пэўных умовах: напрыклад, першы радок tl: { radius: 20 }, кажа сцэнар, які вы жадаеце верхнім правым куце акна, каб 20 кутні радыус пікселя.

Наступныя тры радкі мноства радыусаў для астатніх трох кутоў. Так напрыклад, калі вы жадалі радыусаў закруглення кутоў у 20, 40, 60 і 80 з левага верхняга кута ў правы ніжні, то вашы параметры аб'екта будзе выглядаць прыкладна як у прыкладзе ніжэй.

 var settings = {
 tl: { radius: 20 },
 tr: { radius: 40 },
 bl: { radius: 60 },
 br: { radius: 80 },
 antiAlias: true
 } 

(Заўважым, што калі вы выкарыстоўваеце межы ці фонавы малюнак, вы павінны мець на ўвазе абмежаванні, апісаным вышэй.)

А прамыя куты? Скажыце, што Вы не жадаеце ў правым верхнім куце і ніжнім левым кутах, каб быць акруглены на ўсіх і застацца пляц: у гэтым выпадку, або паказаць нулявога радыусу, ці апусціць куту спецыфікацыі цалкам ніжэй. Гл. прыклад.

   var settings = {
 tl: { radius: 20 },
 tr: { radius: 0 },
 // bl: { radius: 0 },
 br: { radius: 80 },
 antiAlias: true
 } 

Anti-Aliasing?

Змена значэння AntiAlias ад true да false, можна ўключыць згладжванне. Адключэнне згладжвання зменшыць гладкасць кутоў, але дазволіць значна скараціць час рэндэрынгу неабходна звярнуць кутам.

Указанне якія скрынкі для круглых

Два розных спосабу ўказання, якія DIVs (ці іншай скрынкі HTML) Вы жадаеце, каб сцэнар раўнд. Першы спосаб прайсці адзін ці некалькі аб'ектаў пры стварэнні новага асобніка curvyCorners аб'екта.

Выкарыстанне DOM аб'екты
 var divObj document.getElementById = ("myDiv"); 
 curvyCorners (налады, divObj); 

Давайце разгледзім код, паказаны вышэй уніз. Першы радок выкарыстоўвае DOM 'S document.getElementById() метад, які вяртае спасылку на аб'ект myDiv завецца divObj. Змена myDiv на ідэнтыфікатар элемента DIV, што вы жадаеце, каб вакол.

Наступны радок выклікае curvyCorners функцыі. Першы параметр з'яўляецца налады аб'ект, які мы стварылі раней. Другі параметр павінен быць аб'ектам спасылкі на DIV вы жадаеце раўнд. Мы атрымаць гэта на першай лініі вышэй прыклады кода.

Нататка: Вы можаце перадаць больш аднаго аб'екта пры выкліку функцыі curvyCorners. Для забеспячэння дадатковых аб'ектаў выканаеце інфармацыя API ніжэй. Кожны дадатковы аб'ект, перададзены будзе мець тыя ж налады кута ўжывацца, пры пастаўцы ў першым параметры. Калі вам запатрабуецца дадатковая DIVs круглявыя з рознымі наладамі, то вам трэба патэлефанаваць curvyCorners функцыю адзін раз для кожнага рознага прызначэння, пасля чаго аб'екты, да якіх вы жадаеце ўжыць гэтыя налады.

curvyCorners(settingsObj, DOMObj1[, DOMObj2[, DOMObj3[, . . . [, DOMObjN]]]]);
Выкарыстанне CSS-селектараў

Іншы спосаб паказаць, якія скрынкі неабходна ўжыць закругленыя куты, каб, з'яўляецца забеспячэнне CSS селектар радок у якасці другога параметру Insted аб'екта DOM, як апісана вышэй. Любы блок элементаў, якія гэтага класа ўжываюцца будуць мець куты, скругленыя. Гл. прыклад ніжэй.

 curvyCorners(settings, ".myClassName"); 
 
 ... 

 <div id="myDiv" class="myClassName">
 </div> 

(Заўважым, што ў адрозненне ад больш ранніх версій CurvyCorners, пачынальна з версіі 2.0.x вы павінны паставіць кропку перад імем класа.)

Замест простага імя класа, вы можаце выкарыстоўваць імя тэга кваліфікаваны імя класа, напрыклад div.myClassName - гэта паўплывае на DIV элементаў, але не іншыя элементы з myClassName як свайго класа.

Вы таксама можаце выкарыстоўваць ID прэфікс хэш, напрыклад: #myDiv

Нарэшце, вы можаце абмежаваць дыяпазон элементаў шляхам падзелу двух простых селектараў з прасторай, напрыклад, #myDiv div.rounded. Гэта будзе ўжываць скругленыя куты толькі для тых, DIVs з імем класа круглявыя, якія ўтрымоўваюцца усярэдзіне DIV з myDiv ID.

Для больш падрабязнай інфармацыі о CSS селектараў, гл. CSS селектар Абмежаванні вышэй.

Абнаўленне з версіі 1.x

Калі ў вас ёсць старонкі, якія працуюць з v1.x CurvyCorners, і жадалі б мадэрнізаваць іх да працы з v2.0.x, у вас ёсць два шляхі: захаваць відавочны стыль, ці перайсці на CSS стыль.

Абнаўленне з дапамогай відавочных стыль

Змены такія:

  1. Калі імёны класаў перадаюцца curvyCorners () функцыю, яны павінны пачынацца з кропкі.
  2. AutoPad чалец налады аб'ект больш не падтрымліваецца (гэта заўсёды true у 2.x).
  3. Куткі, якія павінны быць аказана квадрат павінен быць паказаны або з нулявым радыусам, ці апусціць цалкам. Яны не павінны быць паказаны як false.
  4. applyCornersToAll() функцыя ў наш час састарэлая і будзе выдалена ў будучых версіях. Гэта не з'яўляецца неабходным для стварэння curvyCorners аб'екта: проста патэлефануеце curvyCorners функцыі, як раней.

У наступным прыкладзе паказана змена вы павінны зрабіць. Рэчы, якія вы павінны выдаліць, Паказана, як гэта ; Рэчы, якія вы павінны ўстаўкі Паказана, як гэта .

 <script type="text/javascript"> 
   window.onload = function() {
   var settings = {
    tl: { radius: 20 },
    tr: { radius: 20 },
    bl: false,
    br: { radius: 20 },
    antiAlias: true,
    autoPad: false
   } 
  var = cornersObj новых  curvyCorners ( settings, ".  myClassName"); 
  cornersObj.applyCornersToAll (); 
 } 
 </ SCRIPT> 

Абнаўленне з дапамогай няяўнай стыль

Для выкарыстання новага CSS стылю, першае месца адпаведныя CSS дырэктывы ў <style> элемент <head> часці старонкі. Для рэплікацыі напрыклад адразу вышэй, зрабіць гэта:

 .myClassName {
 -webkit-border-radius:20px;
 -moz-border-radius:20px;
 } 

Тады, цалкам выдаліць window.onload функцыі (ці той яе часткі, злучаныя з CurvyCorners).

CurvyCorners опцыі і налады

Калі CurvyCorners выяўляе памылку, якая прадухіляе далейшага выканання, яна кідае аб'ект тыпу памылкі.

Калі CurvyCorners выяўляе памылку, што не замінае далейшай выкананні, ён выдае папярэджанне. Для прыгнечання папярэджанняў у вытворчасці старонак, уключаюць наступны сцэнар у частцы <head> старонкі да тэга, які ўключае CurvyCorners скрыпт:

<script type="text/javascript">var curvyCornersVerbose = False; </ SCRIPT>

Каб затрымаць ці прадухіліць выкананне CurvyCorners запуску кода, мноства curvyCornersNoAutoScan true такім жа выявай: гл. тлумачэнне вышэй.

Дадатковая інфармацыя

Калі вам патрэбна дадатковая інфармацыя, то проста праверка скрыпту крыніцы, гэта добра прокомментирован.

Калі вы выявілі памылку ў CurvyCorners, калі ласка, выкарыстоўвайце пытанне сістэмы сачэння на Google Code. Калі ласка, праверце спачатку, што памылка яшчэ не выпраўлена ў апошняй версіі. Пры падаванні ўзору старонак для нас, каб даследаваць, калі ласка, выкарыстоўвайце несціснутыя версіі сцэнара, curvycorners.src.js. (Гэта не магчыма для адладкі з дапамогай скрыпту ў сціснутым выглядзе.)

Калі ў Вас паўсталі пытанні, каментары ці ідэі, то калі ласка, выкарыстоўвайце форуме, націснуўшы на ўкладцы форум вышэй.

Поспехаў!



Valid CSS Valid XHTML 1.0 Transitional

---