当前位置： 文江博客话题详情

jQuery Mobile 附加 html 代码

发布于 2024-11-29 15:09:28 字数 2773 浏览 1 评论 0原文

我想使用 jQuery/jQuery mobile 将一些代码附加到页面，我只想附加一次，而不是每次访问该页面时都附加一些代码。

**最终编辑**

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Page Title</title>   
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>

    <script>
    //$(document).ready(function()                  // get error when I use this
    $('#page1').live('pageshow', function ()                
        {  
            //  alert("!");
                var section1 = "<p>some code for page 1...</p>";                
                myClone1 = $(section1);                                 
                myClone1.appendTo("#placeholder1").trigger('create');
        });             

    $('#page2').live('pageshow', function ()                
        {  
            //  alert("!");
                var section2 = "<p>some code for page 2...</p>";
                myClone2 = $(section2);                 
                myClone2.appendTo("#placeholder2").trigger('create');

        });         
        </script>

</head> 
<body> 
    <div data-role="page" id="page1">       
            <div data-role="content">
                    <div data-role="navbar">
                    <ul><li><a data-icon="home" data-transition="none" id="page1" href="#page1">page1</a></li>
                        <li><a data-icon="grid" data-transition="none"  id="page2" href="#page2">page2</a></li>             
                    </ul>
                    </div>
                <div id="placeholder1">Page 1</div>
            </div>      
    </div>

    <div data-role="page" id="page2">       
            <div data-role="content">
                    <div data-role="navbar">
                    <ul><li><a data-icon="home" data-transition="none" id="page1" href="#page1">page1</a></li>
                    <li><a data-icon="grid" data-transition="none"  id="page2" href="#page2">page2</a></li>                                 
                    </ul>
                    </div>
                <div id="placeholder2">Page 2</div>
            </div>
        </div>      
    </div>


</body>
</html>
原文

I would like to append some code to a page using jQuery/jQuery mobile, I would only like to append once not on each visit to the page.

** final edit **

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Page Title</title>   
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>

    <script>
    //$(document).ready(function()                  // get error when I use this
    $('#page1').live('pageshow', function ()                
        {  
            //  alert("!");
                var section1 = "<p>some code for page 1...</p>";                
                myClone1 = $(section1);                                 
                myClone1.appendTo("#placeholder1").trigger('create');
        });             

    $('#page2').live('pageshow', function ()                
        {  
            //  alert("!");
                var section2 = "<p>some code for page 2...</p>";
                myClone2 = $(section2);                 
                myClone2.appendTo("#placeholder2").trigger('create');

        });         
        </script>

</head> 
<body> 
    <div data-role="page" id="page1">       
            <div data-role="content">
                    <div data-role="navbar">
                    <ul><li><a data-icon="home" data-transition="none" id="page1" href="#page1">page1</a></li>
                        <li><a data-icon="grid" data-transition="none"  id="page2" href="#page2">page2</a></li>             
                    </ul>
                    </div>
                <div id="placeholder1">Page 1</div>
            </div>      
    </div>

    <div data-role="page" id="page2">       
            <div data-role="content">
                    <div data-role="navbar">
                    <ul><li><a data-icon="home" data-transition="none" id="page1" href="#page1">page1</a></li>
                    <li><a data-icon="grid" data-transition="none"  id="page2" href="#page2">page2</a></li>                                 
                    </ul>
                    </div>
                <div id="placeholder2">Page 2</div>
            </div>
        </div>      
    </div>


</body>
</html>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（3）

∞梦里开花 2024-12-06 15:09:28

您可以在实际附加之前检查要附加的代码是否存在。这样，在后续访问该页面时，将不会添加数据：

$('#page1').live('pageshow', function ()                
{  
    //  alert("!");
    if ($(this).find('p.appended_code').length === 0) {
        var section1 = "<p class='appended_code'>some code for page 1...</p>";                
        myClone1 = $(section1);                                 
        myClone1.appendTo("#placeholder1").trigger('create');
    }
});

请注意，我将“append_code”类添加到您要附加的段落标记中，这是我用来检查附加代码是否存在的选择器。

--更新--

如果您使用基于数字的命名约定，您还可以稍微清理一下代码：

