龍華大學前端技術分享 Part2
?
0 likes?180 views
This document summarizes front-end technologies including KnockoutJS, jQuery, SCSS/Compass, and responsive web design (RWD). It provides an overview of MVVM patterns in KnockoutJS, examples using data binding and observable arrays. It also covers jQuery and jQuery UI, how to import and use them for DOM manipulation and UI widgets. Lastly it discusses using SCSS/Compass for stylesheets and responsive design techniques like Bootstrap grids and the SUSY framework.
![Observable Array
self.lists = ko.observableArray([]);](https://image.slidesharecdn.com/2013-12-31lwf2e2-160904082150/85/Part2-10-320.jpg)
![jQuery Selector
$("div") //all div
$("input.box") //input with 'box' class
$("p#John") //p with 'John' Id
$("[href='#']") //elements with "href='#'"](https://image.slidesharecdn.com/2013-12-31lwf2e2-160904082150/85/Part2-24-320.jpg)
龍華大學前端技術分享 Part2
- 2. Outline KnockoutJS jQuery & jQuery UI SCSS, Compass, RWD… (optional)
- 5. Bind View and ViewModel $(function () { // Bind View and ViewModel ko.applyBindings(new ViewModel()); })
- 7. data-bind <p>First name: <input data-bind="value: firstName" /></p> function ViewModel() { var self = this; self.firstName = ko.observable('Sean'); }; Attribute
- 10. Observable Array self.lists = ko.observableArray([]);
- 12. 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>
- 16. jQuery http://jquery.com/ MIT License. Over 65% of the most visited website. The most popular Javascript library. Easy to modi?cation DOM.
- 17. Import jQuery <script src=/slideshow/part2-65670274/65670274/"./lib/jquery-2.0.3.min.js"></script>
- 18. Action after DOM loaded <script> $(document).ready(function(){ //TO DO }); </script>
- 19. Action after DOM loaded <script> $(function(){ //TO DO… }); </script>
- 21. First Look $("div#select_me").addClass("LW").hide(); 1. Css-style Selector 2. jQuery method 3. Action Chain
- 24. jQuery Selector $("div") //all div $("input.box") //input with 'box' class $("p#John") //p with 'John' Id $("[href='#']") //elements with "href='#'"
- 29. Modi?cation DOM
- 31. Create Element $(“Element”) Example: var $creat_p = $(“<p>Create</p>”);
- 34. Traverse in DOM
- 38. Notes jQuery jQuery jQuery API http://api.jquery.com/ jQuery UI API http:// api.jqueryui.com/
- 40. Import jQuery UI Import jQuery Import jQuery UI Import jQuery UI stylesheet
- 41. Example <script src=/slideshow/part2-65670274/65670274/“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">
- 42. Example: datepicker <script> $(function() { $( "#datepicker" ).datepicker(); }); </script> <body> <p>Date: <input type="text" id="datepicker"></p> </body>
- 43. Compass & SCSS SUSY & RWD MV* & AngularJS
- 44. 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/)
- 46. Bootstrap
- 50. Simple way to RWD Using bootstrap grid system. http://getbootstrap.com/ Ugly class in your tag.
- 52. A little hard way to RWD Compass + SUSY RWD by Even Wu https://speakerdeck.com/evenwu/rwd- xiao-shi-jiu-shang-shou
- 55. What the others see http://www.awwwards.com/web-design-awards/curadmir
- 56. What we see
- 62. Happy 2014~