css3 and jquery

39
CSS3 vs. jQuery CSS3 vs. jQuery Prak Sophy (@psophy) Prak Sophy (@psophy)

Upload: psophy

Post on 06-May-2015

4.140 views

Category:

Technology


0 download

TRANSCRIPT

Page 1: CSS3 and jQuery

CSS3 vs. jQueryCSS3 vs. jQueryPrak Sophy (@psophy)Prak Sophy (@psophy)

Page 2: CSS3 and jQuery

www.web-essentials.asiawww.web-essentials.asia

Page 3: CSS3 and jQuery

www.typo3cambodia.orgwww.typo3cambodia.org

Page 4: CSS3 and jQuery

CSS3?CSS3?CSS3 contains just about everything that’s included in CSS3 contains just about everything that’s included in CSS2.1CSS2.12000-04-14 2000-04-14 First Public DraftFirst Public Draft 2001-01-19  2001-01-19 Working DraftWorking DraftCurrent Working DraftCurrent Working Draft

Page 5: CSS3 and jQuery

jQuery?jQuery?An open source JavaScript library An open source JavaScript library Created by John Resig in 2005 Created by John Resig in 2005 Release in January 14th, 2006 at BarCampNYCRelease in January 14th, 2006 at BarCampNYCCurrent Version Current Version jQuery v1.6.4jQuery v1.6.4

Page 6: CSS3 and jQuery

SelectorsSelectorsCSS3:CSS3:

::first-childfirst-child::last-childlast-child::nth-child(n)nth-child(n)::nth-of-typenth-of-type::first-of-typefirst-of-type::last-of-typelast-of-type::only-childonly-child::only-of-typeonly-of-type::rootroot::emptyempty

::emptyempty::targettarget::enableenable::displaydisplay::not(S)not(S)::::first-linefirst-line::::first-letterfirst-letter......

Page 7: CSS3 and jQuery

Selectors...Selectors...jQuery:jQuery:

::button, button, ::eveneven::emptyempty::first-childfirst-child::gt gt ::has has ::last-child last-child ::parentparent......

Page 8: CSS3 and jQuery

HTMLHTML <<ul class="menu">ul class="menu">      <li><a href="/a/1">Menu</a>      <li><a href="/a/1">Menu</a>          <ul>          <ul>              <li><a href="/a/a">Sub-menu A</a></li>              <li><a href="/a/a">Sub-menu A</a></li>              <li><a href="/a/b">Sub-menu B</a></li>              <li><a href="/a/b">Sub-menu B</a></li>              <li><a href="/a/c">Sub-menu C</a></li>              <li><a href="/a/c">Sub-menu C</a></li>          </ul>          </ul>      </li>      </li>  </ul>  </ul>

Page 9: CSS3 and jQuery

CSS3CSS3      .      .menu > li > ul {menu > li > ul {         display: none;         display: none;      }      }      .menu > li:hover > ul {      .menu > li:hover > ul {          display: block;          display: block;       }       }

Page 10: CSS3 and jQuery

jQueryjQuery $('.$('.menu > li').hover(menu > li').hover(function(){function(){

$('$('ul', this).show('slow');ul', this).show('slow');},},function(){function(){

$('$('ul', this).hide('slow');ul', this).hide('slow');}}

););

Page 11: CSS3 and jQuery

::nth-childnth-child

Page 12: CSS3 and jQuery