var pageData = new Array();
pageData[1] = "<p class='appended_class'>some code for page 1...</p>";
pageData[2] = "<p class='appended_class'>some code for page 2...</p>";
$('div[id^="page"]').live('pagebeforeshow', function () {
    if ($(this).find('p.appended_class').length === 0) {
        var page_num = $(this).attr('id').replace('page', '');
        $("#placeholder" + page_num).append(pageData[page_num]).trigger('create');
    }
});

请注意，div[id^="page"] 选择器搜索带有以“page”开头的id

这是给你的jsfiddle： http://jsfiddle.net/S3wE6/1/

如果如果您希望在初始加载时附加数据，我建议将数据附加到函数中并在 $(document).ready(); 上调用它的代码行

You can check for the existence of the code you are appending before actually appending. That way on subsequent visits to the page the data will not be added:

$('#page1').live('pageshow', function ()                
{  
    //  alert("!");
    if ($(this).find('p.appended_code').length === 0) {
        var section1 = "<p class='appended_code'>some code for page 1...</p>";                
        myClone1 = $(section1);                                 
        myClone1.appendTo("#placeholder1").trigger('create');
    }
});

Note that I added the 'appended_code' class to the paragraph tag that you are appending and that is the selector I used to check for the existence of appended code.

--Update--

You can also clean-up the code a bit if you are using naming conventions based on numbers:

var pageData = new Array();
pageData[1] = "<p class='appended_class'>some code for page 1...</p>";
pageData[2] = "<p class='appended_class'>some code for page 2...</p>";
$('div[id^="page"]').live('pagebeforeshow', function () {
    if ($(this).find('p.appended_class').length === 0) {
        var page_num = $(this).attr('id').replace('page', '');
        $("#placeholder" + page_num).append(pageData[page_num]).trigger('create');
    }
});

Note that the div[id^="page"] selector searches for divs with an id that starts with "page"

Here is a jsfiddle for ya: http://jsfiddle.net/S3wE6/1/

If you want the data to be appended on the initial load I would recommend making the line of code where the data is appended into a function and calling it on $(document).ready();

回复 原文
你在我安 2024-12-06 15:09:28

好吧，这有点棘手，但这是一个实时版本：

JS:

var elem_id;
var appendToStatus = {};
appendToStatus['page1'] = true;
appendToStatus['page2'] = true;

$('div').live('pageshow', function() {  
    elem_id = $(this).attr('id');
    appendToStatus[elem_id] = fnCreateGroups(elem_id, appendToStatus[elem_id]);
}); 

function fnCreateGroups(elem_id, appendToStatus) {
    if(appendToStatus == true) {
        var section = "<p>some code for " + elem_id + "...</p>";
        myClone = $(section);               
        myClone.appendTo("#" + elem_id + "_placeholder").trigger('create');
        return false;
    }               
}

HTML:

<div data-role="page" id="page1">       
        <div data-role="content">
                <div data-role="navbar">
                <ul><li><a data-icon="home" data-transition="none" href="#page1">page1</a></li>
                    <li><a data-icon="grid" data-transition="none" href="#page2">page2</a></li>             
                </ul>
                </div>
            <div id="page1_placeholder">Page 1</div>
        </div>      
</div>

<div data-role="page" id="page2">       
    <div data-role="content">
            <div data-role="navbar">
                <ul><li><a data-icon="home" data-transition="none" href="#page1">page1</a></li>
                    <li><a data-icon="grid" data-transition="none" href="#page2">page2</a></li>             
                </ul>
            </div>
        <div id="page2_placeholder">Page 2</div>
    </div>
</div>

ok this was a little tricky but here is a live version:

JS:

var elem_id;
var appendToStatus = {};
appendToStatus['page1'] = true;
appendToStatus['page2'] = true;

$('div').live('pageshow', function() {  
    elem_id = $(this).attr('id');
    appendToStatus[elem_id] = fnCreateGroups(elem_id, appendToStatus[elem_id]);
}); 

function fnCreateGroups(elem_id, appendToStatus) {
    if(appendToStatus == true) {
        var section = "<p>some code for " + elem_id + "...</p>";
        myClone = $(section);               
        myClone.appendTo("#" + elem_id + "_placeholder").trigger('create');
        return false;
    }               
}

