반응형
반응형

jQuery Autotab: Auto-tabbing and filtering for forms

 

jQuery Autotab is a plugin that gives you auto tabbing and filtering of text fields within a form. It greatly improves form usability and helps reduce the amount of bad data submitted.

autotab

 

jQuery Autotab

Autotab is a jQuery plugin that provides auto tabbing and filtering on text fields in a form. Once the maximum number of characters has been reached within a text field, the focus is automatically set to a defined element. Likewise, clearing out the text field's content by pressing backspace eventually places the focus on a previous element.

Why jQuery Autotab?

  • Auto tabbing behaves logically, in both tabbing forward and tabbing backwards.
  • Allow your users to easily modify your text in a tab that would otherwise auto tab away.
  • Reduce the amount of bad data submitted in a form by filtering text fields.
  • Populate multiple text fields by pasting into one.
  • Enhance text fields by auto tabbing when a specific character is pressed.
  • It is small, fast, easy to load and built on the powerful jQuery library.

Demo

Always running the latest and greatest version of Autotab: http://autotab.mathachew.com/

Angular and Knockout demos are also available.

 

 

 

 

 

 

 

 

 

.

반응형
반응형

 

 

The Node Beginner Book

 

http://www.nodebeginner.org/index-kr.html

 

이 문서에 대하여

본 문서의 목표는 Node.js용 애플리케이션 개발을 시작을 할 수 있게 만드는 것입니다. 그리고 함께 알아야 하는 “고급” JavaScript에 관한 모든 것을 다룹니다. 본 문서는 전형적인 “Hello World” 튜토리얼 보다는 더 많이 다룹니다.

상태

당신은 현재 이 책의 최종버전을 읽고 있습니다. 즉, 새로운 버전의 Node.js에 있는 변경사항들을 반영하거나 오류를 수정할 때만 업데이트 합니다.

이 책에 있는 코드 예제들은 Node.js 0.6.11에서 동작하는지 테스트 되었습니다.

대상 독자

이 문서는 저와 비슷한 배경을 가진 독자들에게 가장 잘 맞을 겁니다. 적어도 객체지향 언어 –루비, 파이선, PHP, 혹은 자바 같은 언어- 하나 정도에는 경험이 있고, JavaScript에는 약간의 경험만 있으며, Node.js는 이번이 처음인 분들 말입니다.

이미 다른 언어에 대한 경험을 가진 개발자들을 대상으로 한다는 말은 데이터 타입이나 변수, 제어구조 같은 것들을 이 문서에서 다루지 않다는 뜻입니다. 본 문서를 이해하기 위해서는 그런 기본적인 것들은 미리 알고 있어야 합니다.

하지만, JavaScript에서의 객체나 함수들은 다른 대부분의 언어들에 대응되는 것과 다르기 때문에, 좀 더 자세히 설명하겠습니다.

이 문서의 구조

이 문서를 마치는 시점에, 유저들에게 웹페이지를 보여주고 파일들을 업로드 할 수 있는 완성된 웹 애플리케이션을 가지게 될 것입니다.

이 유스케이스를 만족하기 위해 “충분한 정도”까지만 코드를 만드는 것에서 조금 더 나아가서, “세상을 바꾸는 정도”는 아닙니다만, 간결하지만 완결성있는 프레임워크를 만들어서 우리의 애플리케이션의 다른 부분들로부터 깔끔하게 분리할 겁니다.

우리는 Node.js에서 JavaScript 개발을 하는 것이 브라우저에서 JavaScript를 개발하는 것과 어떻게 다른지를 살펴보는 것으로 시작하려 할겁니다.

다음으로, “Hello World” 애플리케이션을 작성하는 훌륭한 오랜 전통을 따를 생각입니다. 그리고 그건 “무언가를 하는” 아주 기본이 되는 Node.js 애플리케이션이 될 겁니다.

그리고 나서는, 우리가 만들기 원하는 “실제” 애플리케이션의 종류가 무엇인지에 대해 논의하고, 이 애플리케이션을 조립하기 위해 구현해야 하는 다른 부분들을 자세히 살펴보고, 하나씩 이 각각의 부분들에 대해 작업을 시작할 생각입니다.

약속드렸듯이, 우리는 JavaScript의 고급 개념 몇 가지와, 그것을 어떻게 사용하는지, 그리고 우리가 아는 다른 프로그래밍 언어의 개념과 이 개념이 어떻게 다른지 살펴볼 것입니다.

완성된 애플리케이션의 소스코드는 아래 링크를 통해 다운 받으실 수 있습니다. the NodeBeginnerBook Github repository.

