Медленное обновление радиокнопки jQuery Mobile? - PullRequest
Новая
       4

Медленное обновление радиокнопки jQuery Mobile?

1 голос
/ 03 апреля 2012

jQuery 1.7.1 и jQuery Mobile 1.1.0RC1

Здравствуйте, у меня на сайте есть переключатель JQM, и я программно изменяю его значение в зависимости от условия, которое я проверяю на странице.Все работает нормально, но это происходит не очень "гладко", я имею в виду, что он очень хорошо виден пользователю, когда он меняется, то есть он находится в своем первоначальном состоянии в течение полсекунды или около того, а затем переключается.Может быть, я немного придирчив, но я бы хотел, чтобы переключение было прозрачным для пользователя.Я все еще пытаюсь понять различные события "page *" в JQM и подумал, что если я сделаю это на pagebeforeshow или pagebeforecreate, то это произойдет, но это не так.

Я пытался сделатьjsFiddle для него (мой первый раз), там это происходит довольно мгновенно (может быть, что-то связано с моим выбором onDomReady в опциях?), но должно дать вам представление о том, о чем я говорю ... на моем сайтеОчевидно, что выбор находится в состоянии «Выкл.» в тот момент, когда страница загружается, а затем переключается на «Вкл.».Это не так уж важно, я прошу больше помочь мне понять различные события * страницы.

http://jsfiddle.net/pdjeU/

Подробнее:

Веб-приложениеэто в основном браузер документов, сконструированный так: файлы index.html содержат список документов, или, скорее, список ссылок на оглавления доступных документов.Каждый из этих оглавлений содержит ссылки на разделы настоящего документа.

Код выглядит следующим образом ... Вероятно, он изобилует плохим стилем, так как я новичок.Код для моей проблемы с переключателями находится в строках 30-39 файла custom2.js и 23-28 в файле ch2-sec1.html.Также обратите внимание, что строка кода console.log($("link[href$='styleDay.css']").length); в custom2.js выводит «2», когда таблица стилей заканчивается styleDay.css, и я понятия не имею, почему (я ожидаю, что это будет «1»).Однако моя главная проблема заключается в том, что при просмотре файлов содержимого наблюдается заметная задержка (например, ch2-sec1.html, как показано ниже), а код переключает переключатель в «Дневной режим», когда условие выполняется ...это нельзя закодировать так, чтобы оно уже перевернулось к тому времени, когда страница станет видимой?

root / index.html ... 

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" type="text/css" href="Style/styleNight.css" />
        <link rel="stylesheet" type="text/css" href="Style/jquery.mobile.simpledialog.min.css" />
        <script type="text/javascript" src="JS/jquery-1.7.1.min.js"> </script>
        <script type="text/javascript" src="JS/jquery.mobile-1.1.0-rc.1.min.js"> </script>
        <script type="text/javascript" src="JS/jquery.mobile.simpledialog2.min.js"> </script>
        <script type="text/javascript" src="JS/custom2.js"> </script>
    </head>
    <body>
        <div data-role="page" data-theme="b" id="main">
            <div data-role="header">
                <div style="float:left; width:20%">
                    <a id="openOptions" href="#" data-role="button" data-icon="gear">Settings</a>
                </div>
                <div style="float:left; width:60%; text-align:center; padding-top:5px">
                    <h2>DOCUMENT LIST</h2>
                </div>
                <div style="float:left; width:20%">
                    <a id="openSearch" href="#" data-role="button" data-icon="search" data-iconpos="right">Search</a>
                </div>
            </div>
            <!-- /header -->
            <div data-role="content" style="clear:both">
                <div data-role="controlgroup">
                    <a href="doc1-toc.html">Document 1</a>
                    <a href="doc2-toc.html">Document 2</a>
                    <a href="doc3-toc.html">Document 3</a>
                    <a href="doc4-toc.html">Document 4</a>
                    <a href="doc5-toc.html">Document 5</a>
                </div>
            </div>
            <!-- /content -->
        </div>
        <!-- /page -->
    </body>
</head>

