0
現在、私は設定方法がわかりやすいので、コードはモバイルフレンドリーです。モバイル版。ここでモバイル版のHTMLコードモバイル版とデスクトップ版の両方に使用されるように、デスクトップ版に変換する必要があります
は
@model IEnumerable<GSWebAPI.GS_Survey_Questions>
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/Layout_Surveys.cshtml";
int counter = 0;
}
@foreach (var i in Model)
{
if (i.Question_Type == "DROPDOWN")
{
<div class="container text-center">
<div class="row idrow" data-questions="@counter">
@{counter++;
}
<div id="question1" class="form-group">
<label class="lab text-center" for="form-group-select">
@i.Question_Order @Html.Raw(@i.Question)
</label>
@{ var works = "question" + counter.ToString();}
<select name="@works" class="form-control selects" id="form-group-select">
@for (int x = 1; x <= Convert.ToInt32(i.Question_SubType); x++)
{
var t = x - 1;
if (i.qOps != null)
{
<option> @i.qOps.options[t]</option>
}
else
{
<option> @x</option>
}
}
</select>
</div>
</div>
</div>
}
if (i.Question_Type == "RADIO")
{
<div class="container">
<div class="row idrow" data-questions="@counter">
@{counter++;
}
<div class="form-group">
<label class="lab" for="questions">
@i.Question_Order @i.Question
</label>
<div class="row">
<div class="col-xs-12">
<div id="question1" class="radio-inline">
@for (int x = 1; x <= Convert.ToInt32(i.Question_SubType); x++)
{
var t = x - 1;
if (i.qOps != null)
{
<label class="radio-inline"><input type="radio" name="question"> @i.qOps.options[t]</label>
}
else
{
<label class="radio-inline"><input type="radio" min="0" max="@x" name="question"></label>
}
}
</div>
</div>
</div>
</div>
</div>
</div>
}
if (i.Question_Type == "CHECKBOX")
{
for (int y = 1; y <= Convert.ToInt32(i.Question_SubType); y++)
{
@*<div class="container">
<div class="row">
<label>@y</label> <input type="checkbox" name="question">
</div>
</div>*@
}
}
}
<div class="azibsButtons">
<button type="button" id="previous" class="btn btn-primary pull-left">Prev</button>
<button type="button" id="next" class="btn btn-primary pull-right">Next</button>
<button type="button" id="submit" onclick="Sendingitoff();" class="btn btn-primary pull-right">Submit</button>
</div>
<script>
function formToJSON() {
var form = {};
$('.selects').each(function() {
var self = $(this);
var name = self.attr('name');
if (form[name]) {
form[name] = form[name] + ',' + self.val();
}
else {
form[name] = self.val();
}
});
return form;
}
function Sendingitoff(){
debugger;
var form = formToJSON();
var look = JSON.stringify(form);
$.ajax({
url: '@Url.Action("Answers", "GSSurvey")/' + '[email protected]["username"]' + '&[email protected]["receiverid"]' + '&[email protected]["id"]',
type: 'POST',
contentType: "application/json",
dataType: 'json',
data: look,
success: function(data, textStatus, jqXHR) {
},
error: function(jqXHR, textStatus, errorThrown) {
}
});
}
$(document).ready(function() {
ShowTheelement(0);
$("#previous").addClass('hidden');
$("#submit").addClass('hidden');
var dataVal = 0;
$("#next").click(function() {
dataVal++;
$("#previous").removeClass('hidden');
dataVal == $(".idrow[data-questions]").length-1 ? $(this).addClass('hidden') : $(this).removeClass('hidden');
ShowTheelement(dataVal);
if (dataVal == $(".idrow[data-questions]").length - 1)
$("#submit").removeClass('hidden');
});
$("#previous").click(function() {
dataVal--;
$("#next").removeClass('hidden');
dataVal == 0 ? $(this).addClass('hidden') : $(this).removeClass('hidden');
ShowTheelement(dataVal);
if (dataVal == $(".idrow[data-questions]").length - 2)
$("#submit").addClass('hidden');
});
});
function ShowTheelement(dataVal) {
$(".idrow").addClass('hidden');
$(".idrow[data-questions='" + dataVal + "']").removeClass('hidden');
}
</script>
.navbar-header {
position: absolute;
left: 19%;
top: 10%
}
/* Portrait */
@media only screen and (min-device-width: 1025px) and (max-device-width: 1200px) {
.form-control {
margin-right: 25%;
}
}
@media only screen and (min-device-width: 414px) and (max-device-width: 480px) {
.form-control {
margin-left: 13%;
}
}
@media only screen and (min-device-width: 375px) and (max-device-width: 412px) {
.form-control {
margin-left: 11%;
}
}
@media only screen and (min-device-width: 320px) and (max-device-width: 370px) {
.form-control {
margin-left: 2%;
}
}
.azibsButtons {
padding-top: 100px;
padding-left: 10px;
padding-right: 10px;
}
.form-control {
margin-top: 15px;
position: fixed;
top:250px;
}
.idrow label{
height:100px;
max-height: 100px;
min-height:100px;
}
.form-group{
max-height:188px;
min-height:188px;
}
.lab {
font-size: 13px;
}
.form-control-select {
}
.form-group {
margin-top: 20px;
}
.body-content {
margin-top: 110px;
}
a {
text-decoration: none;
display: inline-block;
margin-bottom: 80px;
padding: 8px 90px;
padding-left: 10px;
}
a:hover {
background-color: #ddd;
color: black;
}
.body-content .row {
font-size: 18px;
}
.navbar {
height: 150px;
}
#navbar-wrapper .imgLogo {
width: 200px;
}
#surveryForm .form-group {
padding-left: 20px;
margin-top: 20px;
}
#surveryForm .radio-inline2 {
font-size: 20px;
padding-left: 20px;
}
#surveryForm .radio-inline3 {
font-size: 15px;
padding-left: 15px;
margin-right: 10px;
}
#surveryForm .radio-inline {
font-size: 15px;
}
#surveryForm .form-group .checkbox-inline {
float: left;
margin-left: 30px;
}
あなたはどのフレームワーク/ライブラリを使用していますか？ – IiroP
MVC .netフレームワーク@liroPを使用しています – Micheal
Google _ **レスポンシブウェブデザイン** _をお願いします。また、デスクトップ用のモバイルコンテンツをコピー＆ペーストしないでください。それに、あなたがレスポンシブなウェブサイトを構築するのに最適なTwitter Bootstrapを使っているようです。 – hungerstar