차례

 

 

반응형
반응형

scroll event - 스크롤 이벤트 scroll start, scrolling, scroll stop


스크롤시 사라졌다가 스크롤 끝나면 다시 나오는 스크립트


https://gist.github.com/RubaXa/5569075


 jquery.event.scroll.js



-- Page 배너 삽입, 모바일 하단에 위치고정


<div id="bottomrollbanner" style="position:fixed; bottom:0; height:49px; width:100%;background-color:bisque;">

                          배너 위치

</div>




<script type="text/javascript">
<!--


$(window).bind('scrollstart scrollend', function (evt){
    if( evt.type == 'scrollstart' ){
        // logic
        console.log("scroll Start");
        jQuery("#bottomrollbanner").fadeOut("fast");
    }
    if( evt.type == 'scrollend' ){
        // logic
        console.log("scroll End");
    jQuery("#bottomrollbanner").fadeIn("slow");
    }
});


var currentScrollTop, temporalScroll = 0;

$(window).scroll(function(){


    currentScrollTop = $(this).scrollTop();
    console.log('Previous value: ' + temporalScroll);
    if (currentScrollTop > temporalScroll) {
        console.log('scroll down - Current value: ' + currentScrollTop);
    }
    else {
        console.log('scroll up - Current value: ' + currentScrollTop);
    }
    temporalScroll = currentScrollTop;



});


//-->

</script>






반응형
반응형

NoUiSlider: A tiny range slider

 

 

jQuery UI slider

NoUiSlider is a range slider without the bloat, but with a ton of features. It’s lightweight and as minimal as possible, so it’s compatible on a wide range of devices.

nouislider

 

https://github.com/leongersen/noUiSlider/

 

 

 

 

 

 

반응형
반응형


<br><br>
*** 시작페이지로 지정하기 ***
<br><br>

<script type="text/javascript" src="/common/js/jquery-latest_header.js"></script>
<div id="homepage-link">
    <a href="javascript:addashomepage()"> Make this your homepage  </a>
    <span id="homepagePopup">
        <section class="text">
        </section>
        <br /><a href="javascript:void(0);" class="close">close</a>
    </span>
        Set as your home page
