0
Maintenant le code est mobile amical à cause de la façon dont je l'ai installé maintenant je veux juste qu'il soit compatible avec le bureau sans gâcher la version mobile.Code html pour la version mobile Maintenant doit être converti en version de bureau afin qu'il soit utilisé pour Mobile et Desktop
Voici ce que j'ai jusqu'à présent et dans le fond css .......
@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;
}
Puis-je prendre ce code et il suffit d'ajouter un div enroulé sur elle?
Quels frameworks/bibliothèques utilisez-vous? – IiroP
J'utilise MVC .net framework @liroP – Micheal
S'il vous plaît Google _ ** webdesign ** _. Et s'il vous plaît ne copiez pas et ne collez pas votre contenu mobile pour le bureau. En outre, il semble que vous utilisiez Twitter Bootstrap, ce qui est idéal pour créer des sites Web réactifs. – hungerstar