2013-08-07 94 views
0

我正在研究可以在桌面,平板電腦和移動設備上運行的html5應用程序.am在使用進度條和對話框時遇到了困難。首先,我一直使用jquery mobile,但是它的唯一直到現在,當我想要結合jQuery UI使用進度條和對話框彈出窗口時,我才意識到兩者一起使用時效果不佳。這兩個插件jquery mobile和jquery ui不兼容

<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>dialogbox demo</title> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" /> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> 
    <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script> 
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> 

</head> 
<body>   
<script> 
    $(document).ready(function() { 
     $().lowStorageSpace(); 
    }); 

     $.fn.lowStorageSpace = function() { 
      $('<div></div>').appendTo('body') 
      .html('<div><h5>You are running out of space.backup or sync data before you proceed!!</h5></div>') 
      .dialog({ 
       modal: true, title: 'Low storage space!!', zIndex: 10000, autoOpen: true, 
       width: 'auto', resizable: true, 
       buttons: { 
        Sync: function() { 
         //sync(); 
         $(this).dialog("close"); 
        }, 
        Backup: function() { 
         // backup(); 
         $(this).dialog("close"); 
        }, 
        Cancel: function() { 
         //cancel(); 
         $(this).dialog("close"); 
        } 
       }, 
       close: function (event, ui) { 
        $(this).remove(); 
       } 
      }); 

     } 

</script> 
</body> 
</html> 

的上面的代碼效果很好,當我註釋掉jquery.mobile-1.2.0.min.js效果的示例代碼。但我真的需要它在我的完整的應用程序。 任何幫助我如何使用這兩個將不勝感激。 我已經看到很多類似的問題,但非提前在此感謝我解決了我的問題 。

回答

0

這是我同意的衝突。在jquery ui和jquery mobile的所有例子中,我已經看到我沒有看到代碼顯示這兩個可以在同一個腳本上使用。我會用兩個不同的腳本,一個用於UI,一個用於手機。這樣,這裏不應該有任何衝突。

+0

@John ...在我的情況下,使用不同的腳本不會工作,因爲我正在一個html頁面上工作,其中有幾個頁面。 – JoseLuke