</div>





 
 <script type="text/javascript">

     /* Add as home page script - Dave Goodman goodmangraphics.co.uk */
     function addashomepage() {

         // makes jQuery differentiate between Chrome and Safari - thanks to Vikrant Chaudhary
         $.browser.chrome = $.browser.webkit && !!window.chrome;
         $.browser.safari = $.browser.webkit && !window.chrome;

         if ($.browser.msie) { // IE
             if ($.browser.msie && parseInt($.browser.version, 10) < 8) { // IE is v7 or lower - use ye olde homepage code
                 document.body.style.behavior = 'url(#default#homepage)';
                 document.body.setHomePage(window.location.href);
             } else { // IE v8 or higher
                 var homesettext = "<p><strong>Internet Explorer</strong><br /><br />To set your homepage in Internet Explorer 6 or later on Microsoft Windows:</p><ol><li>Select <strong>Tools |&nbsp;Internet Options</strong>.</li><li>On the &quot;General&quot; tab, in the &quot;Home page&quot; text box, type: <em>http://www.garagewire.co.uk/&nbsp; </em></li></ol><p><strong>Note: </strong>The &quot;Home page&quot; box can contain multiple URLs. If you want Garage Wire to be the first tab when your browser opens, make sure<em> http://garagewire.co.uk/ </em>is the first URL in this box.</p><ol start='3'><li>Click <strong>Apply</strong></li><li>Click<strong> OK</strong>.</li></ol>";
             };

         } else if ($.browser.safari) { // safari
             var homesettext = "<p><strong>Safari</strong><br /><br />To set your homepage in Safari 1 or later for Mac OS X or Microsoft Windows:</p><ol><li>Select <strong>Edit | </strong> <strong>Preferences</strong> or click the cog icon in the upper-right and select <strong>Preferences</strong>. The &quot;Preferences&quot; window appears.</li><li>Select the <strong>General</strong> tab.</li><li>Enter <em>http://www.garagewire.co.uk/ </em>in the&quot;Homepage&quot; text box.<em> </em></li><li>Click <strong>Close</strong>.</li></ol>";

         } else if ($.browser.webkit) { // chrome
             var homesettext = "<p><strong>Chrome</strong><br /><br />To set your homepage in Chrome 18 or later for Mac OS X or Microsoft Windows:</p><ol><li>Sign in to Chrome if you have not already done so.</li><li>Select the&nbsp;Customize and control Google Chrome icon (the icon with three bars to the right of the URL&nbsp;box).</li><li>Select <strong>Settings</strong>.</li><li>Under &quot;On startup&quot;, select the <strong>Open a specific page or set of pages</strong> button.</li><li>Click <strong>Set Pages</strong>.</li><li>Enter <em>http://www.garagewire.co.uk/ </em>in the field provided.<em> </em></li><li>Click <strong>OK</strong> to save your settings.</li></ol>";

         } else if ($.browser.mozilla) { // firefox
             var homesettext = "<p><strong>Mozilla Firefox</strong><br /><br />To set your homepage in Mozilla Firefox 16 or later on Microsoft Windows or Mac OS X:</p><ol><li>Select <strong>Firefox |</strong> <strong>Options</strong>. The <strong>Options</strong> dialog box appears.</li><li>Click the <strong>General</strong><em> </em>tab if not already selected.</li><li>Choose <strong>Show my home page</strong> in the drop-down to the right of &quot;When Firefox starts:&quot;.</li><li>Enter <em>http://www.garagewire.co.uk/</em> in the &quot;Home Page&quot; text box.</li><li>Click <strong>OK</strong>.</li></ol>";

         } else if ($.browser.opera) { // opera
             var homesettext = "<p><strong>Opera</strong><br /><br />To set your homepage in Opera on Microsoft Windows:</p><ol><li>Navigate to and click on the 'Preferences' link from the drop-down menu at the top of the Opera browser. The Preferences box will open. Select the 'General' tab.</li><li>Click on 'Set current page as home page'.</li><li>Click <strong>OK</strong>.</li></ol>To set your homepage in Opera on Mac OS X:</p><ol><li>Click on the top menu option 'Opera,' and then click on the 'Preferences' option. The Preferences box will open with the General tab already selected.</li><li>click 'Use Current.' Then utilize the drop-down menu to choose the desired navigation option.</li><li>Click <strong>OK</strong>.</li></ol>";

         } else { // unknown browser
             var homesettext = "<p><strong>Unknown browser type</strong><br /><br />To set your homepage please refer to your browser's help</a>";
         };

         if (homesettext) {
             $("#homepagePopup .text").html(homesettext);
             $("#homepagePopup").fadeIn();
             //alert(homesettext);
         };

     };

     jQuery(document).ready(function ($) {

         $("#homepagePopup .close").click(function (event) {
             $("#homepagePopup").fadeOut();
         });

         $("#bookmarkPopup .close").click(function (event) {
             $("#bookmarkPopup").fadeOut();
         });

     });
 
</script>







<style>
#homepagePopup {
    position: absolute;
    float: left;
    text-align: left;
    padding: 15px;
    background: #000;
    color: #fff;
    font-size: 1.2em;
    line-height: 1.2em;
    border: #ccc 2px solid;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    top:0;
    left:20px;
    z-index: 100;
    -moz-box-shadow: 0 0 15px #888;
    -webkit-box-shadow: 0 0 15px#888;
    box-shadow: 0 0 15px #888;
    display: none;
}
 
#homepagePopup ol li {
    list-style: decimal;
    padding: 4px 0 4px 0px;
    margin-left: 20px;
}

</style>

반응형
반응형

[jQuery] like Pintrest. 핀트레스트 같은 그리드(Grid)

 

Amazing jQuery Plugins to design Pinterest like Dynamic Grid Layout

 

1. Masonry

This is the most widely used dynamic grid layout plugin for jQuery. This works as opposite to CSS floats, because floating arranges elements horizontally while this Masonry arranges elements vertically.


2. Isotope

Its an exquisite jQuery plugin for intelligent and dynamic layouts that can't be achieved with CSS alone. It allows jQuery selectors and sorting the elements.


3. BlocksIt

BlocksIt.js is a jQuery plugin to create dynamic grid layout. It manages to convert HTML elements into 'Blocks' and position them in well-arranged grid layout like Pinterest. 


4. Wookmark

Wookmark is a website to bookmark Images and videos, and has a Pinterest like interface. This website has made this simple jQuery plugin which is available for free download on Github.


5. Pinterest Clone Layout

If you are a Ruby Developer and wish to create the Pinterest style layout in a short period of time, then this layout is for you. This layout uses the jQuery Masonyn plugin and is already styled and ready to use. You can also see the Demo interface here.


6. Flex

Flex is a fluid asymmetrical animated grid plugin for jQuery. It also has a feature of expanding the tiles on mouse hover.


 

 

 

 

 

 

반응형

+ Recent posts