jquery alert

Плагин jQuery Alert Dialogs призван заменить основную функциональность стандартных предупреждений JavaScript,  alert(), confirm(), и prompt() функций. Они полностью настраиваются с помощью CSS (это позволит выглядеть вашему сайту  гораздо более привлекательно). И вы также можете настроить пользовательский заголовок для каждого диалогового окна.

Эти методы моделируют обычные модальные диалоговые окна. Они автоматически изменяют свое положение при изменении окна браузера. Если включить jQuery UI Draggable плагин, то окна можно перемещать, перетаскивая их за заголовки. В отличие от стандартных JavaScript функций, вы можете использовать HTML в сообщении. Например, чтобы задать переход на новую строку, вы можете использовать либо \n, либо <br />.

Для работы плагина необходимы следующие скрипты:

<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" />


Вызываются функции следующим образом:

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


Пример кода:

<script type="text/javascript">
 
 $(document).ready( function() {
 
 $("#alert_button").click( function() {
 jAlert('This is a custom alert box', 'Alert Dialog');
 });
 
 $("#confirm_button").click( function() {
 jConfirm('Can you confirm this?', 'Confirmation Dialog', function(r) {
 jAlert('Confirmed: ' + r, 'Confirmation Results');
 });
 });
 
 $("#prompt_button").click( function() {
 jPrompt('Type something:', 'Prefilled value', 'Prompt Dialog', function(r) {
 if( r ) alert('You entered ' + r);
 });
 });
 
 $("#alert_button_with_html").click( function() {
 jAlert('You can use HTML, such as <strong>bold</strong>, <em>italics</em>, and <u>underline</u>!');
 });
 
 $(".alert_style_example").click( function() {
 $.alerts.dialogClass = $(this).attr('id'); // set custom style class
 jAlert('This is the custom class called &amp;ldquo;style_1&amp;rdquo;', 'Custom Styles', function() {
 $.alerts.dialogClass = null; // reset to default
 });
 });
 });
 
 </script>

Недостатки:
* Клавиши ENTER и ESC (подтвердить/отменить) не работают в WebKit-браузерах
* Draggable plugin на данный момент не работает в Opera
* В IE6 position: fixed не поддерживается.

Демонстрация.

Источник.


Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

Комментарии  

+3 #1 kaurs 13.12.2010 19:54
Ещё посмотрите на http://istem.ru/open/alert.php
#2 Константин 29.12.2010 18:00
Да прикольная вещь) я в своем приложении использовал!

С уважением,
Николаев Константин

You have no rights to post comments