반응형

http://meteor.com/

Meteor is an open-source platform for building top-quality web apps in a fraction of the time, whether you're an expert developer or just getting started.

 

특징

Pure Javascript

Live Page updates

clean, powerful data synchronization

Latency compensation

Hot code Pushes

Sensitive code runs in privileged environment

Fully self-contained application bundles

Interoperability

Smart packages

 

Examples : http://meteor.com/examples/leaderboard

 

 

반응형
저작자표시

'프로그래밍 > Script' 카테고리의 다른 글

[jQuery] jQuery UI - Slide Scroll  (0) 2013.03.22
[Mobile] Choosing a mobile development strategy  (0) 2013.03.21
[jQuery] Collection of jQuery Drag and Drop Plugins  (0) 2013.03.20
[javascript] Image Upload with Preview and Delete & mobile  (0) 2013.03.19
[jquery] 13 Very Useful jQuery Modal Plugins  (0) 2013.03.18
반응형

Image Upload with Preview and Delete

 

http://stackoverflow.com/questions/10206648/image-upload-with-preview-and-delete/10206834#10206834

 

모바일에서 브라우저로 파일 업로드 할때 미리보기 기능 구현.

 

html5 에서 모바일브라우저상의 <input type="file" >을 지원 할때 사용 가능하다.

 

아래의 Demo가 실행이 되는 브라우저에서는 적용 가능하겠다.

 

Demo : http://plungjan.name/test/previewjq.html

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Image preview</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
var blank="http://upload.wikimedia.org/wikipedia/commons/c/c0/Blank.gif";
function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#img_prev')
            .attr('src', e.target.result)
            .height(200);
        };

        reader.readAsDataURL(input.files[0]);
    }
    else {
      var img = input.value;
        $('#img_prev').attr('src',img).height(200);
    }
    $("#x").show().css("margin-right","10px");
}
$(document).ready(function() {
  $("#x").click(function() {
    $("#img_prev").attr("src",blank);
    $("#x").hide(); 
  });
});
</script>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
#x { display:none; position:relative; z-index:200; float:right}
#previewPane { display: inline-block; }
</style>
</head>
<body>
<section>
<input type='file' onchange="readURL(this);" /><br/>
<span id="previewPane">
<img id="img_prev" src="#" alt="your image" />
<span id="x">[X]</span>
</span>
</section>
</body>
</html> 

 

반응형
저작자표시

'프로그래밍 > Script' 카테고리의 다른 글

[javascript] Meteor - nodejs . meteor  (0) 2013.03.20
[jQuery] Collection of jQuery Drag and Drop Plugins  (0) 2013.03.20
[jquery] 13 Very Useful jQuery Modal Plugins  (0) 2013.03.18
[javascript] Holder.js  (0) 2013.03.11
[javascript] css3 video player , html5, javascript  (0) 2013.03.07
반응형
Holder.js : cavas요소로 브라우저에서 이미지 자리를 표시할수 있는 data URI를 사용한다.

https://github.com/imsky/holder

 

 

 

반응형
저작자표시

'프로그래밍 > Script' 카테고리의 다른 글

[javascript] Image Upload with Preview and Delete & mobile  (0) 2013.03.19
[jquery] 13 Very Useful jQuery Modal Plugins  (0) 2013.03.18
[javascript] css3 video player , html5, javascript  (0) 2013.03.07
[JAVASCRIPT] Galleria — A responsive JS image gallery framework  (0) 2013.02.28
[jQuery] 30 jQuery UI Framework Plugins  (0) 2013.02.26
반응형

Making Custom CSS3 Video Players With HTML5 and Javascript

 

Additional Resources

Download      Demo

 

 

 

반응형
저작자표시

'프로그래밍 > Script' 카테고리의 다른 글

[jquery] 13 Very Useful jQuery Modal Plugins  (0) 2013.03.18
[javascript] Holder.js  (0) 2013.03.11
[JAVASCRIPT] Galleria — A responsive JS image gallery framework  (0) 2013.02.28
[jQuery] 30 jQuery UI Framework Plugins  (0) 2013.02.26
[Design] 60+ Responsive Web Design Tutorial Roundup  (0) 2013.02.21
반응형

Backgrid.js – A set of core Backbone UI elements

http://codevisually.com/backgrid-js/


Dated Added → Feb 16, 2013Categories → Framework

Backgrid.js is a set of components for building semantic and easily stylable data grid widgets. It offers a simple, intuitive programming interface that makes easy things easy, but hard things possible when dealing with tabular data.
The goal of Backgrid.js is to produce a set of core Backbone UI elements that offer you all the basic displaying, sorting and editing functionalities you'd expect, and to create an elegant API that makes extending Backgrid.js with extra functionalities easy.
Backgrid.js - A set of core Backbone UI elements

Homepage: http://wyuenho.github.com/backgrid/
GitHub: https://github.com/wyuenho/backgrid


반응형
저작자표시

'프로그래밍 > Script' 카테고리의 다른 글

