2016-10-21 4 views
0

イオンフレームワークを使用してモバイルアプリケーションを作成しようとしています。私はAngularjsとHTMLを使用しました。また、AJAXを使用してWebサービスを呼び出しました。 私はコーディングとアンドロイドの開発が初めてです。 出力サイズを画面サイズに合わせて調整する際の出力応答の作成には、どのように役立つ必要がありますか。 ご迷惑をおかけして申し訳ありません。 以下は私のコードです。私が見ることができる画面にデータを合わせる...応答出力を作成する

function myCall() { 
 
    var value1 = document.getElementById('Text1').value; 
 
    var value2 = document.getElementById('Text2').value; 
 
    var result = ""; 
 
    var request = $.ajax({ 
 
    url: "http://192.168.0.103/PdfReportWebservice.asmx/LoginDetails?", 
 
    data: { UserID: value1, Password: value2 }, 
 
    type: "GET", 
 
    dataType: "JSON" 
 
    }); 
 

 
    request.done(function (msg) { 
 
    result = JSON.stringify(msg); 
 
    $.each(msg, function (i, val) { 
 
     if (val.Result == "Login successful") { 
 
     window.location = ("http://192.168.0.103/PdfReport.htm"); 
 
     } 
 
     else { 
 
     window.location = ("http://192.168.0.103/Login.htm"); 
 
     alert("Login failed"); 
 
     } 
 
    }); 
 
    }); 
 
    request.fail(function (jqXHR, textStatus) { 
 
    alert("Request failed: " + textStatus); 
 

 
    }); 
 
}
form { 
 
    border: 3px solid #f1f1f1; 
 
} 
 

 
input[type=text], input[type=password] { 
 
    width: 100%; 
 
    padding: 12px 20px; 
 
    margin: 8px 0; 
 
    display: inline-block; 
 
    border: 1px solid #ccc; 
 
    box-sizing: border-box; 
 
} 
 

 
button { 
 
    background-color: #4CAF50; 
 
    color: white; 
 
    padding: 14px 20px; 
 
    margin: 8px 0; 
 
    border: none; 
 
    cursor: pointer; 
 
    width: 100%; 
 
} 
 

 
.cancelbtn { 
 
    width: auto; 
 
    padding: 10px 18px; 
 
    background-color: #f44336; 
 
} 
 

 
.imgcontainer { 
 
    text-align: center; 
 
    margin: 24px 0 12px 0; 
 
} 
 

 

 
.container { 
 
    padding: 16px; 
 
} 
 

 
span.psw { 
 
    float: right; 
 
    padding-top: 16px; 
 
} 
 
body h2{ 
 
    color:darkblue; 
 
} 
 

 
/* Change styles for span and cancel button on extra small screens */ 
 
@media screen and (max-width: 300px) { 
 
    span.psw { 
 
    display: block; 
 
    float: none; 
 
    } 
 
    .cancelbtn { 
 
    width: 100%; 
 
    } 
 
}
<script type="text/javascript" src="http://code.angularjs.org/1.0.7/angular.min.js"></script> 
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
 

 
<form > 
 
    <div class="imgcontainer"> 
 
    &nbsp;</div> 
 
    <div class="container"> 
 
    <label><b>Username</b></label> 
 
    <input id="Text1" type="text"/> 
 
    <label><b>Password</b></label> 
 
    <input id="Text2" type="text"/> 
 
    <button type="submit" value="submit" onclick="myCall()">login</button> 
 

 
    <input type="checkbox" checked="checked"/> Remember me 
 
    </div>   
 
    <div class="container" style="background-color:#f1f1f1"> 
 
    <button type="button" class="cancelbtn">Cancel</button> 
 
    <span class="psw">Forgot <a href="#">password?</a></span> 
 

 
    </div> 
 
    <div id="mybox"> 
 
    </div> 
 
</form>

+0

あなたは上記の持っているコードは、角とは何の関係もありません、それは主にjQueryのです。 ** jQuery **と** ionic **で正しくタグ付けして、あなたの質問に対する現在の視聴状況を取得してください。 – vas

答えて

0

ことの一つが欠落していたビューポートです。

<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 

私はこれがあなたをheplsを願って、以下のコード内で同じ追加。

function myCall() { 
 
    var value1 = document.getElementById('Text1').value; 
 
    var value2 = document.getElementById('Text2').value; 
 
    var result = ""; 
 
    var request = $.ajax({ 
 
    url: "http://192.168.0.103/PdfReportWebservice.asmx/LoginDetails?", 
 
    data: { UserID: value1, Password: value2 }, 
 
    type: "GET", 
 
    dataType: "JSON" 
 
    }); 
 

 
    request.done(function (msg) { 
 
    result = JSON.stringify(msg); 
 
    $.each(msg, function (i, val) { 
 
     if (val.Result == "Login successful") { 
 
     window.location = ("http://192.168.0.103/PdfReport.htm"); 
 
     } 
 
     else { 
 
     window.location = ("http://192.168.0.103/Login.htm"); 
 
     alert("Login failed"); 
 
     } 
 
    }); 
 
    }); 
 
    request.fail(function (jqXHR, textStatus) { 
 
    alert("Request failed: " + textStatus); 
 

 
    }); 
 
}
form { 
 
    border: 3px solid #f1f1f1; 
 
} 
 

 
input[type=text], input[type=password] { 
 
    width: 100%; 
 
    padding: 12px 20px; 
 
    margin: 8px 0; 
 
    display: inline-block; 
 
    border: 1px solid #ccc; 
 
    box-sizing: border-box; 
 
} 
 

 
button { 
 
    background-color: #4CAF50; 
 
    color: white; 
 
    padding: 14px 20px; 
 
    margin: 8px 0; 
 
    border: none; 
 
    cursor: pointer; 
 
    width: 100%; 
 
} 
 

 
.cancelbtn { 
 
    width: auto; 
 
    padding: 10px 18px; 
 
    background-color: #f44336; 
 
} 
 

 
.imgcontainer { 
 
    text-align: center; 
 
    margin: 24px 0 12px 0; 
 
} 
 

 

 
.container { 
 
    padding: 16px; 
 
} 
 

 
span.psw { 
 
    float: right; 
 
    padding-top: 16px; 
 
} 
 
body h2{ 
 
    color:darkblue; 
 
} 
 

 
/* Change styles for span and cancel button on extra small screens */ 
 
@media screen and (max-width: 300px) { 
 
    span.psw { 
 
    display: block; 
 
    float: none; 
 
    } 
 
    .cancelbtn { 
 
    width: 100%; 
 
    } 
 
}
<html> 
 
    <head> 
 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
 
    <script type="text/javascript" src="http://code.angularjs.org/1.0.7/angular.min.js"></script> 
 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
 
    </head> 
 
    <body> 
 
    <form > 
 
     <div class="imgcontainer"> 
 
     &nbsp;</div> 
 
     <div class="container"> 
 
     <label><b>Username</b></label> 
 
     <input id="Text1" type="text"/> 
 
     <label><b>Password</b></label> 
 
     <input id="Text2" type="text"/> 
 
     <button type="submit" value="submit" onclick="myCall()">login</button> 
 

 
     <input type="checkbox" checked="checked"/> Remember me 
 
     </div>   
 
     <div class="container" style="background-color:#f1f1f1"> 
 
     <button type="button" class="cancelbtn">Cancel</button> 
 
     <span class="psw">Forgot <a href="#">password?</a></span> 
 

 
     </div> 
 
     <div id="mybox"> 
 
     </div> 
 
    </form> 
 
    </body> 
 
</html>

関連する問題