龍華大學前端技術分享 Part2

前端技術分享
⿓華⼤學
2013-12-31

Outline
KnockoutJS
jQuery & jQuery UI
SCSS, Compass, RWD… (optional)

MVVM Pattern
View
Model
ViewModel

Bind View and
ViewModel
$(function () {
// Bind View and ViewModel
ko.applyBindings(new ViewModel());
})

data-bind
<p>First name: <input data-bind="value:
firstName" /></p>
function ViewModel() {
var self = this;
self.firstName = ko.observable('Sean');
};
Attribute

Exercise
knockoutjs tutorial #1
http://learn.knockoutjs.com/#/?
tutorial=intro

Observable Array
self.lists = ko.observableArray([]);

observable array
Event{
isFinished
}
Event{
isFinished
}
Event{
isFinished
}
Event{
isFinished
}
ViewModel.lists()=

foreach
<table data-bind="visible: lists().length > 0">
<thead>
<tr>
<th>Check</th>
<th>Event</th>
</tr>
</thead>
<tbody data-bind="foreach: lists">
<tr data-bind="visible: !isFinished()">
<td><input type="checkbox" data-bind="checked: isFinished"></td>
<td><input type="text"></td>
</tr>
</tbody>
</table>

Exercise
knockoutjs tutorial #2
http://learn.knockoutjs.com/#/?
tutorial=collections

傳說中，被$( )包起來，就
會獲得神奇的力量！！

jQuery
http://jquery.com/
MIT License.
Over 65% of the most visited website.
The most popular Javascript library.
Easy to modiﬁcation DOM.

Import jQuery
<script src="./lib/jquery-2.0.3.min.js"></script>

Action after DOM
loaded
<script>
$(document).ready(function(){
//TO DO
});
</script>

Action after DOM
loaded
<script>
$(function(){
//TO DO…
});
</script>

First Look
$("div#select_me").addClass("LW").hide();

First Look
$("div#select_me").addClass("LW").hide();
1. Css-style Selector
2. jQuery method
3. Action Chain

被$( )包起來，就會擁有
jQuery method！！

jQuery Selector
$("div") //all div
$("input.box") //input with 'box' class
$("p#John") //p with 'John' Id
$("[href='#']") //elements with "href='#'"

Action
.show()
.hide()
.toggle()

Action
.fadeIn()
.fadeOut()
.fadeToggle()
.fadeTo()

Bind Event handler
.click()
.hover()
.mouseover()
.keydown()
.bind()

Example
<script>
$(function(){
$("button").click(function(){
$("div.test3").toggle();
});
});
</script>

Get & Edit
.text()
.html()
.val()
.attr()

Create Element
$(“Element”)
Example: var $creat_p =
$(“<p>Create</p>”);

Append
.append()
.prepend()
.after()
.before()

Remove
.remove()
.empty()
.removeAttr()
.removeClass()
example:  
$(“div”).remove(“.bad-div”);

Up & Down
.parent()
.parents()
.children()
.find()

Sibling
.siblings()
.next()
.nextAll()
.nextUntil()
.prev()
.prevAll()
.prevUntil()

Filter
.fist()
.last()
.eq()
.filter()
.not()

Notes
jQuery
jQuery
jQuery API http://api.jquery.com/
jQuery UI API http://
api.jqueryui.com/

jQuery UI
http://jqueryui.com/datepicker/
有好多好多 UI 在這裏～～

Import jQuery UI
Import jQuery
Import jQuery UI
Import jQuery UI stylesheet

Example
<script src=“jquery-1.9.1.js"></script>
<script src="jquery-ui-1.10.3.custom.min.js"></script>
<link rel="stylesheet" href="jquery-
ui-1.10.3.custom.min.css">

Example: datepicker
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>

Compass & SCSS
SUSY & RWD
MV* & AngularJS

Compass & SCSS
Sass & Compass: The future of
stylesheets now.
(https://speakerdeck.com/imathis/
sass-compass-the-future-of-
stylesheets-now)
Compass
(http://compass-style.org/)

Simple way to RWD
Using bootstrap grid system.
http://getbootstrap.com/
Ugly class in your tag.

A little hard way to RWD
Compass + SUSY
RWD by Even Wu
https://speakerdeck.com/evenwu/rwd-
xiao-shi-jiu-shang-shou

你要覺得它很酷。
不會的東西，直接先挑戰，沿途再學需要的。
練習看文件。
訂閱RSS。
參加Conference。ex: JSDC, OSDC
沒事打開developer tools。

What the others see
http://www.awwwards.com/web-design-awards/curadmir

有些事情不只是表⾯上看起來這麼簡單。
當你正經歷⼀些痛苦的事情，你也正在學習如何
克服它。
我們常無形中得到很多其他⼈的幫助。

Here is Today
http://hereistoday.com/

龍華大學前端技術分享 Part2

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à 龍華大學前端技術分享 Part2

Similaire à 龍華大學前端技術分享 Part2 (20)

Dernier

Dernier (20)

龍華大學前端技術分享 Part2