[Design] 60+ Responsive Web Design Tutorial Roundup  (0) 2013.02.21
[APP] cocoa > HTML5, 오브젝트 C를 HTML5로 변환하다.  (0) 2013.02.17
[javascript] jquery와 angulars 같이 사용하기.  (0) 2013.02.13
[javascript] RequireJS - http://requirejs.org/ . a javascript module loader  (0) 2013.02.13
[JBoss] Modularized JavaScript with JBoss Portal Platform 6 – Avoid Conflicts, Promote Re-usability  (0) 2013.02.07
반응형

jquery와 angulars 같이 사용하기.

requireJS로 시작했다가 무거운거 같아서 그냥 같이 쓰는걸로 해봤다.

문법적인 문제는 발견되지 않았다. 너무 간단한 테스트라서 그럴지도.

 

AS-IS

 : index.html에 require.js와 main.js, angular.js, controllers.js 등을 녹여넣었다.

* index.html

<!doctype html>
<html lang="en" ng-app>
    <head>
        <title>jQuery+RequireJS Sample Page</title>
        <!-- This is a special version of jQuery with RequireJS built-in -->
        <script data-main="scripts/main" src="scripts/require-jquery.js"></script>
               </script>
    </head>
    <body ng-controller="PhoneListCtrl" >
        <h1>jQuery+RequireJS Sample Page</h1>
        <p>Look at source or inspect the DOM to see how it works.</p>
       
       
       
        <div id="mydiv">aaa</div>
        <p>Total number of phones: {{phones.length}} </p>
        <p>Angulars Templates - http://docs.angularjs.org/tutorial/step_02</p>

 <p>Nothing here {{'yet' + '!'}}</p>
 
 <p>1 + 2 = {{ 1 + 2 }}</p>
 
 <p class="hello">{{hello}}______</p>
    </body>
</html> 

* main.js - require.js에서 사용함. 

 require(["jquery"], function($) {
  $("#mydiv").html("Hello this is RequireJS talking");
});


require(["jquery", "jquery.alpha", "jquery.beta"], function($) {
    //the jquery.alpha.js and jquery.beta.js plugins have been loaded.
    $(function() {
        $('body').alpha().beta();
    });
});

// angular.JS, controllers.js 를 LOAD.
require(["angular"], function($) {

});
require(["controllers"], function($) {

});

* controllers.js - angular.js에서 사용 

 function PhoneListCtrl($scope) {
  $scope.phones = [
    {"name": "Nexus S",
     "snippet": "Fast just got faster with Nexus S.",
     "age": 0},
    {"name": "Motorola XOOM™ with Wi-Fi",
     "snippet": "The Next, Next Generation tablet.",
     "age": 1},
    {"name": "MOTOROLA XOOM™",
     "snippet": "The Next, Next Generation tablet.",
     "age": 2}
  ];
 
  $scope.orderProp = "age";  
  $scope.hello = "Hello, world!"; 
}

 

TO-BE

* index.html 에 다 순차적으로 호출하였다.(require.js 사용안함) 

 <!doctype html>
<html lang="en" ng-app>
    <head>
        <title>jQuery+RequireJS Sample Page</title>
        <!-- This is a special version of jQuery with RequireJS built-in -->
        <script src="scripts/angular.js" ></script>
      <script src="scripts/controllers.js"></script>
      <script src="scripts/jquery-1.5.2.min.js"></script>
      <script src="scripts/jquery.alpha.js" ></script>
      <script src="scripts/jquery.beta.js" ></script>
        <script>        
         $(document).ready(function(){
             $("#mydiv").html("Hello this is RequireJS talking");
             $('body').alpha().beta();
         });   
        </script>
    </head>
    <body ng-controller="PhoneListCtrl" >
        <h1>jQuery+RequireJS Sample Page</h1>
        <p>Look at source or inspect the DOM to see how it works.</p>
       
       
       
        <div id="mydiv">aaa</div>
        <p>Total number of phones: {{phones.length}} </p>
        <p>Angulars Templates - http://docs.angularjs.org/tutorial/step_02</p>

 <p>Nothing here {{'yet' + '!'}}</p>
 
 <p>1 + 2 = {{ 1 + 2 }}</p>
 
 <p class="hello">{{hello}}______</p>
    </body>
</html>

 

 

 

 

 

 

반응형
저작자표시

'프로그래밍 > Script' 카테고리의 다른 글

[APP] cocoa > HTML5, 오브젝트 C를 HTML5로 변환하다.  (0) 2013.02.17
[javascript] Backgrid.js – A set of core Backbone UI elements  (0) 2013.02.17
[javascript] RequireJS - http://requirejs.org/ . a javascript module loader  (0) 2013.02.13
[JBoss] Modularized JavaScript with JBoss Portal Platform 6 – Avoid Conflicts, Promote Re-usability  (0) 2013.02.07
[jQuery] 25+ Excellent jQuery Menu Plugins  (0) 2013.02.05
반응형

 

RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node. Using a modular script loader like RequireJS will improve the speed and quality of your code.

 

http://requirejs.org/

 

 

