반응형
반응형

메세지 없이 브라우저를 닫고 싶을때. self.close() 외 2 방법

 

self.close()를 하면 지금 창을 닫을 것인지 물어보는 메세지가 나오는데.

메세지 없이 창을 닫고 싶으면 아래와 같이 하는 꼼수도 있다.

임의이 창을 열어서 해당 창을 호출한 opener를 닫는다든지.

 

자기자신을 닫을 때는 

 

 window.open("about:blank","_self").close();

자기 자신에 윈도우를 하나열어서 자기 자식윈도우로 만든다음에 바로 닫아버린다.
 
팝업이나 Open된 창에서 부모창을 닫을 때


opener.open('about:blank','_self').close();

 

 

 

.

 

반응형
저작자표시

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

[javascript] mobile dev - Framer.js: A prototyping toolkit  (0) 2014.05.21
[javascript] Apy: A library for rest API ajax calls  (0) 2014.05.21
Home » Tips » JavaScript » Simple floating div using jQuery  (0) 2014.05.09
최근 인기를 얻고 있는 JavaScript 라이브러리 정리  (0) 2014.05.08
[javascript] PourOver: Fast filtering and sorting of large collections  (0) 2014.04.29
반응형

Home » Tips » JavaScript » Simple floating div using jQuery




/Without any jQuery plugins you can float a  html element on your we page.

//Here we are taking example of a div element.

//You can place that div anywhere according to your requirements.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    <script language="javascript">


            $(document).ready(function(){

 

         //on window scroll fire it will call a function.


                $(window).scroll(function () {

 

         //after window scroll fire it will add define pixel added to that element.


                    set = $(document).scrollTop()+"px";

 

        //this is the jQuery animate function to fixed the div position after scrolling.


                    $('#floatDiv').animate({top:set},{duration:1000,queue:false});


                });


            });


         </script>


    <style type="text/css">


    body .divMain{
        height:6000px !important;
        background-color:yellow;
        overflow:auto;
    }
   .divMain #floatDiv {
        position:absolute;
        left:50%;
        margin-top:200px;
        margin-left:-200px;
        width:200px;
        height:200px;
        background-color: red;
    }
           
    </style>
</head>
<body>
    <div class="divMain">
        <div id="floatDiv">
        </div>
    </div>
</body>
</html>

반응형
저작자표시

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

[javascript] Apy: A library for rest API ajax calls  (0) 2014.05.21
[javascript] 메세지 없이 브라우저를 닫고 싶을때. self.close() 외 2 방법  (0) 2014.05.19
최근 인기를 얻고 있는 JavaScript 라이브러리 정리  (0) 2014.05.08
[javascript] PourOver: Fast filtering and sorting of large collections  (0) 2014.04.29
jquery ui에서 datepicker 사용할 때, input 뒤에 달력 이미지 넣는 부분  (0) 2014.04.21
반응형

http://html5experts.kr/archives/2039

 

최근 인기를 얻고 있는 JavaScript 라이브러리 정리

2013년부터 인기를 얻으면서 2014년에는 필수 지식으로 자리잡을 것같은 자바스크립트 라이브러리를 나름대로 순위를 정해서 정리해 보았습니다.

아마도 대부분의 웹개발자들은 이제 자바스크립트 라이브러리에 관심을 가지고 사용해보려고 하려는 경우가 많습니다. 그래서 순위에 대해서는는 검색 키워드를 기준으로 조사할 수 있는 구글 트랜드(모든 국가, 지난 12개월간, 모든 카테고리, 웹검색 기준)를 통해 라이브러리 인기를 장르별로 비교했습니다.

프레임웍

2013년에 주목받은 것은 MVC(Model-View-Controller)관련 프레임웍이라고 봅니다.

MVC관련 프레임웍

자바스크립트기반 MVC프레임웍은 다음 4가지로 이야기할 수 있습니다.

  1. AngularJS
  2. Backbone.js
  3. Ember.js
  4. Knockout.js (정확하게는 MVVM임)

js-framework1
AngularJS인기가 압도적으로 올라가고 있어 2014년에 JavaScript 프레임웍을 공부하려는 분들이 있다면 AngularJS를 시작하면 좋을 것 같습니다.

