DIV调用一个函数内部 [英] Call div inside a function

问题描述

我想创建一个类似于在iOS警报视图弹出，使用jQuery Mobile 1.4.3。 我需要我的警告消息从JavaScript事件触发，像一个OK按钮显示Ajax响应调用Web服务的确认消息。

我的第一个问题是通过数据直通弹出一个小窗口，其中大部分搜索我发现那位是不可能的。

我发现，code和平，这几乎是我所需要的：

  $（'＃指数）。住（pagebeforeshow'，功能（即数据）{
    $（＃测试按钮）。绑定（点击，功能（事件，UI）{
        $（'＆LT; D​​IV＆GT;'）。simpledialog2（{
            模式：按钮，
            HEADERTEXT：'对话'，
            buttonPrompt：求你了，不要\'吨毁了我的蓝色世界，
            按钮：{关闭：{点击：函数（）{}}}，
            宽度：120px
        }）
    }）;
}）;
 

现在的问题是，我需要这个功能，从一个按钮点击，但通过函数调用不： 事情是这样的：

  // POPUP code
// 1 ==警告绿色

// 2 ==警告黄色

// 3 ==警告红色

功能customAlert（消息，typeOfWarning）{

    如果（typeOfWarning ==1）{
        VAR auxStr =绿色;
    };
    如果（typeOfWarning ==2）{
        VAR auxStr =黄色;
    };
    如果（typeOfWarning ==3）{
        VAR auxStr =红色;
    };


    $（'＆LT; D​​IV＆GT;'）。simpledialog2（{
        模式：按钮，
        HEADERTEXT：'对话'，
        buttonPrompt：求你了，不要\'吨毁了我的蓝色世界，
        按钮：{关闭：{点击：函数（）{}}}，
        宽度：120px
    }）
};
 

我是新来的JavaScript和jQuery Mobile的，需要帮助，不能使它发挥作用。

在此先感谢。

解决方案

jQuery Mobile的公司的弹出小窗口的有许多方法来操作它。它可以由一个按钮被调用或打开编程。结构简单，但是，请注意，只有网页DIV应该是一个弹出式的直接父。

 ＆LT; D​​IV数据角色=页面＆GT;
  ＆LT; D​​IV数据角色=弹出ID =富＆GT;
    ＆LT;！ - 内容 - ＆GT;
  ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

要通过按钮或锚静态打开：

 ＆LT; A HREF =＃foo的数据相对=弹出数据转换=啪＆GT;弹出＆LT; / A＆GT;
 

要编程方式打开它：

  $（＃富）弹出（开放）。
 

此外，您还可以使用特殊的事件，任何你想要的目的，如： popupafteropen 和 popupafterclose 。

的下面是一个动态创建弹出的一个例子。

  //关闭按钮
VAR closeBtn = $（'＆LT; A HREF =＃的数据相对=后面的类=UI-BTN-右UI-BTN UI-BTN-B UI的角落的所有UI-BTN-图标NOTEXT UI -icon-删除UI阴影＆GT;关闭＆LT; / A＆GT;'）;

//你的文字从阿贾克斯得到
VAR内容=＆LT; P＆GT; Lorem存有悲坐阿梅德，consectetur adipiscing Morbi convallis SEM等DUI sollicitudin tincidunt＆LT; / P＆gt;中;

//弹出机构 - 设置宽度为可选 - 附加按钮和Ajax味精
VAR弹出= $（＆LT; D​​IV /＆gt;中，{
    数据角色：弹出
}）。的CSS（{
    宽度：$（窗口）.WIDTH（）/ 1.5 +PX，
    边距：5 +PX
}）追加（closeBtn）.append（内容）;

//追加到活动页面
$ .mobile.pageContainer.pagecontainer（getActivePage）追加（弹出）。

//创建并添加监听器，删除它，一旦它关闭
// 打开它
$（[数据角色=弹出]）。在（popupafterclose，函数（）{
    $（本）上卸下摆臂（）;
}）上（popupafteropen，函数（）{
    $（本）.popup（重新定位，{
        位置，以便：窗口
        / *自定义位置
        X：150，
        Y：200 * /
    }）;
}）。弹出（{
    可取消：假的，
    历史：假的，
    主题：B，
    / *或* /
    overlayTheme：b的，
    / *或* /
    过渡：啪
}）弹出（打开）;
 

  

演示

I'm trying to create a popup similar to an iOS alert view, with jQuery mobile 1.4.3. I need my warning messages to be triggered from javascript events, like a confirmation message with a OK button showing the ajax response call to the web service.

My first problem is passing data thru a popup widget, with much searching I fount it impossible.

I found a peace of code that is almost what I need:

$('#index').live('pagebeforeshow',function(e,data){   
    $("#test-button").bind('click',function(event, ui){
        $('<div>').simpledialog2({
            mode: 'button', 
            headerText:  'Dialog', 
            buttonPrompt: 'Please, don\'t ruin my blue world', 
            buttons : {'close': {click: function() {}}},
            width: '120px'
        })
    });  
});

The problem is that I need this function to be called not from a button click but by a function: Something like this:

//POPUP CODE
// 1 == warning green

// 2 == warning yellow

// 3 == warning red

function customAlert(message, typeOfWarning){

    if(typeOfWarning == "1"){
        var auxStr = "green";
    };
    if(typeOfWarning == "2"){
        var auxStr = "yellow";
    };
    if(typeOfWarning == "3"){
        var auxStr = "red";
    };


    $('<div>').simpledialog2({
        mode: 'button', 
        headerText:  'Dialog', 
        buttonPrompt: 'Please, don\'t ruin my blue world', 
        buttons : {'close': {click: function() {}}},
        width: '120px'
    })
};

I'm new to JavaScript and jQuery Mobile, need help, can't make it work.

Thanks in Advance.

解决方案

jQuery Mobile's Popup widget has many ways to manipulate it. It can be called by a button or opened programmatically. The structure is simple, however, note that only page div should be the direct parent of a popup.

<div data-role="page">
  <div data-role="popup" id="foo">
    <!-- content -->
  </div>
</div>

To open it statically by a button or an anchor:

<a href="#foo" data-rel="popup" data-transition="pop">Popup</a>

To open it programmatically:

$("#foo").popup("open");

Also, you can use special events for any purpose you want, e.g. popupafteropen and popupafterclose.

The below is an example of a dynamically created popup.

// close button
var closeBtn = $('<a href="#" data-rel="back" class="ui-btn-right ui-btn ui-btn-b ui-corner-all ui-btn-icon-notext ui-icon-delete ui-shadow">Close</a>');

// text you get from Ajax
var content = "<p>Lorem ipsum dolor sit amet, consectetur adipiscing. Morbi convallis sem et dui sollicitudin tincidunt.</p>";

// Popup body - set width is optional - append button and Ajax msg
var popup = $("<div/>", {
    "data-role": "popup"
}).css({
    width: $(window).width() / 1.5 + "px",
    padding: 5 + "px"
}).append(closeBtn).append(content);

// Append it to active page
$.mobile.pageContainer.pagecontainer("getActivePage").append(popup);

// Create it and add listener to delete it once it's closed
// open it
$("[data-role=popup]").on("popupafterclose", function () {
    $(this).remove();
}).on("popupafteropen", function () {
    $(this).popup("reposition", {
        "positionTo": "window"
        /* custom position
        x: 150, 
        y: 200 */
    });
}).popup({
    dismissible: false,
    history: false,
    theme: "b",
    /* or a */
    overlayTheme: "b",
    /* or a */
    transition: "pop"
}).popup("open");

Demo

这篇关于DIV调用一个函数内部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！