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

http://abeautifulsite.net/blog/2008/12 ··· alogs%2F

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.
크리에이티브 커먼즈 라이센스
Creative Commons License
이올린에 북마크하기(0) 이올린에 추천하기(0)

Posted by 홍반장

2011/07/01 15:02 2011/07/01 15:02
, ,
Response
No Trackback , No Comment
RSS :
http://tcbs17.cafe24.com/tc/rss/response/6276


블로그 이미지

- 홍반장

Archives

Recent Trackbacks

Calendar

«   2024/12   »
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31        
Statistics Graph

Site Stats

Total hits:
250158
Today:
137
Yesterday:
295