Question

如何更改我正在使用的javascript警报以使用jQuery UI /对话框。我一直在尝试将脚本更改为使用对话框但没有成功。我想使用比警报更好的东西为我的日历创建弹出窗口。所以我在想一个对话，但如果有更好的东西，我也会感兴趣。

这是我的全日历代码

$(document).ready(function() { 
     $('#calendar').fullCalendar({ 
        header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },

             eventClick: function(calEvent, jsEvent, view) {
        alert('Name:  ' + calEvent.title + '\n' + "Start Date/Time: " +  $.fullCalendar.formatDate(calEvent.start, 'dd-MM-yyyy hh:mm:ss TT') + '\n' + 'End Date/Time:  ' + $.fullCalendar.formatDate(calEvent.end, 'dd-MM-yyyy hh:mm:ss TT') + '\n' +  'Address:  ' + calEvent.address1 +  '\n' + 'Apt/Suite:  ' + calEvent.address2 + '\n' + 'City/Sate/Zip:  ' + calEvent.city + ' ' + calEvent.state + ' ' + calEvent.zip + '\n' + 'Home Phone:  ' + calEvent.hphone + '\n' + 'Cell Phone:   ' + calEvent.cphone + '\n' + 'Work Phone:  ' + calEvent.wphone + '\n' + 'Email:  ' + calEvent.email + '\n' + 'Order Number:   ' + calEvent.ordern);
            },
         events: "json_events.php", 


         loading: function(bool) { 
            if (bool) $('#loading').show(); 
            else $('#loading').hide(); 
         } 

      }); 

   });

这就是我将json代码发送到日历的方式

$ events = array（）; foreach（$ db-＆gt; query（“SELECT * FROM signings WHERE pid ='$ pid'和done = 0“）为$ row）{

$title = $row['fname']." ".$row['lname'];
$eventsArray['id'] =  $row['id'];
$eventsArray['ordern'] =  $row['ordern'];
$eventsArray['title'] = $title;
//$eventsArray['url'] = "eventinfo.php?id=$id";
$eventsArray['start'] = $row['signstart'];
$eventsArray['end'] = $row['signend'];
$eventsArray['address1'] = $row['street1'];
$eventsArray['address2'] = $row['street2'];
$eventsArray['city'] = $row['city'];
$eventsArray['state'] = $row['state'];
$eventsArray['zip'] = $row['zip'];
$eventsArray['hphone'] = $row['hphone'];
$eventsArray['cphone'] = $row['cphone'];
$eventsArray['wphone'] = $row['wphone'];
$eventsArray['email'] = $row['email'];
$eventsArray['allDay'] = "";
$eventsArray['color'] = "#7B1616";
$eventsArray['textColor'] = "#FFFFFF";

$events[] = $eventsArray; }

echo json_encode（$ events）;

Answer 1

警告：我使用jqAlert（）作为函数名称，而jqAlert（）不是真正的模态，就像JS alert（）函数是模态的一样。在您的问题中设置示例代码的方式您不需要真正的模态对话框，但如果这是一个不成文的期望，我不会感到惊讶。

function jqAlert(msg) {
    console.log("Alert: " + msg);
    $('<div id="sfUI-Dialog-Alert" title="Message from Web Application" style="font-size: 0.8em"><p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>' + msg + '</div>').dialog({
        modal: true,
        width: 400,
        height: 222,
        show: {
            effect: "blind",
            duration: 444
        },
        hide: {
            effect: "explode",
            duration: 333
        },
        buttons: {
            Ok: function () {
                $(this).dialog("close");
            }
        }
    });
}

Answer 2

我写了一个小型图书馆，以便轻松完成。

https://github.com/Scimonster/jquery-ui-alert

这很简单，但可以自定义。

Answer 3

我会使用qtip，fullcalendar有example如何使用。

安装qtip2后（qtip不再主动开发），您的代码会看起来像这样：

$(document).ready(function() { 
     $('#calendar').fullCalendar({ 
        header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },

             eventClick: function(calEvent, jsEvent, view) {
        alert('Name:  ' + calEvent.title + '\n' + "Start Date/Time: " +  $.fullCalendar.formatDate(calEvent.start, 'dd-MM-yyyy hh:mm:ss TT') + '\n' + 'End Date/Time:  ' + $.fullCalendar.formatDate(calEvent.end, 'dd-MM-yyyy hh:mm:ss TT') + '\n' +  'Address:  ' + calEvent.address1 +  '\n' + 'Apt/Suite:  ' + calEvent.address2 + '\n' + 'City/Sate/Zip:  ' + calEvent.city + ' ' + calEvent.state + ' ' + calEvent.zip + '\n' + 'Home Phone:  ' + calEvent.hphone + '\n' + 'Cell Phone:   ' + calEvent.cphone + '\n' + 'Work Phone:  ' + calEvent.wphone + '\n' + 'Email:  ' + calEvent.email + '\n' + 'Order Number:   ' + calEvent.ordern);
            },
         events: "json_events.php", 
         //New code here:
         eventRender: function(event, element) {
            element.qtip({
               content: event.description
            });
         },

         loading: function(bool) { 
            if (bool) $('#loading').show(); 
            else $('#loading').hide(); 
         } 

      }); 

   });

用jQuery UI / Dialog替换javascript警报

3 个答案: