如何将它应用于jquerymobile中的所有页面

时间:2012-04-03 01:52:49

标签: javascript jquery codeigniter jquery-mobile

我使用jquerymobile和codeigniter框架,我遇到了问题

我在下面有这个脚本,我想让它在我的所有页面中触发。

<script type="text/javascript">
        var i = 0;
    $(function() {
        $("#h1").hide();
        $("#h2").hide();
        $("#h3").hide();
        <? if ($account_type != 'prepaid' && $account_type != 'PREPAID') : ?>
            $("#h4").hide();
        <? endif ?>
        head();
        setInterval('head()',2000);
    });

        function head()
        {
            i++;
            if (i==1) h1();
            if (i==2) h2();
            <? if ($account_type == 'prepaid' || $account_type == 'PREPAID') : ?>
                if (i==3){ h3(); i=0; }
            <? else : ?>
                if (i==3) h3();
                if (i==4){ h4(); i=0; }
            <? endif ?>
        }

        function h1()
        {
            <? if ($account_type == 'prepaid' || $account_type == 'PREPAID') : ?>
                $("#h3").hide();
            <? else : ?>
                $("#h4").hide();
            <? endif ?>
            $("#h1").fadeIn().delay(1000);
            //h2();
        }

        function h2()
        {
            $("#h1").hide();
            $("#h2").fadeIn().delay(1000);
        }

        function h3()
        {
            $("#h2").hide();
            $("#h3").fadeIn().delay(1000);
        }

        function h4()
        {
            $("#h3").hide();
            $("#h4").fadeIn().delay(1000);
        }

    </script>

尝试将$(function(){替换为$(document).bind('pageinit',function(){但仍然不起作用。该函数仅在我的index.php中触发而不在其他页面中触发。请帮忙。

3 个答案:

答案 0 :(得分:1)

试试这个。 使用以下脚本准备索引文件

<script type="text/javascript">
var i = 0;
$(function() {
    start();        
});

function start(){

    $("#h1").hide();
    $("#h2").hide();
    $("#h3").hide();
    <? if ($account_type != 'prepaid' && $account_type != 'PREPAID') : ?>
        $("#h4").hide();
    <? endif ?>
    head();
    setInterval('head()',2000);
}

    function head()
    {
        i++;
        if (i==1) h1();
        if (i==2) h2();
        <? if ($account_type == 'prepaid' || $account_type == 'PREPAID') : ?>
            if (i==3){ h3(); i=0; }
        <? else : ?>
            if (i==3) h3();
            if (i==4){ h4(); i=0; }
        <? endif ?>
    }

    function h1()
    {
        <? if ($account_type == 'prepaid' || $account_type == 'PREPAID') : ?>
            $("#h3").hide();
        <? else : ?>
            $("#h4").hide();
        <? endif ?>
        $("#h1").fadeIn().delay(1000);
        //h2();
    }

    function h2()
    {
        $("#h1").hide();
        $("#h2").fadeIn().delay(1000);
    }

    function h3()
    {
        $("#h2").hide();
        $("#h3").fadeIn().delay(1000);
    }

    function h4()
    {
        $("#h3").hide();
        $("#h4").fadeIn().delay(1000);
    }

</script>

现在,在初始化时调用此函数,如下所示

$('#my_page').live('pageinit',function(event){
start();

});

答案 1 :(得分:1)

试试这个:

$(document).bind('mobileinit', function () {
    var i = 0;

    $(function() {
        $("#h1").hide();
        $("#h2").hide();
        $("#h3").hide();
        <? if ($account_type != 'prepaid' && $account_type != 'PREPAID') : ?>
            $("#h4").hide();
        <? endif ?>
        head();
        setInterval('head()',2000);
    });

    function head()
    {
        i++;
        if (i==1) h1();
        if (i==2) h2();
        <? if ($account_type == 'prepaid' || $account_type == 'PREPAID') : ?>
            if (i==3){ h3(); i=0; }
        <? else : ?>
            if (i==3) h3();
            if (i==4){ h4(); i=0; }
        <? endif ?>
    }

    function h1()
    {
        <? if ($account_type == 'prepaid' || $account_type == 'PREPAID') : ?>
            $("#h3").hide();
        <? else : ?>
            $("#h4").hide();
        <? endif ?>
        $("#h1").fadeIn().delay(1000);
        //h2();
    }

    function h2()
    {
        $("#h1").hide();
        $("#h2").fadeIn().delay(1000);
    }

    function h3()
    {
        $("#h2").hide();
        $("#h3").fadeIn().delay(1000);
    }

    function h4()
    {
        $("#h3").hide();
        $("#h4").fadeIn().delay(1000);
    }
}).trigger('mobileinit');

答案 2 :(得分:1)

如果你想在其他页面中开火。在所有页面中包含脚本。使用

<script src="common.js"></script>