root / doc1-toc.html... 

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <link rel="stylesheet" type="text/css" href="Style/ftidStyleNight.css"/>
        <script type="text/javascript" src="JS/jquery-1.7.1.min.js"> </script>
        <script type="text/javascript" src="JS/jquery.mobile-1.1.0-rc.1.min.js"> </script>
        <script type="text/javascript" src="JS/custom2.js"> </script>
    </head>
    <body>
        <div data-role="page" data-theme="b">
            <div data-role="header" style="position:relative">
                <div style="float:left"><a href="index.html" data-role="button" data-icon="home">Home</a></div>
                <h1>Document 1 TOC</h1>
            </div>
            <div data-role="content">
                <div data-role="collapsible-set">
                    <div data-role="collapsible" data-collapsed="true">
                        <h3>
                            <font color="white">Chapter 1</font>
                        </h3>
                        <ul data-role="listview" data-theme="c">
                            <li><a href="HTML/ch1-sec1.html">Chapter 1 Section 1</a></li>
                        </ul>
                    </div>
                    <div data-role="collapsible" data-collapsed="true">
                        <h3>
                            <font color="white">Chapter 2</font>
                        </h3>
                        <ul data-role="listview" data-theme="c">
                            <li><a href="HTML/ch2-sec1.html">Chapter 2 Section 1</a></li>
                            <li><a href="HTML/ch2-sec2.html">Chapter 2 Section 2</a></li>
                            <li><a href="HTML/ch2-sec3.html">Chapter 2 Section 3</a></li>
                            <li><a href="HTML/ch2-sec4.html">Chapter 2 Section 4</a></li>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

root / HTML / ch2-sec1.html ... 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title> </title>
        <link rel="stylesheet" type="text/css" href="../Style/styleNight.css"/>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <script type="text/javascript" src="../js/jquery-1.7.1.min.js"> </script>
        <script type="text/javascript" src="../js/jquery.mobile-1.1.0-rc.1.min.js"> </script>
        <script type="text/javascript" src="../js/custom1.js"> </script>
        <script type="text/javascript" src="../js/custom2.js"> </script>
    </head>
    <body>
        <div data-role="page" id="doc1-ch2-sec1">
            <div id="header" data-role="header" data-theme="b" data-position="fixed" data-tap-toggle="false">
                <div id="optionsDiv">
                    <div style="float:left; width:25%; text-align:left">
                        <a href="../index.html" data-role="button" data-icon="home" data-theme="b">Home</a>
                        <a href="ch2-sec1.html" id="previous" data-role="button" data-icon="arrow-l" data-theme="b">Previous</a>
                    </div>
                    <div style="float:left; width:50%">
                        <div class="containing-element">
                            <fieldset data-role="controlgroup" data-type="horizontal" id="day-night">
                                <input type="radio" name="radio-choice-1" id="day" value="../Style/styleDay.css" data-theme="b"/>
                                <label for="day">Day Mode</label>
                                <input type="radio" name="radio-choice-1" id="night" value="../Style/styleNight.css" checked="checked" data-theme="b"/>
                                <label for="night">Night Mode</label>
                            </fieldset>
                        </div>
                    </div>
                    <div style="float:left; width:25%; text-align:right">
                        <a href="../doc1-toc.html" data-role="button" data-icon="arrow-u" data-theme="b">TOC</a>
                        <a href="ch2-sec3.html" id="next" data-role="button" data-icon="arrow-r">Next</a>
                    </div>
                </div>
            </div>
            <!-- Main content from legacy data source ->
        </div>
    </body>
</html>

root / JS / custom2.js ... 

$("#main").live("pageinit",function(){
      $('<div>').simpledialog2({
        mode: 'blank',
        animate:false,
        top:10,
        left:10,
        themeDialog:'a',
        headerText: false,
        headerClose: false,
        blankContent : 
          "<span>Active Checklists:&nbsp;</span><select name='slider' id='flip-b' data-role='slider' data-mini='true' data-theme='a'><option value='off'>Off</option><option value='on'>On</option></select>"+
      "<a rel='close' data-role='button' data-theme='b' style='color:white' href='#'>Cancel</a>"
      });
    });
    $(document).on('click', '#openSearch', function() {
      $('<div>').simpledialog2({
        mode: 'blank',
        themeDialog:'a',
        animate:false,
        top:10,
        left:'60%',
        headerText: false,
        headerClose: false,
        blankContent : 
          "<input type='search' name='search' id='searc-basic' value='' placeholder='Under Construction ...' disabled='disabled' data-mini='true' data-theme='c' />"+
      "<a rel='close' data-role='button' style='color:white' href='#' data-theme='b'>Cancel</a>"
      });
    }); 
});
$("div[data-role='page']").live("pageshow",function(){
    console.log($("link[href$='styleDay.css']").length);
    if ($("link[href$='styleDay.css']").length > 0){
        $("#day").attr("checked",true).checkboxradio("refresh");
        $("#night").removeAttr("checked").checkboxradio("refresh");
    }
    $("input[name='radio-choice-1']").on('change mousedown',function(event) {
           $("link").attr("href",$("input[checked][name='radio-choice-1']").val());
     });
});
...