Olá.
Minha dúvida é simples. Se eu quiser colocar 2 frames em html, um como menu com links e o outro abrindo esses links, é só usar frameset dar nomes aos frames e direcionar com target. Mas e com colunas no bootstrap? Assim: tenho duas colunas (uma de Menu com link´s no lado direito e uma outra no lado esquerdo que abriria esses link´s). Tem como fazer isso com bootstrap? Eu tenho o exemplo aqui e seria apenas uma base para ver melhor (Imagens elucidam mais que texto :)).
Segue:
Sistema Cobrança
<!-- Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
Login no Sistema
Guj Forum
A ideia é isso (link) abrir ali no lado esquerdo
com FRAMES nem tem muito problema, mas com colunas no BOOTSTRAP já rodei a internet (e até aqui no fórum) e não achei.
</div>
<div class="col-md-8">Aqui é a segunda Coluna :)
<div class="panel panel-default">
<div class="panel-body">
<h2>Inicio: Aqui é a segunda Coluna :)</h2>
<h1>Os link´s abrirão aqui!!! Vindo dali do lado esquerdo!</h1>
Os link´s abrirão aqui!!! Vindo dali do lado esquerdo!
Os link´s abrirão aqui!!! Vindo dali do lado esquerdo!
Os link´s abrirão aqui!!! Vindo dali do lado esquerdo!
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
É isso ta meio bagunçado mais é isso. De qqr forma, se copiar e colar num editor de html, salvar e rodar da pra ver melhor. É possível isso que pretendo? Ou só com frames mesmo?
Desde já agradeço a todos. Ricardo.
Continuando a discussão do Colunas funcionando como Frames em bootstrap. É possível?:
acho uma imagem (ou duas !!) valem mais que todas as palavras:
isso é possível de ser feito com BOOTSTRAP? ou CSS3? ou HTML5? OU Angular.JS?
Você chegou a testar o load() ?
cara na verdade ainda não… fiquei muito preso nisso e agora q vou ver outras coisas… mas aproveitando, eu li o doc dessa func load() (meu inglês meio ruim) não consegui entender direito. Você teria algum exemplo (básico e primário q seja) pra me mostrar?
Agradeço e obrigado por me acompanhar aqui… somos os únicos.
Valeu
Cara o load() funciona da seguinte forma, você diz em que elemento do dom você quer carregar um conteúdo, sendo que este conteúdo pode vir de um arquivo externo.
Por isso que casa com o que você precisa.
Por exemplo, eu tenho uma div:
<div id="conteudo" />
Eu posso por exemplo carregar nela um conteúdo externo algo tipo:
$( "#conteudo").load( "menu.html" );
Com isso você pode carregar o que seriam “links” em outros lugares da página sem usar frames conforme você precisa…
Da uma estudada com calma que você consegue.
Procure por exemplos … google ta cheio… você consegue!
Algumas opções:
- via Javascript: carregando o conteúdo via AJAX e substituindo o conteúdo da segunda coluna pelo conteúdo da resposta da requisição (pelo visto é a versão complicada e explícita do
$.load()
que o @guivirtuoso sugeriu)
$("#linkProConteudoUm").on("click", function (event) {
event.preventDefault();
$.get("/paginaDoConteudoUm", function (data) {
$("#divDoConteudoUm").html(data);
});
});
- via Javascript: carregando o conteúdo todo de uma vez, criando
divs
com display:none;
e alterando o display
ao clicar nos links
$("#linkProConteudoUm").on("click", function (event) {
event.preventDefault();
$(".divDeConteudo").hide();
$("#divDoConteudoUm").show();
});
- via target: os links têm targets (
href="#targetUm"
) e você cria seletores para mostrar o seu conteúdo (já carregado de uma vez) quando ele for target, por exemplo
<div id="targetUm" class="targetHidden">Conteudo um</div>
<div id="targetDois" class="targetHidden">Conteudo dois</div>
<div id="targetTres" class="targetHidden">Conteudo tres</div>
<div id="targetQuatro" class="targetHidden">Conteudo quatro</div>
.targetHidden { display: none; }
#targetUm:target { display: block; }
#targetDois:target { display: block; }
#targetTres:target { display: block; }
#targetQuatro:target { display: block; }
No caso do load() nao precisa fazer uma requisição ajax $.get e depois pegar o resultado e injetar na div usando a funcao html.
É soh fazer isso direto usando a referencia ao seus arquivos mesmo.
Não sei se é tão mais complicado assim, e o carregamento fica sob demanda também, ao invés de carregar tudo e deixar oculto e depois ir mostrando, que apesar de funcionar é uma técnica que dependendo do conteúdo pode ficar bem lento.
Abs.