2013-10-06 24 views
0

我想升級在1.0.1和jquery 1.6.4版本上運行的舊jquery移動網站到最新版本,並有問題取代某些jquery部分工作在一個選擇彈出式按鈕。 以下是舊版本jqm 1.3.2和jquery 1.9.1從jqm 1.0.1和jquery 1.6.4升級打破我的彈出窗口

   <div class="ui-selectmenu ui-overlay-shadow ui-corner-all ui-body-a pop in" style="top: 30px; right: 30px;"> 
        <div class="ui-header ui-bar-a"> 

       <h1 class="ui-title">Search Results</h1> 

       <a class="ui-btn-left ui-btn ui-btn-up-a ui-btn-icon-notext ui-btn-corner-all ui-shadow" href="#" data-iconpos="notext" data-icon="delete" title="Close" data-theme="a" style="display: none;"> 
       <span class="ui-btn-inner ui-btn-corner-all"> 
       <span class="ui-btn-text">Close</span> 
       <span class="ui-icon ui-icon-delete ui-icon-shadow"></span> 
       </span> 
       </a> 

        </div> 
        <ul id="action_menu-menu" class="ui-selectmenu-list ui-listview" role="listbox" aria-labelledby="action_menu-button" data-theme="a"> 
         <li class="ui-selectmenu-placeholder ui-btn ui-btn-up-a ui-btn-icon-right ui-li ui-btn-active" data-icon="false" data-option-index="0" role="option" tabindex="0" data-theme="a" aria-selected="true"> 
          <div class="ui-btn-inner ui-li"> 
           <div class="ui-btn-text"> 
       <a class="ui-link-inherit" href="#">Search Results</a> 

           </div> 
          </div> 
         </li> 
         <li class="ui-btn ui-btn-icon-right ui-li ui-btn-up-a" data-icon="false" data-option-index="1" role="option" tabindex="-1" data-theme="a" aria-selected="false"> 
          <div class="ui-btn-inner ui-li"> 
           <div class="ui-btn-text"> 
       <a class="ui-link-inherit" href="#">Home</a> 

           </div> 
          </div> 
         </li> 
         <li class="ui-btn ui-btn-icon-right ui-li ui-btn-up-a" data-icon="false" data-option-index="2" role="option" tabindex="-1" data-theme="a" aria-selected="false"> 
          <div class="ui-btn-inner ui-li"> 
           <div class="ui-btn-text"> 
       <a class="ui-link-inherit" href="#">Email</a> 

           </div> 
          </div> 
         </li> 
        </ul> 
       </div> 

而且follwoing生成的HTML是我當前的代碼生成的HTML

   <div id="action_menu-listbox-screen" class="ui-popup-screen in"></div> 
       <div id="action_menu-listbox-popup" class="ui-popup-container ui-popup-active" style="max-width: 1564px; top: 30.0001px; left: 14px;" tabindex="0"> 
        <div id="action_menu-listbox" class="ui-selectmenu ui-popup ui-body-a ui-overlay-shadow ui-corner-all"> 
         <div class="ui-header ui-bar-a"> 

       <h1 class="ui-title">Search Results</h1> 

         </div> 
         <ul id="action_menu-menu" class="ui-selectmenu-list ui-listview" role="listbox" aria-labelledby="action_menu-button" data-theme="a" data-divider-theme="b"> 
          <li class="ui-selectmenu-placeholder ui-btn ui-btn-up-a ui-btn-icon-right ui-li ui-first-child" data-option-index="0" data-icon="false" data-placeholder="true" role="option" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-iconpos="right" data-theme="a" aria-selected="false"> 
           <div class="ui-btn-inner ui-li"> 
            <div class="ui-btn-text"> 
       <a class="ui-link-inherit" href="#" tabindex="-1">Search Results</a> 

            </div> 
           </div> 
          </li> 
          <li class="ui-btn ui-btn-icon-right ui-li ui-btn-up-a" data-option-index="1" data-icon="false" role="option" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-iconpos="right" data-theme="a" aria-selected="false"> 
           <div class="ui-btn-inner ui-li"> 
            <div class="ui-btn-text"> 
       <a class="ui-link-inherit" href="#" tabindex="-1">Home</a> 

            </div> 
           </div> 
          </li> 
          <li class="ui-btn ui-btn-icon-right ui-li ui-last-child ui-btn-up-a" data-option-index="2" data-icon="false" role="option" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-iconpos="right" data-theme="a" aria-selected="false"> 
           <div class="ui-btn-inner ui-li"> 
            <div class="ui-btn-text"> 
       <a class="ui-link-inherit" href="#" tabindex="-1">Email</a> 

            </div> 
           </div> 
          </li> 
         </ul> 
        </div> 
       </div> 
       </div> 