DOM 조작

HTML의 DOM(Document Object Model)작업을 할 수 있는 프레임웍을 생각해보면, 4가지가 생각납니다.

  1. jQuery
  2. Prototype JavaScript framework
  3. Zepto
  4. YUI Library

dom-framework

모든 사람이 예상하듯 jQuery의압도적인 지속에 경쟁할 후보조차 크게 보이지 않습니다.

모바일 프레임웍

아이폰/안드로이드기반 스마트폰에 웹사이트를 맞춰 만들 때 UI생성을 지원하는 프레임웍으로 아래 4가지가 있습니다.

  1. jQuery Mobile
  2. Sencha Touch 2
  3. Enyo
  4. jQT(이전: jQTouch)

mobile-framework

당연히 jQuery Mobile이 압도적입니다. 2014년에도 이 상황은 똑같을 것으로 예상됩니다. 그러나, jQuery Mobile 인기도 점차 하락세이기 때문에 모바일 프레임웍 수요 자체가 떨어지는 것으로 생각됩니다. 최근에는 프레임웍을 사용하지 않고 모바일 웹앱을 만드는 경우가 많아지기 때문입니다.

사용자 인터페이스 관련

템플릿 엔진

템플릿 엔진으로 사용되는 자바스크립트 라이브러리는 주로 3가지를 말할 수 있습니다. 단, Jade도 인기가 있지만 Node.js용으로 사용하기 때문에 여기서는 제외했습니다.

  1. Undersocre.js
  2. Handlebars.js
  3. mustache.js

templet-framework

Underscore.js가 가장 인기가 높은 것 같습니다. 템플릿 엔진쪽의 자바스크립트 라이브러리는 다양하지만, 알맞을 것을 선택할 때 질문에 답하여 선택을 좁힐 수 있는 사이트가 있어, 이를 참고하시면 좋을 것 같습니다.

웹그래픽 관련

그래픽 관련 자바스크립트 라이브러리는 WebGL을 통해 3D그래픽도 그릴 수 있는 것부터 2D기반 차트를 그릴 수 있는 다양한 것들이 존재합니다. 이번에는 그것들을 다 묶어서 정리해 보았습니다.

  1. three.js
  2. D3.js
  3. KineticJS
  4. EaselJS
  5. Processing.js

webgraphic-framework

three.js와 D3.js가 강세이지만, 라이브러리 용도에 따라 다르기 때문에 둘 중 하나를 선택하는 일은 적습니다. 빠르게 성장하는 것은 D3.js라고 생각합니다.

웹개발시 사용할 수 있는 JavaScript 관련 도구

자바스크립트 라이브러리는 아니지만 최근 자바스크립트 관련 도구로서 주목을 받고 있는 몇가지에 대해서 조사해보았습니다.

altJS – JavaScript대체 기술

JavaScript언어를 보다 효과적으로 작성할 수 있는 대체언어 또는 도구들에 대해서 나름대로 5가지로 정리해 보았습니다.

  1. CoffeeScript
  2. TypeScript
  3. Dart
  4. Haxe
  5. JSX

jstool

이 분야는 무엇이 좋다고 딱히 말하기 어렵습니다. 현재 가장 인기있는 것은 CoffeeScript이지만 TypeScript가 나온 이후, 인기가 하락하고 있습니다. 2013년 11에는 Dart가 정식버전이 나오면서 다시 인기가 올라가고 있습니다. 그래도 2013년도에서 가장 이슈가 된 것은 TypeScript인 것으로 파악됩니다. 또한 2014년도에는  TypeScript가 정식으로 출시되면 그 영향을 더 커질 것으로 생각됩니다.

CSS 메타언어(전처리기)

altJS이외에 아마도  CSS 전처리기에 대해서 궁금하실 분들이 있을 것 같아서 나름대로 정리해보았습니다.

  1. LESS
  2. Sass (Syntactically Awesome Style Sheets)
  3. Stylus

css

CSS 전처리기는 최근 빠르게 인기가 높아지고 있고 2014년도에도 계속 될 것입니다. 현재는 LESS가 인기가 좋지만 Sass도 빠르게 인기가 올라가고 있습니다.

