InícioTabela na Loja de icones
+2
Juan Carlos
Filipe Caetano
6 participantes
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre códigos Javascript e jQuery
Página 1 de 1
Tabela na Loja de icones
por Filipe Caetano 06.01.16 21:06
Detalhes da questão
Endereço do fórum: http://equipedayz.forumeiros.com/
Versão do fórum: PunBB
Descrição
Olá novamente! Estou na luta para colocar a loja de ícones já faz 8 horas, realmente é muito cansativo mas com a ajuda de vocês eu tenho certeza que vou conseguir, não tenho a mínima noção em JavaScript então peço ajuda de vocês nessa batalha.
É o seguinte, estou querendo colocar uma simples tabela na minha loja, mas não consigo colocar em HTML pois o sistema da loja de inserir itens é em Javascript, ja procurei saber se á formas de inserir tabelas em Javascript mas é muito complicado e confuso, então eu não tive escolha se não a pedir a vocês que sempre nos ajudam!
Código da MINHA tabela que eu quero inserir na loja:
- Código:
<style type="text/css">
.tg {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg .tg-tstl{font-weight:bold;font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif !important;;background-color:#000000;color:#ffffff;text-align:center;vertical-align:top}
.tg .tg-yxcv{background-color:#efefef;color:#000000;vertical-align:top}
</style>
<table class="tg" style="undefined;table-layout: fixed; width: 732px">
<colgroup>
<col style="width: 121px">
<col style="width: 136px">
<col style="width: 118px">
<col style="width: 116px">
<col style="width: 112px">
<col style="width: 129px">
</colgroup>
<tr>
<th class="tg-tstl">Arma Primaria<br></th>
<th class="tg-tstl">Arma Secundaria<br></th>
<th class="tg-tstl">Item 1<br></th>
<th class="tg-tstl">Item 2<br></th>
<th class="tg-tstl">Item 3<br></th>
<th class="tg-tstl">Traje</th>
</tr>
<tr>
<td class="tg-yxcv">aaaaaa</td>
<td class="tg-yxcv">bbbbbbb</td>
<td class="tg-yxcv">cccccccc</td>
<td class="tg-yxcv">dddddd</td>
<td class="tg-yxcv">fffffffffff</td>
<td class="tg-yxcv">gggggggg</td>
</tr>
<tr>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
</tr>
<tr>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
</tr>
<tr>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
</tr>
<tr>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
</tr>
<tr>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
</tr>
<tr>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
</tr>
<tr>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
</tr>
<tr>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
</tr>
</table>
Código da Loja (Sem alterações, código pego aqui mesmo no forumeiros feito pelo "Daemon":
- Código:
<script type="text/javascript">
$(function() {
var produtos = {
'Gold Star': {
icone: 'http://i.imgur.com/taaL40o.png',
preco: '200',
descricao: 'Stars WHOA'
},
'Helmet': {
icone: 'http://png.findicons.com/files/icons/2169/picnic/70/helmet2.png',
preco: '250',
descricao: 'Capacete de batalha'
},
'Charmander': {
icone: 'http://i72.servimg.com/u/f72/18/07/42/17/shop_i33.png',
preco: '250',
descricao: 'Pokemón tipo fogo'
}
};
var content = $('.content .itens');
$.each(produtos, function (key, value) {
content.append(
'<tr class="item">' +
' <td class="icone" style="width: 10%;"><img src="' + value.icone + '" /></td>' +
' <td style="width: 50%;"><strong class="nome">' + key + '</strong><br /><br />' + value.descricao + '</td>' +
' <td>' +
' <ul>' +
' <li class="preco" data-myprice="' + value.preco + '"><img src="http://i.imgur.com/qdiucii.png" /> Preço: ' + value.preco + ' pontos</li>' +
' <br />' +
' <li><input type="button" onclick="addToCart(this)" value="Adicionar ao carrinho" /></li>' +
' </ul>' +
' </td>' +
'</tr>'
);
});
$.ajax({
url: '/u' + _userdata.user_id,
type: 'GET',
success: function(responseHtml)
{
var myPoints = $('#field_id-13 dd', responseHtml).text();
$('.myPoints').html('Meu saldo de pontos: <span class="totalPoints">' + myPoints + '</span>');
},
error: function(err)
{
console.log("AJAX error in request (Store points)");
}
});
});
var $total = 0;
function addToCart(item) {
var getItem = $(item).parents('.item').find('.nome').text();
var getPrice = parseInt($(item).parents('.item').find('.preco').attr('data-myprice'));
$total += getPrice;
$('.total').html('Valor total: <span class="totalVal">' + $total + '</span> pontos');
$('.cart').append('<span class="item-cart" onclick="removeFromCart(this)" data-myprice="' + getPrice + '">' + getItem + '</span>');
}
function removeFromCart(item) {
var getPrice = parseInt($(item).attr('data-myprice'));
$total -= getPrice;
$('.total').html('Valor total: <span class="totalVal">' + $total + '</span> pontos');
$(item).remove();
}
function resetItems() {
$('.cart').empty();
$total = 0;
$('.total').empty();
}
function buyItems() {
if(!$('.cart').is(':empty')) {
var valPoints = parseInt($('.totalPoints').text());
var valTotal = parseInt($('.totalVal').text());
if(valPoints >= valTotal) {
var texto = '';
var total = 0;
$('.item-cart').each(function() {
var item = $(this).text();
var preco = parseInt($(this).attr('data-myprice'));
texto += '[b]' + item.charAt(0).toUpperCase() + item.slice(1)
//add line break at the end
+ ':[/b] ' + preco + " pontos\n";
total += preco;
});
texto += '\n\n[b]Valor total:[/b] ' + total + ' pontos';
$.post('/privmsg', {
'mode': 'post',
'post': '1',
'folder': 'inbox',
'usergroup': '1',
'subject': 'Pedido da loja',
'message': texto
}).done(function() {
alert("Seu pedido foi enviado! Aguarde até que um administrador adicione seus ítens");
resetItems();
});
} else {
alert("Você não tem pontos suficiente para efetuar a compra");
}
} else {
alert("O carrinho está vazio");
}
}
</script>
<style type="text/css">
table.content {
background: #fafafa;
border: 1px solid #eaeaea;
border-collapse: separate;
empty-cells: show;
table-layout: fixed;
width: 100%;
}
.itens .nome {font-size: 14px;}
.itens .icone {
text-align: center;
}
.itens .icone img {
height: 50px;
width: 50px;
}
.item-cart {
background: orange url(https://cdn0.iconfinder.com/data/icons/very-basic-android-l-lollipop-icon-pack/24/close-16.png) no-repeat 5px;
margin: 3px 4px;
cursor: pointer;
display: inline-block;
font-weight: bold;
padding: 5px;
padding-left: 25px;
color: white;
border-radius: 3px;
}
table.content tr td {padding: 10px;background: #f0f0f0;border-bottom: 1px solid #e0e0e0;}
.itens ul li {list-style-type: none;}
.daemon {
background: #333;
text-align: center;
padding: 10px;
}
#cart {
background: #f0f0f0;
border: 1px solid #e0e0e0;
margin-top: 5px;
padding: 5px;
}
.cart {
background: white url("https://cdn1.iconfinder.com/data/icons/flat-artistic-shopping-icons/32/shopping-32.png") no-repeat 10px center;
min-height: 50px;
padding-left: 55px;
border: 1px solid #ddd;
}
.total, .myPoints {font-size: 13px;display: block;margin-top: 5px;font-family: arial;display: block;font-style: italic;font-weight: bold;}
</style>
<div class="daemon">
<span style="color: white;font-size: 28px;font-weight: bold;">Loja</span>
</div>
<table class="content">
<tbody class="itens"></tbody>
</table>
<div id="cart">
<div class="cart"></div>
<span class="myPoints"></span>
<span class="total"></span>
</div>
<div class="daemon">
<input type="button" value="Concluir compra" onclick="buyItems()" />
<input type="button" value="Resetar ítens" onclick="resetItems()" />
</div>
<center><input id="sairdaloja" type="button" value="Sair da Loja"><center>
<script>
$(function(){
$('#sairdaloja').click(function(){
var shaman = confirm("Tem certeza que você deseja sair?");
if(shaman === true) {
window.location= "http://equipedayz.forumeiros.com/";
}
else
{
alert("Você cancelou :D")
}
});
});
</script>
Agradeço, estou no aguardo!
Filipe Caetano- *
- Membro desde : 04/01/2016
Mensagens : 33
Pontos : 47 -
Re: Tabela na Loja de icones
por Juan Carlos 07.01.16 1:45
Amigo teste este código e lembre-se de criar a página em html no modo simples para evitar erros e etc...
- Código:
<script type="text/javascript">
$(function() {
var produtos = {
'Gold Star': {
icone: 'http://i.imgur.com/taaL40o.png',
preco: '200',
descricao: 'Stars WHOA'
},
'Helmet': {
icone: 'http://png.findicons.com/files/icons/2169/picnic/70/helmet2.png',
preco: '250',
descricao: 'Capacete de batalha'
},
'Charmander': {
icone: 'http://i72.servimg.com/u/f72/18/07/42/17/shop_i33.png',
preco: '250',
descricao: 'Pokemón tipo fogo'
}
};
var content = $('.content .itens');
$.each(produtos, function (key, value) {
content.append(
'<tr class="item">' +
' <td class="icone" style="width: 10%;"><img src="' + value.icone + '" /></td>' +
' <td style="width: 50%;"><strong class="nome">' + key + '</strong><br /><br />' + value.descricao + '</td>' +
' <td>' +
' <ul>' +
' <li class="preco" data-myprice="' + value.preco + '"><img src="http://i.imgur.com/qdiucii.png" /> Preço: ' + value.preco + ' pontos</li>' +
' <br />' +
' <li><input type="button" onclick="addToCart(this)" value="Adicionar ao carrinho" /></li>' +
' </ul>' +
' </td>' +
'</tr>'
);
});
$.ajax({
url: '/u' + _userdata.user_id,
type: 'GET',
success: function(responseHtml)
{
var myPoints = $('#field_id-13 dd', responseHtml).text();
$('.myPoints').html('Meu saldo de pontos: <span class="totalPoints">' + myPoints + '</span>');
},
error: function(err)
{
console.log("AJAX error in request (Store points)");
}
});
});
var $total = 0;
function addToCart(item) {
var getItem = $(item).parents('.item').find('.nome').text();
var getPrice = parseInt($(item).parents('.item').find('.preco').attr('data-myprice'));
$total += getPrice;
$('.total').html('Valor total: <span class="totalVal">' + $total + '</span> pontos');
$('.cart').append('<span class="item-cart" onclick="removeFromCart(this)" data-myprice="' + getPrice + '">' + getItem + '</span>');
}
function removeFromCart(item) {
var getPrice = parseInt($(item).attr('data-myprice'));
$total -= getPrice;
$('.total').html('Valor total: <span class="totalVal">' + $total + '</span> pontos');
$(item).remove();
}
function resetItems() {
$('.cart').empty();
$total = 0;
$('.total').empty();
}
function buyItems() {
if(!$('.cart').is(':empty')) {
var valPoints = parseInt($('.totalPoints').text());
var valTotal = parseInt($('.totalVal').text());
if(valPoints >= valTotal) {
var texto = '';
var total = 0;
$('.item-cart').each(function() {
var item = $(this).text();
var preco = parseInt($(this).attr('data-myprice'));
texto += '[b]' + item.charAt(0).toUpperCase() + item.slice(1)
//add line break at the end
+ ':[/b] ' + preco + " pontos\n";
total += preco;
});
texto += '\n\n[b]Valor total:[/b] ' + total + ' pontos';
$.post('/privmsg', {
'mode': 'post',
'post': '1',
'folder': 'inbox',
'usergroup': '1',
'subject': 'Pedido da loja',
'message': texto
}).done(function() {
alert("Seu pedido foi enviado! Aguarde até que um administrador adicione seus ítens");
resetItems();
});
} else {
alert("Você não tem pontos suficiente para efetuar a compra");
}
} else {
alert("O carrinho está vazio");
}
}
</script>
<style type="text/css">
table.content {
background: #fafafa;
border: 1px solid #eaeaea;
border-collapse: separate;
empty-cells: show;
table-layout: fixed;
width: 100%;
}
.itens .nome {font-size: 14px;}
.itens .icone {
text-align: center;
}
.itens .icone img {
height: 50px;
width: 50px;
}
.item-cart {
background: orange url(https://cdn0.iconfinder.com/data/icons/very-basic-android-l-lollipop-icon-pack/24/close-16.png) no-repeat 5px;
margin: 3px 4px;
cursor: pointer;
display: inline-block;
font-weight: bold;
padding: 5px;
padding-left: 25px;
color: white;
border-radius: 3px;
}
table.content tr td {padding: 10px;background: #f0f0f0;border-bottom: 1px solid #e0e0e0;}
.itens ul li {list-style-type: none;}
.daemon {
background: #333;
text-align: center;
padding: 10px;
}
#cart {
background: #f0f0f0;
border: 1px solid #e0e0e0;
margin-top: 5px;
padding: 5px;
}
.cart {
background: white url("https://cdn1.iconfinder.com/data/icons/flat-artistic-shopping-icons/32/shopping-32.png") no-repeat 10px center;
min-height: 50px;
padding-left: 55px;
border: 1px solid #ddd;
}
.total, .myPoints {font-size: 13px;display: block;margin-top: 5px;font-family: arial;display: block;font-style: italic;font-weight: bold;}
</style>
<div class="daemon">
<span style="color: white;font-size: 28px;font-weight: bold;">Loja</span>
</div>
<table class="content">
<tbody class="itens"></tbody>
</table>
<div id="cart">
<div class="cart"></div>
<span class="myPoints"></span>
<span class="total"></span>
</div>
<div class="daemon">
<input type="button" value="Concluir compra" onclick="buyItems()" />
<input type="button" value="Resetar ítens" onclick="resetItems()" />
</div>
<center><input id="sairdaloja" type="button" value="Sair da Loja"><center>
<script>
$(function(){
$('#sairdaloja').click(function(){
var shaman = confirm("Tem certeza que você deseja sair?");
if(shaman === true) {
window.location= "http://equipedayz.forumeiros.com/";
}
else
{
alert("Você cancelou :D")
}
});
});
</script>
</div>
/*testes*/
<div>
<style type="text/css">
.tg {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg .tg-tstl{font-weight:bold;font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif !important;;background-color:#000000;color:#ffffff;text-align:center;vertical-align:top}
.tg .tg-yxcv{background-color:#efefef;color:#000000;vertical-align:top}
</style>
<table class="tg" style="undefined;table-layout: fixed; width: 732px">
<colgroup>
<col style="width: 121px">
<col style="width: 136px">
<col style="width: 118px">
<col style="width: 116px">
<col style="width: 112px">
<col style="width: 129px">
</colgroup>
<tr>
<th class="tg-tstl">Arma Primaria<br></th>
<th class="tg-tstl">Arma Secundaria<br></th>
<th class="tg-tstl">Item 1<br></th>
<th class="tg-tstl">Item 2<br></th>
<th class="tg-tstl">Item 3<br></th>
<th class="tg-tstl">Traje</th>
</tr>
<tr>
<td class="tg-yxcv">aaaaaa</td>
<td class="tg-yxcv">bbbbbbb</td>
<td class="tg-yxcv">cccccccc</td>
<td class="tg-yxcv">dddddd</td>
<td class="tg-yxcv">fffffffffff</td>
<td class="tg-yxcv">gggggggg</td>
</tr>
<tr>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
</tr>
<tr>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
</tr>
<tr>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
</tr>
<tr>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
</tr>
<tr>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
</tr>
<tr>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
</tr>
<tr>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
</tr>
<tr>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
</tr>
</table>
</div>
Juan Carlos- *
- Membro desde : 09/12/2015
Mensagens : 31
Pontos : 45 -
Re: Tabela na Loja de icones
por Filipe Caetano 07.01.16 4:15
Juan Infelizmente não era isso que eu queria, até por que em um momento em que esta editando eu fiz isso... Só que o que eu queria era poder organizar os itens dentro da tabela. Mesmo assim eu te agradeço por tentar em me ajudar.Juan Carlos escreveu:Amigo teste este código e lembre-se de criar a página em html no modo simples para evitar erros e etc...
- Código:
<script type="text/javascript">
$(function() {
var produtos = {
'Gold Star': {
icone: 'http://i.imgur.com/taaL40o.png',
preco: '200',
descricao: 'Stars WHOA'
},
'Helmet': {
icone: 'http://png.findicons.com/files/icons/2169/picnic/70/helmet2.png',
preco: '250',
descricao: 'Capacete de batalha'
},
'Charmander': {
icone: 'http://i72.servimg.com/u/f72/18/07/42/17/shop_i33.png',
preco: '250',
descricao: 'Pokemón tipo fogo'
}
};
var content = $('.content .itens');
$.each(produtos, function (key, value) {
content.append(
'<tr class="item">' +
' <td class="icone" style="width: 10%;"><img src="' + value.icone + '" /></td>' +
' <td style="width: 50%;"><strong class="nome">' + key + '</strong><br /><br />' + value.descricao + '</td>' +
' <td>' +
' <ul>' +
' <li class="preco" data-myprice="' + value.preco + '"><img src="http://i.imgur.com/qdiucii.png" /> Preço: ' + value.preco + ' pontos</li>' +
' <br />' +
' <li><input type="button" onclick="addToCart(this)" value="Adicionar ao carrinho" /></li>' +
' </ul>' +
' </td>' +
'</tr>'
);
});
$.ajax({
url: '/u' + _userdata.user_id,
type: 'GET',
success: function(responseHtml)
{
var myPoints = $('#field_id-13 dd', responseHtml).text();
$('.myPoints').html('Meu saldo de pontos: <span class="totalPoints">' + myPoints + '</span>');
},
error: function(err)
{
console.log("AJAX error in request (Store points)");
}
});
});
var $total = 0;
function addToCart(item) {
var getItem = $(item).parents('.item').find('.nome').text();
var getPrice = parseInt($(item).parents('.item').find('.preco').attr('data-myprice'));
$total += getPrice;
$('.total').html('Valor total: <span class="totalVal">' + $total + '</span> pontos');
$('.cart').append('<span class="item-cart" onclick="removeFromCart(this)" data-myprice="' + getPrice + '">' + getItem + '</span>');
}
function removeFromCart(item) {
var getPrice = parseInt($(item).attr('data-myprice'));
$total -= getPrice;
$('.total').html('Valor total: <span class="totalVal">' + $total + '</span> pontos');
$(item).remove();
}
function resetItems() {
$('.cart').empty();
$total = 0;
$('.total').empty();
}
function buyItems() {
if(!$('.cart').is(':empty')) {
var valPoints = parseInt($('.totalPoints').text());
var valTotal = parseInt($('.totalVal').text());
if(valPoints >= valTotal) {
var texto = '';
var total = 0;
$('.item-cart').each(function() {
var item = $(this).text();
var preco = parseInt($(this).attr('data-myprice'));
texto += '[b]' + item.charAt(0).toUpperCase() + item.slice(1)
//add line break at the end
+ ':[/b] ' + preco + " pontos\n";
total += preco;
});
texto += '\n\n[b]Valor total:[/b] ' + total + ' pontos';
$.post('/privmsg', {
'mode': 'post',
'post': '1',
'folder': 'inbox',
'usergroup': '1',
'subject': 'Pedido da loja',
'message': texto
}).done(function() {
alert("Seu pedido foi enviado! Aguarde até que um administrador adicione seus ítens");
resetItems();
});
} else {
alert("Você não tem pontos suficiente para efetuar a compra");
}
} else {
alert("O carrinho está vazio");
}
}
</script>
<style type="text/css">
table.content {
background: #fafafa;
border: 1px solid #eaeaea;
border-collapse: separate;
empty-cells: show;
table-layout: fixed;
width: 100%;
}
.itens .nome {font-size: 14px;}
.itens .icone {
text-align: center;
}
.itens .icone img {
height: 50px;
width: 50px;
}
.item-cart {
background: orange url(https://cdn0.iconfinder.com/data/icons/very-basic-android-l-lollipop-icon-pack/24/close-16.png) no-repeat 5px;
margin: 3px 4px;
cursor: pointer;
display: inline-block;
font-weight: bold;
padding: 5px;
padding-left: 25px;
color: white;
border-radius: 3px;
}
table.content tr td {padding: 10px;background: #f0f0f0;border-bottom: 1px solid #e0e0e0;}
.itens ul li {list-style-type: none;}
.daemon {
background: #333;
text-align: center;
padding: 10px;
}
#cart {
background: #f0f0f0;
border: 1px solid #e0e0e0;
margin-top: 5px;
padding: 5px;
}
.cart {
background: white url("https://cdn1.iconfinder.com/data/icons/flat-artistic-shopping-icons/32/shopping-32.png") no-repeat 10px center;
min-height: 50px;
padding-left: 55px;
border: 1px solid #ddd;
}
.total, .myPoints {font-size: 13px;display: block;margin-top: 5px;font-family: arial;display: block;font-style: italic;font-weight: bold;}
</style>
<div class="daemon">
<span style="color: white;font-size: 28px;font-weight: bold;">Loja</span>
</div>
<table class="content">
<tbody class="itens"></tbody>
</table>
<div id="cart">
<div class="cart"></div>
<span class="myPoints"></span>
<span class="total"></span>
</div>
<div class="daemon">
<input type="button" value="Concluir compra" onclick="buyItems()" />
<input type="button" value="Resetar ítens" onclick="resetItems()" />
</div>
<center><input id="sairdaloja" type="button" value="Sair da Loja"><center>
<script>
$(function(){
$('#sairdaloja').click(function(){
var shaman = confirm("Tem certeza que você deseja sair?");
if(shaman === true) {
window.location= "http://equipedayz.forumeiros.com/";
}
else
{
alert("Você cancelou :D")
}
});
});
</script>
</div>
/*testes*/
<div>
<style type="text/css">
.tg {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg .tg-tstl{font-weight:bold;font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif !important;;background-color:#000000;color:#ffffff;text-align:center;vertical-align:top}
.tg .tg-yxcv{background-color:#efefef;color:#000000;vertical-align:top}
</style>
<table class="tg" style="undefined;table-layout: fixed; width: 732px">
<colgroup>
<col style="width: 121px">
<col style="width: 136px">
<col style="width: 118px">
<col style="width: 116px">
<col style="width: 112px">
<col style="width: 129px">
</colgroup>
<tr>
<th class="tg-tstl">Arma Primaria<br></th>
<th class="tg-tstl">Arma Secundaria<br></th>
<th class="tg-tstl">Item 1<br></th>
<th class="tg-tstl">Item 2<br></th>
<th class="tg-tstl">Item 3<br></th>
<th class="tg-tstl">Traje</th>
</tr>
<tr>
<td class="tg-yxcv">aaaaaa</td>
<td class="tg-yxcv">bbbbbbb</td>
<td class="tg-yxcv">cccccccc</td>
<td class="tg-yxcv">dddddd</td>
<td class="tg-yxcv">fffffffffff</td>
<td class="tg-yxcv">gggggggg</td>
</tr>
<tr>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
</tr>
<tr>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
</tr>
<tr>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
</tr>
<tr>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
</tr>
<tr>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
</tr>
<tr>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
</tr>
<tr>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
</tr>
<tr>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
</tr>
</table>
</div>
Filipe Caetano- *
- Membro desde : 04/01/2016
Mensagens : 33
Pontos : 47 -
Filipe Caetano- *
- Membro desde : 04/01/2016
Mensagens : 33
Pontos : 47 -
Re: Tabela na Loja de icones
por MateusAnjosV 08.01.16 14:09
Olá!
Inserir é a parte fácil, mas me diga, isso também seria algo comprável? Ou só enfeite?
Isso muda completamente como farei o código.
Até!
Inserir é a parte fácil, mas me diga, isso também seria algo comprável? Ou só enfeite?
Isso muda completamente como farei o código.
Até!
MateusAnjosV- Super Membro
- Membro desde : 16/10/2015
Mensagens : 1718
Pontos : 2373 -
Re: Tabela na Loja de icones
por Filipe Caetano 09.01.16 7:54
Olá Mateus anjos! Essa idéia minha veio para que eu organiza-se os itens em categorias Exemplos: Arma primária, arma secundária etc. E sim, seria comprável, se der muito trabalho, pode fazer algo simples sem tabela mas pelo menos organizado nessas categorias igual da tabela aonde eu fiz. Obrigado por enquanto.MateusAnjosV escreveu:Olá!
Inserir é a parte fácil, mas me diga, isso também seria algo comprável? Ou só enfeite?
Isso muda completamente como farei o código.
Até!
Filipe Caetano- *
- Membro desde : 04/01/2016
Mensagens : 33
Pontos : 47 -
Filipe Caetano- *
- Membro desde : 04/01/2016
Mensagens : 33
Pontos : 47 -
Filipe Caetano- *
- Membro desde : 04/01/2016
Mensagens : 33
Pontos : 47 -
Re: Tabela na Loja de icones
por MateusAnjosV 12.01.16 19:50
Olá!
Eu esqueci do seu tópico, desculpe. Vamos primeiro pelo HTML, será assim?
Algo a modificar?
Eu esqueci do seu tópico, desculpe. Vamos primeiro pelo HTML, será assim?
- Código:
<script type="text/javascript">
$(function() {
</script>
<style type="text/css">
.tg {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg .tg-tstl{font-weight:bold;font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif !important;;background-color:#000000;color:#ffffff;text-align:center;vertical-align:top}
.tg .tg-yxcv{background-color:#efefef;color:#000000;vertical-align:top}
table.content {
background: #fafafa;
border: 1px solid #eaeaea;
border-collapse: separate;
empty-cells: show;
table-layout: fixed;
width: 100%;
}
.itens .nome {font-size: 14px;}
.itens .icone {
text-align: center;
}
.itens .icone img {
height: 50px;
width: 50px;
}
.item-cart {
background: orange url(https://cdn0.iconfinder.com/data/icons/very-basic-android-l-lollipop-icon-pack/24/close-16.png) no-repeat 5px;
margin: 3px 4px;
cursor: pointer;
display: inline-block;
font-weight: bold;
padding: 5px;
padding-left: 25px;
color: white;
border-radius: 3px;
}
table.content tr td {padding: 10px;background: #f0f0f0;border-bottom: 1px solid #e0e0e0;}
.itens ul li {list-style-type: none;}
.daemon {
background: #333;
text-align: center;
padding: 10px;
}
#cart {
background: #f0f0f0;
border: 1px solid #e0e0e0;
margin-top: 5px;
padding: 5px;
}
.cart {
background: white url("") no-repeat 10px center;
min-height: 50px;
padding-left: 55px;
border: 1px solid #ddd;
padding: 10px;
padding-left: 200px;
}
.total, .myPoints {font-size: 13px;display: block;margin-top: 5px;font-family: arial;display: block;font-style: italic;font-weight: bold;}
</style>
<div class="daemon">
<span style="color: white;font-size: 28px;font-weight: bold;">Loja</span>
</div>
<table class="content">
<tbody class="itens"></tbody>
</table>
<div id="cart">
<div class="cart">
<table class="tg" style="undefined;table-layout: fixed; width: 732px">
<colgroup>
<col style="width: 121px">
<col style="width: 136px">
<col style="width: 118px">
<col style="width: 116px">
<col style="width: 112px">
<col style="width: 129px">
</colgroup>
<tr>
<th class="tg-tstl">Arma Primaria<br></th>
<th class="tg-tstl">Arma Secundaria<br></th>
<th class="tg-tstl">Item 1<br></th>
<th class="tg-tstl">Item 2<br></th>
<th class="tg-tstl">Item 3<br></th>
<th class="tg-tstl">Traje</th>
</tr>
<tr>
<td class="tg-yxcv">aaaaaa</td>
<td class="tg-yxcv">bbbbbbb</td>
<td class="tg-yxcv">cccccccc</td>
<td class="tg-yxcv">dddddd</td>
<td class="tg-yxcv">fffffffffff</td>
<td class="tg-yxcv">gggggggg</td>
</tr>
<tr>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
</tr>
<tr>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
</tr>
<tr>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
</tr>
<tr>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
</tr>
<tr>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
</tr>
<tr>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
</tr>
<tr>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
</tr>
<tr>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
</tr>
</table></div>
<span class="myPoints"></span>
<span class="total"></span>
</div>
<div class="daemon">
<input type="button" value="Concluir compra" onclick="buyItems()" />
<input type="button" value="Resetar ítens" onclick="resetItems()" />
</div>
Algo a modificar?
MateusAnjosV- Super Membro
- Membro desde : 16/10/2015
Mensagens : 1718
Pontos : 2373 -
Re: Tabela na Loja de icones
por Filipe Caetano 12.01.16 19:55
Oii, simplesmente o sistema de compra deixou de funcionar, tipo, deu até que certo, mas agora o que deixou de funcionar foi o sistemaMateusAnjosV escreveu:Olá!
Eu esqueci do seu tópico, desculpe. Vamos primeiro pelo HTML, será assim?
- Código:
<script type="text/javascript">
$(function() {
</script>
<style type="text/css">
.tg {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg .tg-tstl{font-weight:bold;font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif !important;;background-color:#000000;color:#ffffff;text-align:center;vertical-align:top}
.tg .tg-yxcv{background-color:#efefef;color:#000000;vertical-align:top}
table.content {
background: #fafafa;
border: 1px solid #eaeaea;
border-collapse: separate;
empty-cells: show;
table-layout: fixed;
width: 100%;
}
.itens .nome {font-size: 14px;}
.itens .icone {
text-align: center;
}
.itens .icone img {
height: 50px;
width: 50px;
}
.item-cart {
background: orange url(https://cdn0.iconfinder.com/data/icons/very-basic-android-l-lollipop-icon-pack/24/close-16.png) no-repeat 5px;
margin: 3px 4px;
cursor: pointer;
display: inline-block;
font-weight: bold;
padding: 5px;
padding-left: 25px;
color: white;
border-radius: 3px;
}
table.content tr td {padding: 10px;background: #f0f0f0;border-bottom: 1px solid #e0e0e0;}
.itens ul li {list-style-type: none;}
.daemon {
background: #333;
text-align: center;
padding: 10px;
}
#cart {
background: #f0f0f0;
border: 1px solid #e0e0e0;
margin-top: 5px;
padding: 5px;
}
.cart {
background: white url("") no-repeat 10px center;
min-height: 50px;
padding-left: 55px;
border: 1px solid #ddd;
padding: 10px;
padding-left: 200px;
}
.total, .myPoints {font-size: 13px;display: block;margin-top: 5px;font-family: arial;display: block;font-style: italic;font-weight: bold;}
</style>
<div class="daemon">
<span style="color: white;font-size: 28px;font-weight: bold;">Loja</span>
</div>
<table class="content">
<tbody class="itens"></tbody>
</table>
<div id="cart">
<div class="cart">
<table class="tg" style="undefined;table-layout: fixed; width: 732px">
<colgroup>
<col style="width: 121px">
<col style="width: 136px">
<col style="width: 118px">
<col style="width: 116px">
<col style="width: 112px">
<col style="width: 129px">
</colgroup>
<tr>
<th class="tg-tstl">Arma Primaria<br></th>
<th class="tg-tstl">Arma Secundaria<br></th>
<th class="tg-tstl">Item 1<br></th>
<th class="tg-tstl">Item 2<br></th>
<th class="tg-tstl">Item 3<br></th>
<th class="tg-tstl">Traje</th>
</tr>
<tr>
<td class="tg-yxcv">aaaaaa</td>
<td class="tg-yxcv">bbbbbbb</td>
<td class="tg-yxcv">cccccccc</td>
<td class="tg-yxcv">dddddd</td>
<td class="tg-yxcv">fffffffffff</td>
<td class="tg-yxcv">gggggggg</td>
</tr>
<tr>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
</tr>
<tr>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
</tr>
<tr>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
</tr>
<tr>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
</tr>
<tr>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
</tr>
<tr>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
</tr>
<tr>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
</tr>
<tr>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
</tr>
</table></div>
<span class="myPoints"></span>
<span class="total"></span>
</div>
<div class="daemon">
<input type="button" value="Concluir compra" onclick="buyItems()" />
<input type="button" value="Resetar ítens" onclick="resetItems()" />
</div>
Algo a modificar?
to achando que o que quero fazer nao tem como fazer, eu acho.@EDIT: Só ficou no visual sabe? mas as funcao de aparecer os pontos, etc parou de funcionar
Filipe Caetano- *
- Membro desde : 04/01/2016
Mensagens : 33
Pontos : 47 -
Filipe Caetano- *
- Membro desde : 04/01/2016
Mensagens : 33
Pontos : 47 -
Re: Tabela na Loja de icones
por Filipe Caetano 17.01.16 0:04
Up! Meu projeto esta quase pronto, precisamos desta loja, seria muito bacana para os players ...
Filipe Caetano- *
- Membro desde : 04/01/2016
Mensagens : 33
Pontos : 47 -
Re: Tabela na Loja de icones
por Sir_Undead 17.01.16 2:08
Vou dar uma analisada e ver o que posso fazer.
@Edit:
Não entendi exatamente qual alteração quer fazer. Pode desenhar? Fica melhor..
@Edit:
Não entendi exatamente qual alteração quer fazer. Pode desenhar? Fica melhor..
Sir_Undead- ***
- Membro desde : 06/01/2011
Mensagens : 138
Pontos : 217 -
Re: Tabela na Loja de icones
por Filipe Caetano 18.01.16 19:01
Olá Undead, mais ou menos isto:Sir_Undead escreveu:Vou dar uma analisada e ver o que posso fazer.
@Edit:
Não entendi exatamente qual alteração quer fazer. Pode desenhar? Fica melhor..
Será que é possivel? ou seria muito complicado? O que eu queria fazer era fazer uma tabela, com os nomes dos tipos de itens em cima, e dentro do quadrado a imagem do item, mas com o sistema de loja funcionando entende? a tabela seria apenas o visual. Se não tivesse a tabela nao tem como eu colocar "Arma 1, Arma secundaria, Iten 1, Iten 2 Etc entende? Se não tiver como fazer a tabela, nao tem problema, eu só queria organizar os itens em grupo para o cliente comprar.
Filipe Caetano- *
- Membro desde : 04/01/2016
Mensagens : 33
Pontos : 47 -
Re: Tabela na Loja de icones
por Sir_Undead 18.01.16 19:36
Entendi, da pra fazer sim, acho que é fácil até. Vou tentar aqui. De qualquer forma, o sem alteração nenhuma já não funciona comigo direito. A MP pro ADM não é enviada e nada acontece dps da compra.
Sir_Undead- ***
- Membro desde : 06/01/2011
Mensagens : 138
Pontos : 217 -
Re: Tabela na Loja de icones
por Filipe Caetano 19.01.16 18:35
Estranho, por que eu já resolvi esse problema de MP, não me lembro se eu tinha criado o post ou se achei em algum tutorial, que pena, pois sem isso de nada vale o sistema, pois o Admin tem que saber o ato da compra, mas beleza, não tem problema, qualquer coisa se estiver tudo certinho e faltar apenas isto farei um novo tópico, feliz feliz por estar me ajudando!Sir_Undead escreveu:Entendi, da pra fazer sim, acho que é fácil até. Vou tentar aqui. De qualquer forma, o sem alteração nenhuma já não funciona comigo direito. A MP pro ADM não é enviada e nada acontece dps da compra.
Filipe Caetano- *
- Membro desde : 04/01/2016
Mensagens : 33
Pontos : 47 -
Re: Tabela na Loja de icones
por Troubleshoot 19.01.16 19:28
Olá, boa tarde!
Se bem entendi, você necessita de um sistema semelhante a este:
http://www.cicacenter.com.br/?pid=4
Como pode ver, adaptei o código da loja e adicionei em abas para separar o conteúdo.
Caso seja isso, posso lhe fornecer o código e um tutorial explicativo(só será trabalhoso adicionar os produtos..).
Até! =)
Se bem entendi, você necessita de um sistema semelhante a este:
http://www.cicacenter.com.br/?pid=4
Como pode ver, adaptei o código da loja e adicionei em abas para separar o conteúdo.
Caso seja isso, posso lhe fornecer o código e um tutorial explicativo(só será trabalhoso adicionar os produtos..).
Até! =)
Troubleshoot- Hiper Membro
- Membro desde : 25/09/2011
Mensagens : 2235
Pontos : 3009 -
Re: Tabela na Loja de icones
por Filipe Caetano 20.01.16 3:39
Legal! que bacana Troubleshoot, mas será que pega certinho com o sistema da loja também pegando? Um abraço, até logoTroubleshoot escreveu:Olá, boa tarde!
Se bem entendi, você necessita de um sistema semelhante a este:
http://www.cicacenter.com.br/?pid=4
Como pode ver, adaptei o código da loja e adicionei em abas para separar o conteúdo.
Caso seja isso, posso lhe fornecer o código e um tutorial explicativo(só será trabalhoso adicionar os produtos..).
Até! =)
Filipe Caetano- *
- Membro desde : 04/01/2016
Mensagens : 33
Pontos : 47 -
Re: Tabela na Loja de icones
por Troubleshoot 20.01.16 10:26
Sim!
Eu fiz este sistema baseado no código criado pelo @Daemon. Apenas ocultei o sistema de compra, já que em meu website não é necessário.
Olha, é um código bastante simples, porem, tem que se ber configurado para que as categorias em abas não 'buguem'.
Para cada aba, temos que mudar uma opção no código da loja.
Vou facilitar isso! Apenas preciso que você separe os produtos que serão mostrados em categorias, exemplo:
Cada página .JS, é uma categoria de produtos diferente para o sistema de abas.
Quando fizer essas páginas, apenas me informe os links e nomes que irão aparecer nas abas.
Att! =)
Eu fiz este sistema baseado no código criado pelo @Daemon. Apenas ocultei o sistema de compra, já que em meu website não é necessário.
Olha, é um código bastante simples, porem, tem que se ber configurado para que as categorias em abas não 'buguem'.
Para cada aba, temos que mudar uma opção no código da loja.
Vou facilitar isso! Apenas preciso que você separe os produtos que serão mostrados em categorias, exemplo:
Cada página .JS, é uma categoria de produtos diferente para o sistema de abas.
Quando fizer essas páginas, apenas me informe os links e nomes que irão aparecer nas abas.
Att! =)
Troubleshoot- Hiper Membro
- Membro desde : 25/09/2011
Mensagens : 2235
Pontos : 3009 -
Re: Tabela na Loja de icones
por Filipe Caetano 20.01.16 16:18
TroubleShoot seria tipo assim:Troubleshoot escreveu:Sim!
Eu fiz este sistema baseado no código criado pelo @Daemon. Apenas ocultei o sistema de compra, já que em meu website não é necessário.
Olha, é um código bastante simples, porem, tem que se ber configurado para que as categorias em abas não 'buguem'.
Para cada aba, temos que mudar uma opção no código da loja.
Vou facilitar isso! Apenas preciso que você separe os produtos que serão mostrados em categorias, exemplo:
Cada página .JS, é uma categoria de produtos diferente para o sistema de abas.
Quando fizer essas páginas, apenas me informe os links e nomes que irão aparecer nas abas.
Att! =)
Só que ai nao tem nada no codigo, o que eu poderia colocar? até logo
@Edit: São só essas categorias mesmo:
Traje
Item 3
Item 2
Item 1
Arma Secundaria
Arma Primaria
Filipe Caetano- *
- Membro desde : 04/01/2016
Mensagens : 33
Pontos : 47 -
Filipe Caetano- *
- Membro desde : 04/01/2016
Mensagens : 33
Pontos : 47 -
Filipe Caetano- *
- Membro desde : 04/01/2016
Mensagens : 33
Pontos : 47 -
Filipe Caetano- *
- Membro desde : 04/01/2016
Mensagens : 33
Pontos : 47 -
Re: Tabela na Loja de icones
por Troubleshoot 26.01.16 12:46
Bom dia!
Peço desculpas pela minha demora em responder, mas estou bastante ocupado...
Preciso que adicione os produtos normalmente, seguindo o tutorial. Apenas preciso que separe os produtos por páginas .JS
Att.
Peço desculpas pela minha demora em responder, mas estou bastante ocupado...
Preciso que adicione os produtos normalmente, seguindo o tutorial. Apenas preciso que separe os produtos por páginas .JS
Att.
Troubleshoot- Hiper Membro
- Membro desde : 25/09/2011
Mensagens : 2235
Pontos : 3009 -
Re: Tabela na Loja de icones
por MateusAnjosV 26.01.16 15:06
Olá Filipe!
Eu lhe peço desculpas por toda essa demora, espero que consiga resolver a sua questão.
Eu fiz uma loja especialmente para você:
O que acha? Algumas funções são limitadas, devido ao meu tempo disponível, me perdoe.
Eu lhe peço desculpas por toda essa demora, espero que consiga resolver a sua questão.
Eu fiz uma loja especialmente para você:
- Código:
<script type="text/javascript">
$(function() {
$('#ver').click(function(e){
e.preventDefault();
$('#achat_user_prefs').fadeToggle();
});
html = '';
total = '';
setInterval(function(){
$('#achat_user_prefs').html(html);
}, 100);
$('.tg-yxcv').append('<div class="comprar" style="float: right;color: green;font-weight: bold;font-size: 14px">C</div>');
$('.tg-yxcv').each(function(){
r = $(this).text();
tot = $(this).attr('preco');
$(this).find('.comprar').click(function(){
html += r + '<br>';
total += tot;
alert("Adicionado ao carrinho.");
});
});
});
</script>
<style type="text/css">
#achat_user_prefs span {color: red;position: absolute;margin-left:40%;margin-top: -15px;}
#achat_user_prefs {
position: absolute;
color: black;
background: #DDD;
padding: 10px;
border: 1px solid #BBB;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
font-weight: bold;
text-shadow: 0 1px white;
box-shadow: 3px 3px 10px #888, inset 0 20px 20px #EEE;
max-height: 200px;
overflow: auto;
left: 5%;
font-size: 12px;
min-height: 200px;
min-width: 200px;
margin-top: -290px;
text-align: center;
display: none;
}
.tg {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg .tg-tstl{font-weight:bold;font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif !important;;background-color:#000000;color:#ffffff;text-align:center;vertical-align:top}
.tg .tg-yxcv{background-color:#efefef;color:#000000;vertical-align:top}
table.content {
background: #fafafa;
border: 1px solid #eaeaea;
border-collapse: separate;
empty-cells: show;
table-layout: fixed;
width: 100%;
}
.itens .nome {font-size: 14px;}
.itens .icone {
text-align: center;
}
.itens .icone img {
height: 50px;
width: 50px;
}
.item-cart {
background: orange url(https://cdn0.iconfinder.com/data/icons/very-basic-android-l-lollipop-icon-pack/24/close-16.png) no-repeat 5px;
margin: 3px 4px;
cursor: pointer;
display: inline-block;
font-weight: bold;
padding: 5px;
padding-left: 25px;
color: white;
border-radius: 3px;
}
table.content tr td {padding: 10px;background: #f0f0f0;border-bottom: 1px solid #e0e0e0;}
.itens ul li {list-style-type: none;}
.daemon {
background: #333;
text-align: center;
padding: 10px;
}
#cart {
background: #f0f0f0;
border: 1px solid #e0e0e0;
margin-top: 5px;
padding: 5px;
}
.cart {
background: white url("") no-repeat 10px center;
min-height: 50px;
padding-left: 55px;
border: 1px solid #ddd;
padding: 10px;
padding-left: 200px;
}
.total, .myPoints {font-size: 13px;display: block;margin-top: 5px;font-family: arial;display: block;font-style: italic;font-weight: bold;}
</style><div class="daemon">
<span style="color: white;font-size: 28px;font-weight: bold;">Loja</span>
</div>
<table class="content">
<tbody class="itens"></tbody>
</table><div id="cart">
<div class="cart">
<table class="tg" style="undefined;table-layout: fixed; width: 732px">
<colgroup>
<col style="width: 121px">
<col style="width: 136px">
<col style="width: 118px">
<col style="width: 116px">
<col style="width: 112px">
<col style="width: 129px">
</colgroup>
<tr>
<th class="tg-tstl">Arma Primaria<br></th>
<th class="tg-tstl">Arma Secundaria<br></th>
<th class="tg-tstl">Item 1<br></th>
<th class="tg-tstl">Item 2<br></th>
<th class="tg-tstl">Item 3<br></th>
<th class="tg-tstl">Traje</th>
</tr>
<tr>
<td class="tg-yxcv" preco="100">aaaaaa</td>
<td class="tg-yxcv" preco="100">bbbbbbb</td>
<td class="tg-yxcv" preco="100">cccccccc</td>
<td class="tg-yxcv" preco="100">dddddd</td>
<td class="tg-yxcv" preco="100">fffffffffff</td>
<td class="tg-yxcv" preco="100">gggggggg</td>
</tr>
<tr>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
</tr>
<tr>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
</tr>
<tr>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
</tr>
<tr>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
</tr>
<tr>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
</tr>
<tr>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
</tr>
<tr>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
</tr>
<tr>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
<td class="tg-yxcv"></td>
</tr>
</table></div>
<span class="myPoints"></span>
<span class="total"></span>
</div><div class="daemon">
<div id="achat_user_prefs">Carregando...</div>
<input type="button" style="float: left;background: darkred !important;border-color: #BB2929 !important;box-shadow: 0px 2px 0px 0px #BB2929 inset, 0px 2px 3px #BB2929" value="Ver carrinho" class="addButton" id="ver" />
<input type="button" style="background: green !important;border-color: green !important;box-shadow: 0px 2px 0px 0px green inset, 0px 2px 3px green;" value="Concluir compra" class="addButton" id="concluir" onclick="$.post('/privmsg', { 'mode': 'post', 'post': '1', 'folder': 'inbox', 'usergroup': '1', 'subject': 'Pedido da loja', 'message': '[color=white]' + html + total + '[/color]', }).done(function() { alert('Seu pedido foi enviado! Aguarde até que um administrador adicione seus ítens'); html = ''; total = ''; });" />
<input type="button" style="background: red !important;border-color: #BB2929 !important;box-shadow: 0px 2px 0px 0px #BB2929 inset, 0px 2px 3px #BB2929" value="Resetar ítens" class="addButton" onclick="html = ''; total = ''; alert('Resetado');" />
</div>
O que acha? Algumas funções são limitadas, devido ao meu tempo disponível, me perdoe.
MateusAnjosV- Super Membro
- Membro desde : 16/10/2015
Mensagens : 1718
Pontos : 2373 -
Re: Tabela na Loja de icones
por Guh_. 26.01.16 15:22
Esse código e para por no javascript ou na folha css ? '-'
Guh_.- *
- Membro desde : 08/01/2016
Mensagens : 33
Pontos : 69 -
Re: Tabela na Loja de icones
por Filipe Caetano 26.01.16 19:44
Olá pessoal, quero agradecer a todos que disponibilizaram do seu tempo por me ajudar, creio também que de tantas visualizações, novos membro também irão utilizar este sistema. Obrigado MateusAnjosV, Troubleshoot e Juan Carlos por tentarem me ajudar, estou desistindo do Post, até mais pessoal, valeu!
Filipe Caetano- *
- Membro desde : 04/01/2016
Mensagens : 33
Pontos : 47 -
Re: Tabela na Loja de icones
por MateusAnjosV 26.01.16 20:16
É uma pena. Aos futuros usuários que vão utilizar: o meu último código funciona.
 | Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada. Tópico marcado como Resolvido e movido para "Questões resolvidas". |
MateusAnjosV- Super Membro
- Membro desde : 16/10/2015
Mensagens : 1718
Pontos : 2373 -
Tópicos semelhantes» Loja de ícones com categorias
» Como eu consigo por mais de um icone na loja de icones do fórum.
» [AddOn] Criar loja de ícones
» Problemas com o uso do AddOn Loja de Ícones
» Como criar loja de ícones no fórum?
» Como eu consigo por mais de um icone na loja de icones do fórum.
» [AddOn] Criar loja de ícones
» Problemas com o uso do AddOn Loja de Ícones
» Como criar loja de ícones no fórum?
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre códigos Javascript e jQuery
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos