반응형
반응형

 

This works similarly to other nUnit testing frameworks, though somewhat customized for javascript. It is exceedingly small, but also surprisingly powerful.

Go to HowToWriteAndRunTests to learn how to use this framework.

Ant Based Javascript Testing Framework

In its original form RhinoUnit is run from an ANT scriptdef task using the Rhino engine - and uses all the helpful things that ANT provides for that. It is intended, however, that in the future the framework can be reused in other forms.

Unit Testing Javascript

It will do all the normal tests

  • string and object comparisons
  • regexp comparisons
  • collection comparisons (contains, containsExactly, etc)

 

And does them in a more natural form. For example assert.that("string", not(matches(/somethingelse/))); checks that the string "string" doesn't match the regular expression /somethingelse/.

Advanced Tests

RhinoUnit provides some more advanced tests. You can

  • ensure that a function has been called (by wrapping it with assert.mustCall(), or using an assert.functionThatMustBeCalled()). See AssertMustCall
  • ensure that an exception is thrown (using shouldThrowException(...)
  • ensure that the global namespace isn't polluted by poor variable scoping

See APIDescription for a list of all assertions and functions that are available.

반응형
반응형

[jQuery] 모든 라디오버튼, 체크박스 클릭시 로그인하라는 경고 보여주시

 

        $("[type='radio']").click(function(e){
            if (uid == ""){
       alert('로그인 후 이용해 주세요');
                $(this).attr("checked",false);
            }
        });
        $("[type='checkbox']").click(function(e){
            if (uid == ""){
       alert('로그인 후 이용해 주세요');
                $(this).attr("checked",false);
            }
        });

반응형
반응형
<html>
<head>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#input1").keyup(function(event){
if(event.keyCode !=8){
var result = "keycode="+ event.keyCode + " value="+ String.fromCharCode(event.keyCode);
var preHtml = $("#result").html();
$("#result").html(preHtml+ "<br />" +result);
}
if($(this).val() ==""){
$("#result").empty();
}
});
$("#onlyNumber").keyup(function(event){
if (!(event.keyCode >=37 && event.keyCode<=40)) {
var inputVal = $(this).val();
$(this).val(inputVal.replace(/[^0-9]/gi,''));
}
});
$("#onlyAlphabet").keyup(function(event){
if (!(event.keyCode >=37 && event.keyCode<=40)) {
var inputVal = $(this).val();
$(this).val(inputVal.replace(/[^a-z]/gi,''));
}
});
$("#notHangul").keyup(function(event){
if (!(event.keyCode >=37 && event.keyCode<=40)) {
var inputVal = $(this).val();
$(this).val(inputVal.replace(/[^a-z0-9]/gi,''));
}
});
$("#onlyHangul").keyup(function(event){
if (!(event.keyCode >=37 && event.keyCode<=40)) {
var inputVal = $(this).val();
$(this).val(inputVal.replace(/[a-z0-9]/gi,''));
}
});
});
</script>
</head>
<body>
숫자만: <input type="text" id="onlyNumber" /> <br />
영문만: <input type="text" id="onlyAlphabet" /> <br />
영문,숫자만:<input type="text" id="notHangul" /><br />
한글만:<input type="text" id="onlyHangul" /><br />
keyCode: <input type="text" id="input1" />
<div id="result">
</div>
</body>
</html>
반응형
반응형

jQuery.textcomplete: Autocomplete for textarea

자동완성

 

Forms - jQuery/Added on September 11, 2013/Add to favorites

jQuery.textcomplete is a jQuery plugin that adds an autocomplete feature to textareas, like the ones found in GitHub comment forms. It’s completely open source, released under the MIT license.

jquery textcomplete

Homepage: http://yuku-t.com/jquery-textcomplete/
GitHub: https://github.com/yuku-t/jquery-textcomplete

 

 

Autocomplete for Textarea

Introduces autocompleting power to textareas, like a GitHub comment form has.

DemoDemo.

How to use

Note: The key words "MUST", "SHOULD", and "MAY" in this document are to be interpreted as described in RFC 2119.


jQuery MUST be loaded ahead.

