0

我有 jquery mobile 的问题。

这是 jsfiddle：http: //jsfiddle.net/Gc7mR/3/

首先我有一个带有一些按钮的面板，重要的按钮是 id=define 的按钮）！

<div data-role=header data-position=fixed>
        <div data-role=navbar>
            <ul>
                <li><a href=#define data-role=button data-icon=edit
                    data-inline="true" data-rel="popup" id="define"
                    data-position-to="#map_canvas">Define</a></li>
                <li><a href=#compose data-role=button data-icon=gear
                    data-inline="true" data-rel="popup" data-transition="slidedown"
                    data-position-to="#map_canvas">Compose</a></li>
                <li><a href=#search data-role=button data-icon=search
                    data-inline="true" id="search">Search</a></li>
            </ul>
        </div>
    </div>

现在我创建了 3 个弹出窗口（其中一个如下所示）。此外，我有一个名为场景的变量，它可以改变餐馆、地标和电影之间的状态。我的目标是，如果单击 id 为“define”的按钮，则应打开场景变量实际状态的相应弹出窗口（例如，如果场景 =“landmarks”，则应打开带有 id 地标的弹出窗口）。

<div data-role="popup" id="defineLandmarks"
        style="width: 600px; height: 750px;">
        <div style="padding: 20px;">
            <div align="center">
                <b>please define options for the landmark scenario</b>
            </div>

            <div data-role="controlgroup" data-type="horizontal">
                <table>
                    <tr>
                        <td style="width: 20%;">wiki abstract</td>
                        <td style="width: 450px;; float: right"><input type="text"
                            name="wiki_abstract" id="wiki_abstract" value=""
                            data-clear-btn="false"></td>
                    </tr>

                    <tr>
                        <td style="width: 20%;">wiki text</td>
                        <td style="width: 450px; float: right"><input type="text"
                            name="wiki_text" id="wiki_text" value="" data-clear-btn="false">

                        </td>
                    </tr>

                    <tr>
                        <td style="width: 20%;">keywords 1</td>
                        <td style="width: 450px; float: right"><input type="text"
                            name="keywords1" id="keywords1" value="" data-clear-btn="false">

                        </td>
                    </tr>

                    <tr>
                        <td style="width: 20%;">keywords 2</td>
                        <td style="width: 450px; float: right"><input type="text"
                            name="keywords2" id="keywords2" value="" data-clear-btn="false">

                        </td>
                    </tr>

                    <tr>
                        <td style="width: 20%;">keywords 3</td>
                        <td style="width: 450px; float: right"><input type="text"
                            name="keywords3" id="keywords3" value="" data-clear-btn="false">

                        </td>
                    </tr>

                    <tr>
                        <td style="width: 20%;">keywords 4</td>
                        <td style="width: 450px; float: right"><input type="text"
                            name="keywords4" id="keywords4" value="" data-clear-btn="false">

                        </td>
                    </tr>


                </table>




                <form>
                    <div data-role="controlgroup" data-type="horizontal"
                        align="center">
                        <a href="#" data-role="button" id="resetLandmarks">Reset</a> <a
                            href="#" data-role="button" id="applyLandmarks">Apply</a>
                    </div>
                </form>
            </div>
        </div>

    </div>

我尝试像这样打开弹出窗口，但它不起作用：

$("#define").click(function() {
    var s= getScenario();

    if(s=='restaurant'){
        $('#defineRestaurants').popup('open');
    }
    else if(s=='movies'){
        $('#defineMovies').popup('open');
    }
    else if(s=='landmarks'){
        $('#defineLandmarks').popup('open');
    }else{
        alert("Please choose a scenario");
    }


});
4

1 回答 1

1

看看类似的东西

$(createToggleHandler("#check", "#most", "#most"));

function createToggleHandler(id, target, scroll){
    return function(){
        $(id).click(createToggleClickHandler(target, scroll));
    }
}
function createToggleClickHandler(target, scroll){
    return function(){
        var x = $(target);
        x.toggle(500);
        $("html, body").animate({ scrollTop: $(scroll).offset().top }, 1000);
    }
}
于 2013-08-20T01:03:31.497 回答