반응형
반응형

jQuery Alert Dialogs (Alert, Confirm, & Prompt Replacements)

http://abeautifulsite.net/blog/2008/12/jquery-alert-dialogs/

Overview

This jQuery plugin aims to replace the basic functionality provided by the standard JavaScript alert(), confirm(), and prompt() functions. What’s the benefit of using custom methods? Well, a few good reasons, really.

Implementation

Include the following in the <head> section of your HTML document(s):

?
<!-- Dependencies -->
<script src="/path/to/jquery.js" type="text/javascript"></script>
<script src="/path/to/jquery.ui.draggable.js" type="text/javascript"></script>
<!-- Core files -->
<script src="/path/to/jquery.alerts.js" type="text/javascript"></script>
<link href="/path/to/jquery.alerts.css" rel="stylesheet" type="text/css" media="screen" />

Make sure you update the path to the respective files. If you are already using the jQuery UI Draggable plugin (including the UI core), simply omit the link to jquery.ui.draggable.js.

For IE to display the dialogs properly, you’ll also need to make sure that you’re using Standards Mode.  Just add the appropriate DTD at the very top of your page:

?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Usage

This plugin utilizes the $.alerts namespace, but there are three built-in shortcut functions that make implementation easier:

  • jAlert(message, [title, callback])
  • jConfirm(message, [title, callback])
  • jPrompt(message, [value, title, callback])

Unlike their native JavaScript counterparts, you can use HTML in the message parameter. To specify a newline, you can use either \n or <br />.

These methods do not return the same values as confirm() and prompt(). You must access the resulting values using a callback function. (See the demo for more details.)

Compatibility

This plugin requires jQuery 1.2.6 or above and has been tested to work in the following browsers:

  • Internet Explorer 6 & 7
  • Firefox 2 & 3
  • Safari 3
  • Chrome
  • Opera 9

Known Issues

  • ENTER and ESC keys (to accept/cancel) don’t work in WebKit browsers
  • The draggable plugin doesn’t currently work in Opera
  • IE6 acts a bit differently as position: fixed isn’t supported.
반응형
저작자표시

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

[Javascript] location.href 와 location.replace 의 차이점  (0) 2011.11.09
[jQuery] jQuery - 사용자 정의 PlugIn 만들기  (0) 2011.07.04
[javascript] 왜 jQuery 인가?  (0) 2011.06.30
[javascript] Ctrl key  (0) 2011.06.27
[javascript] loopedSlider  (0) 2011.06.24
반응형
jQuery는 HTML 문서, 보다 정확하게는 문서 개체 모델(DOM)과 자바스크립트 사이의 상호작용을 간단하게 해주는 오픈 소스 자바스크립트 라이브러리이다.