<script src="path/to/jquery.js"></script>
<script src="path/to/jquery.textcomplete.js"></script>

Then jQuery.fn.textcomplete is defined. The method MUST be called for textarea elements, and the receiver SHOULD include an element.

$('textarea').textcomplete(strategies);

The strategies is an Object not an Array. Each value is called a strategy object and the corresponding key is the name of the strategy.

var strategies = {
  // There are two strategies called 'foo' and 'bar.'
  // The plugin does not care these property names so you should use
  // meaningful names.
  foo: strategy,
  bar: otherStrategy
};

The strategy is an Object which MUST have match, search and replace and MAY have index, maxCount and template.

var strategy = {
  // Required
  match:    matchRegExp,
  search:   searchFunc,
  replace:  replaceFunc,

  // Optional
  index:    indexNumber,
  maxCount: maxCountNumber,
  template: templateFunc,
  cache:    cacheBoolean
}

The matchRegExp and indexNumber MUST be a RegExp and a Number respectively. matchRegExp MUST contain capturing groups and SHOULD end with $. indexNumber defaults to 2. The word captured by indexNumber-th group is going to be the term argument of searchFunc.

// Detect the word starting with '@' as a query term.
var matchRegExp = /(^|\s)@(\w*)$/;
var indexNumber = 2;

The searchFunc MUST be a Function which gets two arguments, term and callback. It MUST invoke callback with an Array of String. It is guaranteed that the function will be invoked exclusively even though it contains async call.

If you want to execute callback multiple times per a search, you SHOULD give true to the second argument while additional execution remains. This is useful to use data located at both local and remote. Note that you MUST invoke callback without truthy second argument at least once per a search.

The maxCountNumber MUST be a Number and default to 10. Even if searchFunc callbacks with large array, the array will be truncated into maxCountNumber elements.

The cacheBoolean MUST be a Boolean. It defaults to false. If it is true the searchFunc will be memoized by term argument. This is useful to prevent excessive API access.

var searchFunc = function (term, callback) {
  // Show local cache immediately.
  callback(cache[term], true);

  $.getJSON('/search', { q: term })
    .done(function (resp) {
      // Resp must be an Array of String such as:
      //   ['hello', 'world']
      callback(resp);
    })
    .fail(function () {
      // Callback must be invoked even if something went wrong.
      callback([]);
    });
};

The templateFunc MUST be a Function which gets and returns a string. The function is going to be called as an iteretor for the array given to the callback of searchFunc.

var templateFunc = function (value) {
  return '<b>' + value + '</b>';
};

The replaceFunc MUST be a Function which gets and returns a string. It is going to be invoked when a user will click and select an item of autocomplete dropdown.

var replaceFunc = function (value) { return '$1@' + value + ' '; };

The result is going to be used to replace the textarea's text content using String.prototype.replace with matchRegExp:

textarea.value = textarea.value.replace(matchRegExp, replaceFunc(value));

Example

var emojies = ['+1', '-1', 'dog', 'cat'];

$('textarea').textcomplete({
  // mention strategy
  mention: {
    match: /(^|\s)@(\w*)$/,
    search: function (term, callback) {
      callback(cache[term], true);
      $.getJSON('/search', { q: term })
        .done(function (resp) { callback(resp); })
        .fail(function ()     { callback([]);   });
    },
    replace: function (value) {
      return '$1@' + value + ' ';
    },
    cache: true
  },

  // emoji strategy
  emoji: {
    match: /(^|\s):(\w*)$/,
    search: function (term, callback) {
      var regexp = new RegExp('^' + term);
      callback($.map(emojies, function (emoji) {
        return regexp.test(emoji) ? emoji : nil;
      }));
    },
    replace: function (value) {
      return '$1:' + value + ': ';
    }
  }
});

Style

The HTML generated by jquery-textcomplete is compatible with Bootstrap's dropdown. So all Bootstrap oriented css files are available.

This repository also includes jquery.autocomplete.css. It is useful to be used as the starting point. 

 

반응형
반응형

40 Fresh jQuery Plugins To Make Your Website User Friendly

 

Flexisel – Responsive Carousel Plugin

