가장 만만한 예제로 하는 중

일단.. jqeury를 통해서 load하는거나 다름없긴 하지만

ajax를 통해서 페이지를 불러오는 식으로 일단은 구현



<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<link rel="stylesheet" href="css/style.css">

<script src="js/jquery-3.2.1.min.js"></script>

</head>

<body>

<div id="whole">

<div class="top" id="header"></div>

<div class="content center" id="content"></div>

</div>


<script type="text/javascript">

$(document).ready(function()

{

$.ajax(

{

url:'./pagelet/login.html',

success:function(data)

{

$('#result').append(data);

}

})

});

</script>

<div id="result">blah blah</div>

</body>

</html> 


[링크 : https://opentutorials.org/course/1375/6851]



append로 해도 내용이 없으면 티가 안나는데

내용이 하나라도 있으면 append 답게, 그 이후에 내용이 추가된다.

empty()하거나 html()로 그냥 갈아 치워버리는 것도 방법이 될 듯.


[링크 : https://stackoverflow.com/questions/1675215/ajax-replace-instead-of-append]



위의 예제에서 json까진 해야지 ajax 쓸만해질 듯..


+

ajax 함수에서 사용되는 변수(?)들 이름

type이나 url 이런게 일종의 식별자니까.. 알아두면 작업이 용이할 듯

[링크 : https://www.w3schools.com/jquery/ajax_ajax.asp]

Posted by 구차니

먼가 말이 이상한데..

일단 특정 엘리먼트에서 특정 어트리뷰트를 골라서

선택되는 양을 줄이거나, 특정 노드 하위만을 선별적으로 고르고 싶을때 사용


jQuery( "[attributeFilter1][attributeFilter2][attributeFilterN]" )

attributeFilter1: An attribute filter.

attributeFilter2: Another attribute filter, reducing the selection even more

attributeFilterN: As many more attribute filters as necessary 

[링크 : https://api.jquery.com/multiple-attribute-selector/]


깔끔한 코드는 아니지만.. tab 구현하기 위해 작성한 녀석

div 태그 하위의 parent_id로 시작하는 녀석을 찾아서 class 값을 변경하기 위해 다중 속성 선택자를 사용함

$(document).ready(function(){

$('ul.tabs li').click(function(){

var tab_id = $(this).attr('id');

var parent_id = $(this).parent().attr('id');


$("li[id^="+parent_id+"]").removeClass("sel unsel");

$("li[id^="+parent_id+"]").addClass("unsel");

$(this).removeClass("unsel");

$(this).addClass("sel");

$("div[id^="+parent_id+"]").removeClass("disp non-disp");

$("div[id^="+parent_id+"]").addClass("non-disp");

$("#"+tab_id+"-view").removeClass("non-disp");

$("#"+tab_id+"-view").addClass("disp");

})

}) 



Posted by 구차니

이름없는 함수를 이용해서 자바스크립트를 바로 실행이 가능한데

이걸 이용해서 jquery를 실행하고

jquery에서는 특정 class의 내용을 비워버린다.


<script type="text/javascript">

$(function(){

  $('.hello').empty();

}); 


[링크 : http://www.everdevel.com/kr/jquery/val_empty_remove.php]

[링크 : http://www.nextree.co.kr/p4150/]



+

구현해보는데 깔끔한건지 모르겠으나..

대충 아래같이 구현해봄

<html>

<head>

<script src="./jquery-3.1.1.min.js"></script>

</head>

<?php

        include('./func_db.php');


        if( isset($_POST['id']))

        {

                $db = db_conn();

                $ret = login($db, $_POST['id'], $_POST['pw']);

                if($ret == 1)

                {

                        echo "

<script>

$(function(){

        $('.login_form').empty();

        $('.login_form').append('<input type=submit value=logout>');

})();

</script>";

                }

        }


?>


<body>

<form method="post" action="login_form.php">

        <fieldset style="width: 200px;">

                <legend>login</legend>

                <div class="login_form">

                        <p>

                                id :&nbsp;

                                <input type="text" name="id">

                        </p>

                        <p>

                                pw :&nbsp;

                                <input type="password" name="pw">

                        </p>

                        <p>

                                <input type="submit" value="login">

                        </p>

                </div>

        </fieldset>

</form>

</body>

</html> 


'Programming > javascript & HTML' 카테고리의 다른 글

jquey ajax 테스트  (4) 2018.09.03
jquery 복수 속성 선택하기  (0) 2018.08.30
javascript toString() 진법변환  (0) 2017.05.25
div slide 애니메이션  (0) 2017.01.14
div margin: 0 -200px 0 auto  (0) 2016.01.21
Posted by 구차니

c에서 toString()이랑은 다르구만? (응?)



Syntax

number.toString(radix)

Parameter Values

ParameterDescription
radixOptional. Which base to use for representing a numeric value. Must be an integer between 2 and 36.
  • 2 - The number will show as a binary value
  • 8 - The number will show as an octal value
  • 16 - The number will show as an hexadecimal value

[링크 : https://www.w3schools.com/jsref/jsref_tostring_number.asp]

[링크 : http://mwultong.blogspot.com/2007/04/16-hex-2-10-javascript.html]

'Programming > javascript & HTML' 카테고리의 다른 글

jquery 복수 속성 선택하기  (0) 2018.08.30
jqeury 예제 그리고 자바스크립트 익명함수  (0) 2017.06.10
div slide 애니메이션  (0) 2017.01.14
div margin: 0 -200px 0 auto  (0) 2016.01.21
semantic element / HTML5  (0) 2016.01.21
Posted by 구차니
Posted by 구차니


왼쪽 메뉴 크기를 고정하고

메인 내용을 가변으로 가득 채우고 싶어서 발악(?) 했는데

의외로 손쉽게 그런 구조로 되어 있는 녀석을 발견 ?!?!?!?

뜯어봐도 이해를 못하겠... OTL

[링크 : http://www.w3schools.com/html/html5_browsers.asp]


결론은. - 마진인가...

다만 float : right 정도?

[링크 : http://stackoverflow.com/.../2-column-layout-left-column-fixed-width-right-fluid-clearboth]


margin : top right bottom left 순서..

[링크 : http://www.w3schools.com/css/css_boxmodel.asp]

[링크 : http://www.w3schools.com/css/css_margin.asp]



margin: 0 -220px 0 auto;

그럼.. top 0

right -220

bottom 0

left auto ?


흠... iframe이랑 하려니 잘 안되네...

'Programming > javascript & HTML' 카테고리의 다른 글

javascript toString() 진법변환  (0) 2017.05.25
div slide 애니메이션  (0) 2017.01.14
semantic element / HTML5  (0) 2016.01.21
HTML form 은 중첩불가..  (0) 2016.01.14
HTML5용 슬라이더 바  (0) 2016.01.13
Posted by 구차니

daum.net 뜯어 보다

head가 아닌 header가 보여서 먼가 ... 찾아 봤더니

HTML5 태그라고 한다.


<article>

<aside>

<details>

<figcaption>

<figure>

<footer>

<header>

<main>

<mark>

<nav>

<section>

<summary>

<time>


[링크 : http://www.w3schools.com/html/html5_semantic_elements.asp]


nav도 html5 였구나..

'Programming > javascript & HTML' 카테고리의 다른 글

div slide 애니메이션  (0) 2017.01.14
div margin: 0 -200px 0 auto  (0) 2016.01.21
HTML form 은 중첩불가..  (0) 2016.01.14
HTML5용 슬라이더 바  (0) 2016.01.13
반응형 웹... w3cshool 링크  (0) 2016.01.11
Posted by 구차니

혹시나 해서 찾아 봤지만

역시나.. 표준으로는 form은 중첩불가! 라고 해놨...

아놔...


Note you are not allowed to nest FORM elements!

[링크 : https://www.w3.org/MarkUp/html3/forms.html]



해결책으로는 jquery 등을 써서 넣었다 뺐다 하는 정도일려나?

[링크 : http://blog.avirtualhome.com/how-to-create-nested-forms/]

'Programming > javascript & HTML' 카테고리의 다른 글

div margin: 0 -200px 0 auto  (0) 2016.01.21
semantic element / HTML5  (0) 2016.01.21
HTML5용 슬라이더 바  (0) 2016.01.13
반응형 웹... w3cshool 링크  (0) 2016.01.11
ul li 메뉴 .. 2?  (0) 2016.01.11
Posted by 구차니

HTML5용이라 IE9도 안된다 ㄷㄷㄷ



IE10 부터 적용가능..


<input type="range" />


크롬


IE10(에뮬레이션)



[링크 : http://webtutsdepot.com/2010/04/24/html-5-slider-input-tutorial/]

'Programming > javascript & HTML' 카테고리의 다른 글

semantic element / HTML5  (0) 2016.01.21
HTML form 은 중첩불가..  (0) 2016.01.14
반응형 웹... w3cshool 링크  (0) 2016.01.11
ul li 메뉴 .. 2?  (0) 2016.01.11
div 쪼금 이해 될락말락...  (0) 2016.01.08
Posted by 구차니

적어 둔줄 알았는데 없네 -_-


[링크 : http://www.w3schools.com/html/html_responsive.asp]

'Programming > javascript & HTML' 카테고리의 다른 글

HTML form 은 중첩불가..  (0) 2016.01.14
HTML5용 슬라이더 바  (0) 2016.01.13
ul li 메뉴 .. 2?  (0) 2016.01.11
div 쪼금 이해 될락말락...  (0) 2016.01.08
setTimeout()와 setInterval()  (0) 2016.01.07
Posted by 구차니