JavaScript 테스트 도구

마지막으로 JavaScript 코드를 테스트하는데 사용할 수 있는 도구를 조사하였습니다.

  1. QUnit
  2. Jasmine
  3. Mocha (node.js용 대응)
  4. JsTestDriver

jstest

2013년도 초반에는 QUnit가 인기가 있었지만 최근에는 Jasmine이 대세인것 같습니다.

이렇게 조사한 내용을 토대로 앞으로 인기있거나 성장할 수 있는 자바스크립트 라이브러리는 아래와 같습니다.

  • AngularJS
  • jQuery
  • jQuery Mobile
  • Underscore.js
  • 3D.js
  • TypeScript 또는 Dart
  • LESS
  • Jasmine

다만, 이 자료의 기준은 구글 트랜드를 통해 조사한 내용으로 세밀한 기준이 있지는 않기 때문에 이 내용이 100% 맞다고 할 수 없습니다. 따라서 이 글의 내용은 어디까지나 하나의 참고 자료로 보시고 실제 프로젝트에서는 추가적으로 자료수집을 하거나, 직접 테스트해본후 결정하시기 바랍니다.

반응형
저작자표시

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

[javascript] 메세지 없이 브라우저를 닫고 싶을때. self.close() 외 2 방법  (0) 2014.05.19
Home » Tips » JavaScript » Simple floating div using jQuery  (0) 2014.05.09
[javascript] PourOver: Fast filtering and sorting of large collections  (0) 2014.04.29
jquery ui에서 datepicker 사용할 때, input 뒤에 달력 이미지 넣는 부분  (0) 2014.04.21
[jQuery] Twproject Gantt: JavaScript component for creating Gantts  (0) 2014.04.21
반응형

PourOver: Fast filtering and sorting of large collections


PourOver is a library from the New York Times for fast filtering and sorting of large collections of data (think hundreds of thousands of items) right in the browser. Build data-exploration apps and archives that don’t have to to wait for a database call to render query results.

pourover

Homepage: http://nytimes.github.io/pourover/
GitHub: http://github.com/NYTimes/pourover



PourOver is a library for simple, fast filtering and sorting of large collections -- think 100,000s of items -- in the browser. It allows you to build data-exploration apps and archives that run at 60fps, that don't have to to wait for a database call to render query results.

PourOver is built around the ideal of simple queries that can be arbitrarily composed with each other, without having to recalculate their results. You can union, intersect, and difference queries. PourOver will remember how your queries were constructed and can smartly update them when items are added or modified. You also get useful features like collections that buffer their information periodically, views that page and cache, fast sorting, and much, much more.

Visit the PourOver homepage on Github pages for more info.

Underscore.js is the only dependency.

PourOver should work in any browser that underscore works in. It has been tested in:

  • IE7+
  • Firefox 4+
  • Safari 5+
  • Opera 9+
  • Chrome 1+



반응형
저작자표시

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

Home » Tips » JavaScript » Simple floating div using jQuery  (0) 2014.05.09
최근 인기를 얻고 있는 JavaScript 라이브러리 정리  (0) 2014.05.08
jquery ui에서 datepicker 사용할 때, input 뒤에 달력 이미지 넣는 부분  (0) 2014.04.21
[jQuery] Twproject Gantt: JavaScript component for creating Gantts  (0) 2014.04.21
[jQuery] jQuery UI Touch Punch  (0) 2014.04.17
반응형

 

 

jquery ui에서 datepicker 사용할 때, input 뒤에 달력 이미지 넣는 부분

 


        jQuery("#sdt,#edt").datepicker({
            showMonthAfterYear:true,
            showOn:"button",
            buttonImage:"/common/tbl_st_ca.jpg",
            buttonImageOnly:true,
            dateFormat:'yy-mm-dd',
            nextText:'다음 달',
            prevText:'이전 달',
            dayNamesMin:['일','월','화','수','목','금','토'],
            monthNamesShort:['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월']
        });

 

 

 

 

 