HTML:

<div data-role="page" id="page1">       
        <div data-role="content">
                <div data-role="navbar">
                <ul><li><a data-icon="home" data-transition="none" href="#page1">page1</a></li>
                    <li><a data-icon="grid" data-transition="none" href="#page2">page2</a></li>             
                </ul>
                </div>
            <div id="page1_placeholder">Page 1</div>
        </div>      
</div>

<div data-role="page" id="page2">       
    <div data-role="content">
            <div data-role="navbar">
                <ul><li><a data-icon="home" data-transition="none" href="#page1">page1</a></li>
                    <li><a data-icon="grid" data-transition="none" href="#page2">page2</a></li>             
                </ul>
            </div>
        <div id="page2_placeholder">Page 2</div>
    </div>
</div>
回复 原文
洒一地阳光 2024-12-06 15:09:28

这似乎有效......只需进行最小的更改。仅添加 pagecreate 事件。

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Page Title</title>   
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>

    <script>
    $('#page1').live('pagecreate', function ()              
        {  
                var section1 = "<p>some code for page 1...</p>";                
                myClone1 = $(section1);                                 
                myClone1.appendTo("#placeholder1").trigger('create');
        });             

    $('#page2').live('pagecreate', function ()              
        {  
                var section2 = "<p>some code for page 2...</p>";
                myClone2 = $(section2);                 
                myClone2.appendTo("#placeholder2").trigger('create');

        });         
        </script>

</head> 
<body> 
    <div data-role="page" id="page1">       
            <div data-role="content">
                    <div data-role="navbar">
                    <ul><li><a data-icon="home" data-transition="none" id="page1" href="#page1">page1</a></li>
                        <li><a data-icon="grid" data-transition="none"  id="page2" href="#page2">page2</a></li>             
                    </ul>
                    </div>
                <div id="placeholder1">Page 1</div>
            </div>      
    </div>

    <div data-role="page" id="page2">       
            <div data-role="content">
                    <div data-role="navbar">
                    <ul><li><a data-icon="home" data-transition="none" id="page1" href="#page1">page1</a></li>
                    <li><a data-icon="grid" data-transition="none"  id="page2" href="#page2">page2</a></li>                                 
                    </ul>
                    </div>
                <div id="placeholder2">Page 2</div>
            </div>
        </div>      
    </div>


</body>
</html>

This seem to work... with minimal changes. Only add on pagecreate event.

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Page Title</title>   
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>

    <script>
    $('#page1').live('pagecreate', function ()              
        {  
                var section1 = "<p>some code for page 1...</p>";                
                myClone1 = $(section1);                                 
                myClone1.appendTo("#placeholder1").trigger('create');
        });             

    $('#page2').live('pagecreate', function ()              
        {  
                var section2 = "<p>some code for page 2...</p>";
                myClone2 = $(section2);                 
                myClone2.appendTo("#placeholder2").trigger('create');

        });         
        </script>

</head> 
<body> 
    <div data-role="page" id="page1">       
            <div data-role="content">
                    <div data-role="navbar">
                    <ul><li><a data-icon="home" data-transition="none" id="page1" href="#page1">page1</a></li>
                        <li><a data-icon="grid" data-transition="none"  id="page2" href="#page2">page2</a></li>             
                    </ul>
                    </div>
                <div id="placeholder1">Page 1</div>
            </div>      
    </div>

    <div data-role="page" id="page2">       
            <div data-role="content">
                    <div data-role="navbar">
                    <ul><li><a data-icon="home" data-transition="none" id="page1" href="#page1">page1</a></li>
                    <li><a data-icon="grid" data-transition="none"  id="page2" href="#page2">page2</a></li>                                 
                    </ul>
                    </div>
                <div id="placeholder2">Page 2</div>
            </div>
        </div>      
    </div>


</body>
</html>
回复 原文
~没有更多了~

关于作者

若能看破又如何

暂无简介

0 文章
0 评论
24 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

醉城メ夜风

文章 0 评论 0

远昼

文章 0 评论 0

平生欢

文章 0 评论 0

微凉

文章 0 评论 0

Honwey

文章 0 评论 0

qq_ikhFfg

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文