jQuery는 오픈소스이고, 작으며(최소화버전 18KB),  웹브라우저 간의 차이를 표준화하고, 깔끔한 플러그인 아키텍처를 사용하여 경량으로 제작되었고, 플러그인의 자료실(http://plugin.jquery.com)은 광범위하며, 출시 이후 꾸준히 성장하고 있다.
API는 인라인 코드 예제를 포함하여 완전하게 문서화되어 있고, 몇년동안이나 훌륭하게 유지되고 있으며, 상당히 친화적(다른 자바스크립트 라이브러리와의 충돌을 피하는 여러방법을 제공한다. ) 이다.
커뮤니티 지원은 여러 메일링 목록, IRC 채널 그리고 jQuery 커뮤니티의 수 많은 튜토리얼, 아티클, 그리고 플로그의 포스트들을 포함하기에 실제로 꽤 유용하다.
공개적으로 개발되고 있으며, jQuery 개발팀이 업데이트에 대한 출시를 두려워하지 않기 때문에 꾸준하고 일관적이다.
큰 조직(예를 들어 Microsoft, Dell, CBS...)에서 jQuery를 사용하는 것은 꾸준히 늘어날 것이며, 오래도록 지속될 것이다.
브라우저보다도 앞서 W3C의 명세를 수용하고 있다. 일례로 CSS3 셀렉터의 대부분을 지원한다.
최신 브라우저에서 개발을 위한 테스트 및 최적화를 수행하였다.
개발자뿐만 아니라 디자이너에게도 상당히 강력하다. 차별적이지 않다.
자바스크립트의 작성 방식을 바꾸고 있는 jQuery의 간결함, 방법론 그리고 철학은 그 자체가 표준이 되어가고 있다.

jQuery 철학
- "Write less, do more(적게 작성하고, 보다 많이 한다. )"
* 몇몇 요소를 찾아서 (CSS Selector 를 이용해서)  그들로 어떤 작업을 수행한다.(jQuery 메서드를 사용하여).
* 요소의 집합에 대해 여러 jQuery  메서드를 체인으로 연결한다.
* jQuery 래퍼와 암시적인 반복을 사용한다.
반응형
저작자표시

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

[jQuery] jQuery - 사용자 정의 PlugIn 만들기  (0) 2011.07.04
[jQuery] jQuery Alert Dialogs (Alert, Confirm, & Prompt Replacements)  (0) 2011.07.01
[javascript] Ctrl key  (0) 2011.06.27
[javascript] loopedSlider  (0) 2011.06.24
[App] Episode - 아이패드용 매거진 Pleiades Corp.  (0) 2011.05.19
반응형

Definition and Usage

The ctrlKey event attribute returns a Boolean value that indicates whether or not the "CTRL" key was pressed when an event was triggered.

Syntax

event.ctrlKey=true|false|1|0


<html>
<head>
<script type="text/javascript">
function isKeyPressed(event)
{
if (event.ctrlKey==1)
  {
  alert("The CTRL key was pressed!");
  }
else
  {
  alert("The CTRL key was NOT pressed!");
  }
}

</script>
</head>
<body onmousedown="isKeyPressed(event)">

<p>Click somewhere in the document. An alert box will tell you if you pressed the CTRL key or not.</p>

</body>
</html>

반응형
저작자표시

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

[jQuery] jQuery Alert Dialogs (Alert, Confirm, & Prompt Replacements)  (0) 2011.07.01
[javascript] 왜 jQuery 인가?  (0) 2011.06.30
[javascript] loopedSlider  (0) 2011.06.24
[App] Episode - 아이패드용 매거진 Pleiades Corp.  (0) 2011.05.19
[javascript] Creating a Mobile Touch Slide Panel with JQuery  (0) 2011.05.19
반응형

loopedSlider


https://github.com/nathansearles/loopedSlider
http://slidesjs.com/

loopedSlider 0.5.7 – No longer in development

Check out the next version of loopedSlider, now called Slides https://github.com/nathansearles/Slides

loopedSlider is a plugin made for jQuery that solves a simple problem, the looping of slide content. It was created to be easy to implement, smooth and most of all end the “content rewind” that most other content sliders suffer from.


Info

Check out the next version of loopedSlider, now called Slides http://slidesjs.com

Developed by Nathan Searles, http://nathansearles.com

Complete instructions can be found at http://nathansearles.com/plugin/loopedslider/

For updates, follow Nathan Searles on Twitter

Examples

Markup

<div id="loopedSlider">
	<div class="container">
	        <div class="slides">
	                <div><img src="01.jpg" alt="" /></div>
	                <div><img src="02.jpg" alt="" /></div>
	                <div><img src="03.jpg" alt="" /></div>
	                <div><img src="04.jpg" alt="" /></div>
	        </div>
	</div>
	<a href="#" class="previous">previous</a>
	<a href="#" class="next">next</a>
</div>

CSS

.container { width:500px; height:375px; overflow:hidden; position:relative; cursor:pointer; }
.slides { position:absolute; top:0; left:0; }
.slides div { position:absolute; top:0; width:500px; display:none; }

Initialize

<script type="text/javascript" charset="utf-8">
        $(function(){
                $('#loopedSlider').loopedSlider();
        });
</script>

Defaults

container: ".container", //Class/id of main container. You can use "#container" for an id.
slides: ".slides", //Class/id of slide container. You can use "#slides" for an id.
pagination: "pagination", //Class name of parent ul for numbered links. Don't add a "." here.
containerClick: true, //Click slider to goto next slide? true/false
autoStart: 0, //Set to positive number for true. This number will be the time between transitions.
restart: 0, //Set to positive number for true. Sets time until autoStart is restarted.
hoverPause: false, //Set to true to pause on hover, if autoStart is also true
slidespeed: 300, //Speed of slide animation, 1000 = 1second.
fadespeed: 200, //Speed of fade animation, 1000 = 1second.
autoHeight: 0, //Set to positive number for true. This number will be the speed of the animation.
addPagination: false //Add pagination links based on content? true/false

Defining Local Defaults

<script type="text/javascript" charset="utf-8">
        $(function(){
			$('#loopedSlider').loopedSlider({
				addPagination: true,
				slidespeed: 500
			});
        });
</script>

Defining Global Defaults

<script type="text/javascript" charset="utf-8">
        $(function(){
			$.fn.loopedSlider.defaults.addPagination = true;
			$.fn.loopedSlider.defaults.slidespeed = 500;
        });
</script>
반응형
저작자표시

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

[javascript] 왜 jQuery 인가?  (0) 2011.06.30
[javascript] Ctrl key  (0) 2011.06.27
[App] Episode - 아이패드용 매거진 Pleiades Corp.  (0) 2011.05.19
[javascript] Creating a Mobile Touch Slide Panel with JQuery  (0) 2011.05.19
[javascript] iScroll-js  (0) 2011.05.10
반응형
Episode - 아이패드용 매거진 Pleiades Corp.
 [펌] 웹앱을 만드는 사람들의 모임

Native 가 아닌 HTML5/CSS3/jQuery 로 만든 저희 어플을 소개 합니다.

실력있는 디자이너분들과 다양한 시도를 하면서 이번호를 내게 되었습니다.


특집은 일본대지진에 관해서 다루었고,

그 이외에 일러스트아트, 미디어아트, 마린블루스. 등의 다양한 꼭지들로 컨텐츠가 구성되었습니다.


webview로 모든 컨텐츠를 보여주기에 제약사항도 많았고

아직 불안한 요소도 많지만 보시면서 냉정한 평가를 해주시면,

다음달에는 조금 더 나은 모습으로 만들 수 있을거라고 생각합니다.

http://itunes.apple.com/kr/app/id401413450?mt=8#

http://cafe.naver.com/webappdev.cafe?iframe_url=/ArticleRead.nhn%3Farticleid=4630&

---------------------------------------------------------

소개동영상

http://youtu.be/_UGFtnoYCsw
-------------------------------------------------------------------
주소링크!!!
http://itunes.apple.com/kr/app/id401413450?mt=8

설명

한국 최초의 아이패드 전용 잡지 입니다.


 새롭게 선보이는 매체인《EPISODE》의 모토는 새로움입니다. 터치 인터페이스라는 새로운 환경에 맞게 컨텐츠, UX, 컨텐츠와 독자와의 관계를 완전히 새롭게 재정의하고자 합니다. 한국을 넘어 아시아 시장에서 아이패드 컨텐츠의 선도적 역할을 해 나가는《EPISODE》가 되겠습니다.





이번호에서는 일본의 대재앙에 대해 살펴보고자 합니다. 데이터와 인포그래픽 그리고 아이패드에서만 가능한 UX를 통해 일본의 대재앙이 일본만의 문제가 아닌 전세계의 문제이며 바로 우리의 문제임을 알아보고자 했습니다. 


트위터에서 최고의 미디어 파워를 자랑하는 독설닷컴 고재열 시사인 기자와의 인터뷰 기사도 있습니다. 트위터와 인터넷에서 많은 논쟁을 통해 다듬어진 고재열 기자의 생각과 입장을 들어보시기 바랍니다.

특히 이번호는 디자인이 확 바뀌었습니다. 터치 인터페이스라는 새로운 매체에서 발행되지만 책 혹은 잡지의 기본을 다시 생각하며 디자인에 많은 신경을 썼습니다.


《EPISODE》는 앞으로도 꾸준하게 UX 분야에서의 실험을 진행할 예정입니다. 독자의 움직임에 반응하는 디자인, 사용자와 커뮤니케이션하는 컨텐츠, 그리고 밀도 있고 창조적인 새로운 형식의 미디어를 경험해보시기 바랍니다.


iPad 스크린샷 1
iPad 스크린샷 2
iPad 스크린샷 3
iPad 스크린샷 4
iPad 스크린샷 5
반응형
저작자표시

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

[javascript] Ctrl key  (0) 2011.06.27
[javascript] loopedSlider  (0) 2011.06.24
[javascript] Creating a Mobile Touch Slide Panel with JQuery  (0) 2011.05.19
[javascript] iScroll-js  (0) 2011.05.10
[jQuery] jquery - carousel  (0) 2011.05.10
반응형

Creating a Mobile Touch Slide Panel with JQuery

http://www.zackgrossbart.com/hackito/touchslider/

DOWNLOAD : https://github.com/zgrossbart/jstouchslide

This bar is boring on a computer, but it comes alive on a mobile device. Grab your iPad or Android device and take a look.

Drag your finger and the items move with you. They follow your speed and keep your momentum. Play with it a little. I’ll wait.

Get the
source code

The sliding touch panel only shows up on mobile platforms. With a mouse it feels clunky, but sliding with your finger just feels right.

This article shows you how to implement a sliding touch panel in JavaScript. jQuery is the only dependency of the touch slider. The rest is pure JavaScript and HTML. It runs fast, feels natural, and works on every mobile device with touch support.


Horizontal Slide View

This is a JavaScript implementation of a mobile style Horizontal Slide View.

Use your finger to drag it left and right to all of the items in the view.

Since this is JavaScript it works on every mobile device with touch support

and

it does a good job with pictures

Each cell of the slider is HTML so you can put anything you want in it

The slider works just like the native application sliders

It snaps each cell into place and supports momentum

Try dragging fast and watch the items fly by

Want to know how it works?

keep reading

↓


반응형
저작자표시

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

[javascript] loopedSlider  (0) 2011.06.24
[App] Episode - 아이패드용 매거진 Pleiades Corp.  (0) 2011.05.19
[javascript] iScroll-js  (0) 2011.05.10
[jQuery] jquery - carousel  (0) 2011.05.10
[javascript] carouslide - A highly adaptable jQuery plugin for creating carousels and slideshows  (0) 2011.05.10

+ Recent posts

티스토리툴바