사용법 : 아래는 사용법의 일례입니다. 생각보다 많은 옵션을 제공 하고 있습니다. document site 에서 꼭 확인하세요.

<!-- jquery-ui resource embed start -->

<link  href="resources/jqueryui/css/ui-lightness/jquery-ui-1.8.16.custom.css" rel="stylesheet">
<script src="resources/jqueryui/js/jquery-ui-1.8.16.custom.min.js"></script>

<!-- jquery-ui resource embed end -->
 

$(function() {
        $("#startDate").datepicker(   // inputbox 의 id 가 startDate 이겠죠.
                {dateFormat:'yy/mm/dd' // 만약 2011년 4월 29일 선택하면  inputbox 에 '2011/04/29' 로표시
                 , showOn: 'button' // 우측에 달력 icon 을 보인다.
                 , buttonImage: '/images/Icon_calendar.gif'  // 우측 달력 icon 의 이미지 패스 
                 , buttonImageOnly: true //  inputbox 뒤에 달력icon만 표시한다. ('...' 표시생략)
                 , changeMonth: true // 월선택 select box 표시 (기본은 false)
                 ,changeYear: true  // 년선택 selectbox 표시 (기본은 false)
                 ,showButtonPanel: true // 하단 today, done  버튼기능 추가 표시 (기본은 false)
               });

        $("#endDate").datepicker({dateFormat:'yy/mm/dd',showOn: 'button'
                , buttonImage: '/images/Icon_calendar.gif', buttonImageOnly: true
                , changeMonth: true,changeYear: true,showButtonPanel: true});

    });
    
    $('img.ui-datepicker-trigger').attr('align', 'absmiddle'); // css 문제가 있는경우 일부 위치 조절 :)

 

 

 

 

 

반응형
저작자표시

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

최근 인기를 얻고 있는 JavaScript 라이브러리 정리  (0) 2014.05.08
[javascript] PourOver: Fast filtering and sorting of large collections  (0) 2014.04.29
[jQuery] Twproject Gantt: JavaScript component for creating Gantts  (0) 2014.04.21
[jQuery] jQuery UI Touch Punch  (0) 2014.04.17
[javascript] Trianglify: Generate colorful triangle meshes  (0) 2014.04.17
반응형

Twproject Gantt: JavaScript component for creating Gantts

 

Twproject Gantt is a JavaScript component for Gantts and other charts, like task trees, built on jQuery. It offers in-place editing, zooming, data shortcuts, CSS skinning, and much more.

 

jQuery로 간트 차트 만들기

 

gantt

Homepage: http://gantt.twproject.com/
GitHub: https://github.com/robicch/jQueryGantt

jQueryGantt

jQuery Gantt editor has been written by Roberto Bicchierai and Silvia Chelazzi

Twproject jQuery Gantt

These are some key features:

  • jquery based
  • MIT licensed: you can reuse everywhere
  • json import-export
  • internationalizable
  • manage task status –> project workflow
  • manage dependecies
  • manage assignements (resources, roles efforts)
  • server synchronization ready
  • full undo-redo support
  • cross browser (at least for recent versions)
  • keyboard editing support
  • SVG visual editor
  • print friendly

Try the online working demo here: http://gantt.twproject.com

Read here about latest release: http://roberto.open-lab.com/2014/04/10/jquery-gantt-editor-svg-and-critical-path/

Read the genesis of this component here: http://roberto.open-lab.com/2012/06/14/the-javascript-gantt-odyssey/

Documentation is here: http://roberto.open-lab.com/2012/08/24/jquery-gantt-editor/

jQuery Gantt editor is part of Twproject 5 project

 

 

반응형
저작자표시

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

[javascript] PourOver: Fast filtering and sorting of large collections  (0) 2014.04.29
jquery ui에서 datepicker 사용할 때, input 뒤에 달력 이미지 넣는 부분  (0) 2014.04.21
[jQuery] jQuery UI Touch Punch  (0) 2014.04.17
[javascript] Trianglify: Generate colorful triangle meshes  (0) 2014.04.17
[jQuery] scrollToBySpeed: Scroll windows by speed instead of duration  (0) 2014.04.14

+ Recent posts

티스토리툴바