( Demo | Download )

Resize your browser window to see how you the plugin can adjust to the window width. Flexisel will adapt responsively as the screen width gets smaller…

Swipebox – A Touchable jQuery Lightbox

( Demo | Download )

Swipebox is a jQuery “lightbox” plugin for desktop, mobile and tablet.

Sidr – Creating Facebook-Like Side Menus

( Demo | Download )

The best jQuery plugin for creating side menus and the easiest way for doing your menu responsive.

Unslider – A ‘Super-Tiny’ jQuery Slider

( Demo | Download )

The jQuery slider that just slides. No fancy effects or unnecessary markup, and it’s less than 3kb.

jQuery Nested – Create Multi-Column, Dynamic Grid Layouts

( Demo | Download )

Nested is a jQuery plugin which allows you to create multi-column, dynamic grid layouts.

jResponsive – Super-Smooth Transition Layouts

( Demo | Download )

JResponsive will organize your content in an efficient, dynamic and responsive layout. It can be applied to a container element and it will arrange its children in a layout that makes optimal use of screen space, by “packing” them in tightly. One of the very famous website that using this type of layout is Pulse.

MultiDialog

( Demo | Download )

MultiDialog utilizes jQuery UI Dialog Widget for a full featured Modalbox / Lightbox application.

FlexNav – Flexible, Device Agnostic Navigation

( Demo | Download )

A jQuery Plugin for Responsive Menus.

Flaunt.js – Responsive Navs with Nested Click-To-Reveal

( Demo | Download )

Flaunt.js is a jQuery script that allows you to create a responsive, nested navigation out the box. Flaunt was built to overcome responsive design challenges which faced a huge percentage of websites. This challenge was to show nested navigation items on click-demand, without the event taking you through to the page you’ve pressed…

SlideToucher – Touch Enabled jQuery Plugin for Content Swiping

( Demo | Download )

SlideToucher, touch enabled jQuery plugin for content swiping. Supports vertical and horizontal swipes.

LiquidSlider – A Responsive jQuery Content Slider

( Demo | Download )

A Responsive jQuery Content Slider.

Dropdown.dot.js – Flexible Dropdowns Based on dot.js Templates

( Demo | Download )

A JQuery Plugin for super-flexible Dropdowns based on dot.js Templates.

Typeahead.js – A Fully-Featured Autocomplete Library

( Demo | Download )

A fast and fully-featured autocomplete library.

iCheck – Customize Checkboxes & Radio Buttons

( Demo | Download )

iCheck plugin works with checkboxes and radio buttons like a constructor.

Chardin.js – Simple Overlay Instructions for Apps

( Demo | Download )

Simple overlay instructions for your apps.

jQuery Alpha Image Plugin

( Demo | Download )

This plugin can change selected colours to transparent on your image and give result as image or imagedata. This plugin works on IE9+, Chrome, Firefox, Safari. I didn’t try in opera.

ScrollUp

( Demo | Download )

A Lightweight Plugin for Creating a Customisable “Scroll-to-Top”.

Adding Alarms to the Digital Clock

( Demo | Download )

Adding Alarms to the Digital Clock.

Ractive.js

( Demo | Download )

Ractive.js is different. It solves some of the biggest headaches in web development – data binding, efficient DOM updates, event handling – and does so with almost no learning curve.

Firechat

( Demo | Download )

Firechat is an open-source, real-time chat widget built on Firebase. It offers fully secure multi-user, multi-room chat with flexible authentication, moderator features, user presence and search, private messaging, chat invitations, and more.

Albumize

( Demo | Download )

Albumize is a jQuery plugin that lets you manage collection of images in the web page as albums. With albumize, you can browse albums, add cover image to albums and switch between albums.

PowerTip – A jQuery Hover Tooltip Plugin

( Demo | Download )

PowerTip features a very flexible design that is easy to customize, gives you a number of different ways to use the tooltips, has APIs for developers, and supports adding complex data to tooltips. It is being actively developed and maintained, and provides a very fluid user experience.

jQuery Pin – Pin Any Element Within a Container

( Demo | Download )