프로젝트에 require.js와 main.js 파일이 필요하다.

아래에서 main.js를 호출하는 구문이다. 

<script src="require.js" data-main="main"></script>

main.js( data-main="main" )에 로드할 JSLibrary와 해당 JSLabrary의 구문을 입력하면 된다.

아래에는 "jquery.js" 가 있어야 실행이 된다. 

require(["jquery"], function($) {
  $(‘#mydiv”).html(‘Hello this is RequireJS talking”);
});

 

** Optimize your JavaScript with RequireJS

http://www.webdesignerdepot.com/2013/02/optimize-your-javascript-with-requirejs/

 

 

IE 6+ .......... compatible ✔
Firefox 2+ ..... compatible ✔
Safari 3.2+ .... compatible ✔
Chrome 3+ ...... compatible ✔
Opera 10+ ...... compatible ✔

Get started then check out the API.

 

require.js 2.1.4MinifiedWith Comments

All you need to start using require.js in the browser.

Sample RequireJS 2.1.4 + jQuery 1.9.1 projectDownload

A zip file containing a sample project that uses jQuery and RequireJS.

r.js: Optimizer and Node and Rhino adapterDownload

The r.js file allows you to run the optimizer as well as run modules in Node or Rhino.

If you are running in Node, and want to use npm to install this file via npm, see the Use with Node page for more information.

For information on its use, as well as how to get the JAR files to run it under Rhino, see the r.js README.

Plugins§ 2

These are useful loader plugins that have the same license terms as require.js itself. Download the plugin file and place it as a sibling to your "data-main" main.js script.

textDownload

Load text files and treat them as dependencies. Great for loading templates. The text strings can be inlined in an optimized build when the optimizer is used.

domReadyDownload

Wait for the DOM is ready. Useful for pausing execution of top level application logic until the DOM is ready for querying/modification.

cs (CoffeeScript)Download

Load files written in CoffeeScript. With this plugin, it is easy to code in CoffeeScript in the browser, it can participate in the optimizer optimizations, and it works in Node and Rhino via the RequireJS adapter. This is the best way to do cross-environment, modular CoffeeScript. The project home has more information on how to install and use it.

i18nDownload

Load string bundles used in internationalization (i18n) that are made up of separate country/language/locale-specific bundles.

반응형
저작자표시

'프로그래밍 > Script' 카테고리의 다른 글

[javascript] Backgrid.js – A set of core Backbone UI elements  (0) 2013.02.17
[javascript] jquery와 angulars 같이 사용하기.  (0) 2013.02.13
[JBoss] Modularized JavaScript with JBoss Portal Platform 6 – Avoid Conflicts, Promote Re-usability  (0) 2013.02.07
[jQuery] 25+ Excellent jQuery Menu Plugins  (0) 2013.02.05
Beginner HTML5, JavaScript, jQuery, Backbone, and CSS3 Resources  (0) 2013.01.30
반응형

Modularized JavaScript with JBoss Portal Platform 6 – Avoid Conflicts, Promote Re-usability

http://howtojboss.com/2013/02/05/modularized-javascript-with-jboss-portal-platform-6-avoid-conflicts-promote-re-usability/

 

JBoss Portal Platform 6

JBoss Portal Platform 6 Beta is now available.
http://www.redhat.com/promo/jpp6/

Many new features are documented there:

  • Built on blazingly fast, lightweight JBoss Enterprise Application Platform 6 technology
  • Develop with JSF2 and Rich Faces 4 in portlets, via Portlet Bridge
  • Implement single sign-on (SSO) using SAML 2.0
  • Launch fast with Maven quick starts

Portlet and JavaScript

However, to developers and architects, one of the first issues and most difficult issue we face in any portal implementation is – what are the best practices to use JavaScripts in a portal platform?

Imagine if you have 2 portlets both using a shared JavaScript, such as jQuery – how would you share the JavaScript between the 2 portlets?

  • Each Portlet include its own
    • This is largely a no-no.  If each portlet include its own jQuery in a <script> tag, they’ll most likely run into conflicts or unnecessarily reload a script already loaded.
  • Deploy a single version
    • Then what if you need multiple versions?
    • What if some portlets needs a different version of the JavaScript library?

Now, expand this dilemma to not just common JavaScripts libraries, but to all of your application’s JavaScripts!

Oh, and don’t forget, you may also want to minify and combine scripts to reduce latency, to be Content Delivery Network (CDN) friendly, and ultimately, to improve your customer’s browsing  experience.

반응형
저작자표시

'프로그래밍 > Script' 카테고리의 다른 글

[javascript] jquery와 angulars 같이 사용하기.  (0) 2013.02.13
[javascript] RequireJS - http://requirejs.org/ . a javascript module loader  (0) 2013.02.13
[jQuery] 25+ Excellent jQuery Menu Plugins  (0) 2013.02.05
Beginner HTML5, JavaScript, jQuery, Backbone, and CSS3 Resources  (0) 2013.01.30
NGINX - node.js  (0) 2013.01.25

+ Recent posts

티스토리툴바