CSS3CSS3..student-list tbody student-list tbody tr:nth-child(2n) tr:nth-child(2n) {{

background: #7CEAE1;background: #7CEAE1; } } . .student-list tbody student-list tbody tr:nth-child(2n + 1)tr:nth-child(2n + 1) { {

background: #fcfcfc;background: #fcfcfc; } }

..student-list tbody student-list tbody tr:nth-child(odd)tr:nth-child(odd) {{background: #7CEAE1;background: #7CEAE1;

} } . .student-list tbody student-list tbody tr:nth-child(even)tr:nth-child(even) { {

background: #fcfcfc;background: #fcfcfc; } }

Or...Or...

Page 13: CSS3 and jQuery

jQueryjQuery$(".$(".student-list tbody student-list tbody tr:oddtr:odd").css('background', '").css('background', '#7CEAE1#7CEAE1');');$(".$(".student-list tbody student-list tbody tr:eventr:even").css('background', '#f5f5f5');").css('background', '#f5f5f5');

$(".$(".student-list tbody student-list tbody tr:nth-child(2n)tr:nth-child(2n)").css('background', ").css('background', ''#7CEAE1#7CEAE1');');$(".$(".student-list tbody student-list tbody tr:nth-child(2n+1)tr:nth-child(2n+1)").css('background', ").css('background', '#f5f5f5');'#f5f5f5');

Or..Or..

Page 14: CSS3 and jQuery

FORM VALIDATIONFORM VALIDATION

Page 15: CSS3 and jQuery

jQuery Validate EnginejQuery Validate Enginehttps://github.com/posabsolute/jQuery-Validation-Enginehttps://github.com/posabsolute/jQuery-Validation-Engine

Page 16: CSS3 and jQuery

HTMLHTML<<input value="2010-12-01" input value="2010-12-01" class="validate[required,custom[date]]"class="validate[required,custom[date]]" type="text" name="date" id="date" />type="text" name="date" id="date" /><<input value="too" input value="too" class="validate[required,custom[onlyLetclass="validate[required,custom[onlyLetterNumber]]"terNumber]]" type="text" name="special" type="text" name="special" id="special" />id="special" />

Page 17: CSS3 and jQuery

jQueryjQuery$("#$("#form.id").validationEngine();form.id").validationEngine();

////DemoDemo http://www.position-relative.net/creation/formValidator/http://www.position-relative.net/creation/formValidator/

Page 18: CSS3 and jQuery

Using CSS3 and HTML5 Using CSS3 and HTML5 /* A List Apart: Forward Thinking Form Validation (http://goo.gl/7d5yQ) */

Page 19: CSS3 and jQuery

CSS3 UI pseudo-classCSS3 UI pseudo-class::validvalid::invalidinvalid::requiredrequired::optionaloptional::out-of-rangeout-of-range::read-onlyread-only::read-writeread-write

Page 20: CSS3 and jQuery

HTMLHTML……<<label for="email">Email *</label> label for="email">Email *</label> <<input type="email" id="email" name="email" input type="email" id="email" name="email" placeholder="e.g. [email protected]" placeholder="e.g. [email protected]" title="Please enter a valid email" title="Please enter a valid email" requiredrequired /> /> < <p class="validation01">p class="validation01">

<<span class="invalid">Please enter a valid span class="invalid">Please enter a valid email address e.g. [email protected]</span> email address e.g. [email protected]</span><<span class="valid">Thank you for entering a span class="valid">Thank you for entering a valid email</span> valid email</span>

</ </p>p>……

Page 21: CSS3 and jQuery

CSS3CSS3..validation01 {validation01 { background: red;background: red; color: #fff;color: #fff; display: none;display: none; font-size: 12px;font-size: 12px; padding: 3px;padding: 3px; position: absolute;position: absolute; right: -110px;right: -110px; text-align: center;text-align: center; top: 0;top: 0; width: 100px;width: 100px;}}

Page 22: CSS3 and jQuery

CSS3CSS3input:focus + .validation01 {input:focus + .validation01 { display: block;display: block;}}input:focus:required:valid + .validation01 {input:focus:required:valid + .validation01 { background: green;background: green;}}input:focus:required:valid + .validation01 .invalid input:focus:required:valid + .validation01 .invalid {{ display: none;display: none;}}input:focus:required:invalid + .validation01 .valid input:focus:required:invalid + .validation01 .valid {{ display: none;display: none;}}

Page 23: CSS3 and jQuery

ANIMATIONANIMATION

Page 24: CSS3 and jQuery

jQuery Animation jQuery Animation MethodsMethods

..animate()animate()

..fadeIn()fadeIn()

..fadeOut()fadeOut()

..fadeToggle()fadeToggle()

..fadeTo()fadeTo()

..hide()hide()

..show()show()

..slideDownslideDown

..slideToggle()slideToggle()

..slideUpslideUp

..stop()stop()

..toggle()toggle()

Page 25: CSS3 and jQuery

jQuery AnimatejQuery Animate$("#$("#example_box").animate({example_box").animate({ width: "70%",width: "70%", opacity: 0.4,opacity: 0.4, marginLeft: "0.6in",marginLeft: "0.6in", fontSize: "3em",fontSize: "3em", borderWidth: "10px"borderWidth: "10px" }, 1500 ); }, 1500 );

Page 26: CSS3 and jQuery

CSS3 TransitionsCSS3 Transitionstransition-property: background;transition-property: background;transition-duration: 0.3s;transition-duration: 0.3s;transition-timing-function: ease;transition-timing-function: ease;

/* /* Don't forget vendors prefix */Don't forget vendors prefix */--moz-transitionmoz-transition--webkit-transitionwebkit-transition--o-transitiono-transition

Page 27: CSS3 and jQuery

CSS3 TransitionsCSS3 Transitions/* /* Shortcut */Shortcut */transition: background 0.3s ease;transition: background 0.3s ease;/* /* Multiple properties */Multiple properties */transition: background 0.3s ease, transition: background 0.3s ease,

width 0.3s linear; width 0.3s linear;/* /* All properties */All properties */transition: all 0.3s ease;transition: all 0.3s ease;

Page 28: CSS3 and jQuery

/* /* Understanding CSS3 Transitions */Understanding CSS3 Transitions */http://goo.gl/k9EcXhttp://goo.gl/k9EcX/* /* Transition with Tranform */Transition with Tranform */http://goo.gl/HB2mchttp://goo.gl/HB2mchttp://goo.gl/KvclUhttp://goo.gl/KvclU

Page 30: CSS3 and jQuery

CSS3 TransformCSS3 Transformtransform: translate(100px, 100px);transform: translate(100px, 100px);

/* /* Don't forget vendors prefix */Don't forget vendors prefix */--moz-transformmoz-transform--webkit-transformwebkit-transform--o-transformo-transform

Page 31: CSS3 and jQuery

CSS3 TransformCSS3 Transformtransform: translate(80px, 80px) transform: translate(80px, 80px) scale(1.5, 1.5) rotate(45deg); scale(1.5, 1.5) rotate(45deg);

Page 32: CSS3 and jQuery

CSS3 Animation(@) CSS3 Animation(@)

http://goo.gl/c8QJB http://goo.gl/uv33G

Page 33: CSS3 and jQuery

CSS3 Animation CSS3 Animation . . The Keyframe @ RuleThe Keyframe @ Rule. . animation-nameanimation-name. . animation-durationanimation-duration. . animation-timing-functionanimation-timing-function. . animation-iteration-countanimation-iteration-count. . animation-directionanimation-direction. . animation-delayanimation-delay

Page 34: CSS3 and jQuery

CSS3 Animation CSS3 Animation @@keyframes resize {keyframes resize { 0% { 0% { padding: 0;padding: 0; } } 50% { 50% { padding: 0 20px;padding: 0 20px; background-color:rgba(255,0,0,0.2);background-color:rgba(255,0,0,0.2); } } 100% { 100% { padding: 0 100px;padding: 0 100px; background-color:rgba(255,0,0,0.9);background-color:rgba(255,0,0,0.9); } }}}

Page 35: CSS3 and jQuery

CSS3 Animation CSS3 Animation ##box {box { animation-name: resize;animation-name: resize; animation-duration: 1s;animation-duration: 1s; animation-iteration-count: 4;animation-iteration-count: 4; animation-direction: alternate;animation-direction: alternate; animation-timing-function: ease-in-out;animation-timing-function: ease-in-out;}}/* /* Don't forget vendors prefix */Don't forget vendors prefix */--moz-transitionmoz-transition--webkit-transitionwebkit-transition--o-transitiono-transition

Page 36: CSS3 and jQuery

TAG TEAM: jQuery with CSS3TAG TEAM: jQuery with CSS3

Page 37: CSS3 and jQuery

http://jquerymobile.com/http://jquerymobile.com/

Page 39: CSS3 and jQuery

THANK YOU!THANK YOU!http://kooms.infohttp://kooms.info