我並沒有改變舊的代碼,只是有一個現場的JavaScript方法,我正在努力完全理解和取代。這是如下

<script type="text/javascript"> 
        $(document).bind("mobileinit", function(){ 
        $.mobile.listview.prototype.options.theme= "c"; 
         $.mobile.defaultTransition = 'none'; 
         $.mobile.pushStateEnabled = false; 
         $.extend( $.mobile , { 
           ajaxFormsEnabled : false, 
           ajaxLinksEnabled : false, 
            ajaxEnabled:false, 
            // loadingMessage: false 
         }); 
        }); 
       </script> 

     <script src="</jquery.mobile-1.0.1.min.js" type="text/javascript"></script> 
     <%--Script added by B37914 for CR43399 on 7th March,2012--%> 
     <script src="/m_alert.js" type="text/javascript"></script> 
     <script src="/m_common.js" type="text/javascript"></script> 

     <script> 
      var mobileMainViewUrl = 'http;//www.yahoo.com'; 
      var urlForEmailAction = document.location.href; 

      $('#header-logo').click(function(){alert("this is the header alert");}); 

      $(document).bind("mobileinit", function(){ 
        $.mobile.defaultTransition = 'none';   
      }); 

      ** 

$( 「選擇[ID = 'action_menu']」)生活( 「改變」,的ActionHandler)。

**

  $(document).ready(function(){  
       if($("li[class*='ui-btn-icon-right']")!=null){ 
        $("li[class*='ui-btn-icon-right']").each(function(ind,elm){ 
         var anch=$(this).find("a[class*='ui-link-inherit']"); 
         var arrowIcn=$(elm).find("span[class='ui-icon ui-icon-arrow-r ui-icon-shadow']"); 
         if(anch !=null && arrowIcn!=null){ 
          $(arrowIcn).appendTo(anch); 
         } 
        }); 
        } 
      }); 

      function showActionMenu(assetId,assetType){ 

       var language=document.getElementById("m_lang").value; 
       var pageTitle = $('title').html(); 
       pageTitle = pageTitle.replace("&amp;","and"); 
       pageTitle = pageTitle.replace("amp;",""); 
       pageTitle = pageTitle.replace("&","and"); 
       //changed by b36050 for cr-48634 on 17 jan 2013 
       callActionButton('action_menu',pageTitle,urlForEmailAction,true,assetId,assetType,deleteFavorite,language); 

       } 

     </script> 

請檢查產生這兩個HTML的,並在http://jsfiddle.net/hgafoor/85qy3/

的.js文件我已經嘗試了各種選擇,但我不能夠以某種方式得到的代碼當我使用點擊時選項的價值。我曾嘗試使用#action_menu菜單作爲選擇器,並嘗試過綁定和委託我不明白爲什麼在新版本中,action_menu的id被添加爲主要div來生成彈出框而不是ui-selectmenu。我一直停留在這一段時間現在將是一個偉大的投手,如果有人可以幫助我這個

+0

您是否需要一些新功能?如果沒有,我建議不要升級。 – Blazemonger

+0

全局設置'mobileinit'應該在jQ之後和jQM之前加載。使用'.on'代替'.live',並且不要在jQM中使用'.ready()',使用'pageinit'或其他jQM事件。 – Omar

+0

我想這是一個錯字? '