Query.Pin is here to help! Pin any element to the top of a container. Easily disable it for smaller screen-sizes where there’s no room for that kind of shenanigans.

Perfect-Scrollbar – A jQuery Scrollbar Plugin

( Demo | Download )

Tiny but perfect jQuery scrollbar plugin.

Complexify

( Demo | Download )

Complexify aims to provide a good measure of password complexity for websites to use both for giving hints to users in the form of strength bars, and for casually enforcing a minimum complexity for security reasons.

Pickadate.js

( Demo | Download )

The mobile-friendly, responsive, and lightweight jQuery date & time input picker.

Cool Kitten

( Demo | Download )

It is a collection of HTML/CSS and JavaScript files to be used for web designers and developers.

Google Map

( Demo | Download )

A jQuery Plugin allows you to easely manipulate the Google Map API. You are now able to create maps, add some markers et create routes.

qTip2 – Pretty powerful tooltips

( Demo | Download )

The second generation of the advanced qTip plugin for the ever popular jQuery framework.

Magnific Popup

( Demo | Download )

Fast, light, mobile-friendly and responsive lightbox and modal dialog plugin. Open inline HTML, ajax loaded content, image, form, iframe (YouTube video, Vimeo, Google Maps), photo gallery. In/out animation effects are added with CSS3 transitions.

AutoHideInput

( Demo | Download )

AutoHideInput is a simple jQuery plugin that hides and shows the information entered by the user.

Progression.js

( Demo | Download )

A jQuery plugin that gives users real time hints & progress updates as they complete forms.

Thumbnail Grid with Expanding Preview

( Demo | Download )

A tutorial on how to create a thumbnail grid with an expanding image preview similar to the effect seen on Google Images.

App Showcase with Grid Overlay

( Demo | Download )

A tutorial about creating a simple grid overlay with subtle transitions for an app showcase.

jQuery TourBus

( Demo | Download )

A light weight jQuery plugin that is a must have for any developer to easily create modal windows. Put focus on important elements by applying a mask to your page and opening a customizable pop up modal window.

Pop Easy

( Demo | Download )

A light weight jQuery plugin that is a must have for any developer to easily create modal windows. Put focus on important elements by applying a mask to your page and opening a customizable pop up modal window.

Smint : Sticky Menu with Smooth Scroll

( Demo | Download )

SMINT is a simple plugin for lovers of one page websites.

FlipClock

( Demo | Download )

Least.js

( Demo | Download )

Random & Responsive jQuery, Html5 & Css3 Gallery with Lazyload.

Making Chart

( Demo | Download )

Make Pretty Charts For Your App with jQuery and xCharts.



Read more: http://www.smashingapps.com/2013/09/10/40-fresh-jquery-plugins-to-make-your-website-user-friendly.html#ixzz2edYdgf3K

반응형
반응형

IE에서 문장  복사하기

 

[예제 1] 데이타만 미리 준비해두고 클립보드에 복사하기
<script language="JavaScript">
< !--
function copy() {
var data = "안녕하세요.\n찾아주셔서 반갑습니다.\n앞으로도 잘부탁드립니다.";
window.clipboardData.setData("Text",data);
alert('복사 되었습니다.');
}
//-->
< /script>

< span style="cursor:pointer" onClick="copy()">[인사말]</span>
< br />
< TEXTAREA NAME="" ROWS="20" COLS="40"></TEXTAREA>
[예제 2] 웹페이지 특정 문단부분만을 클립보드에 복사하기
<script language="JavaScript">
< !--
function copy(obj) {
var data = "";
for (var i=0; i<obj.childNodes.length; i++){
data += obj.childNodes[i].nodeValue||"\n";
}
window.clipboardData.setData("Text",data);
alert('복사 되었습니다.');
}
//-->
< /script>
<DIV ID="text1">
안녕하세요.<br />
찾아주셔서 반갑습니다.<br />
앞으로도 잘부탁드립니다.
< /DIV>

< span style="cursor:pointer" onClick="copy(document.getElementById('text1'))">[인사말]</span>
< br />
< TEXTAREA NAME="" ROWS="20" COLS="40"></TEXTAREA>
반응형

+ Recent posts