'Jquery'에 해당되는 글 16건

  1. 2013.03.07 Footer bars
  2. 2013.03.07 Header bars
  3. 2013.03.07 jquery mobile 시작하기
  4. 2012.07.03 jquery checkbox관련 기능
  5. 2012.06.01 jquery datepicker
  6. 2010.09.06 JQuery.js 와 Prototype.js 같이 사용하기

Footer bars

Jquery/Jquery mobile 2013. 3. 7. 17:19

data-role="page" 태그안에 data-role="footer"를 삽입한다.

<div data-role="footer"> 
	<h4>Footer content</h4> 
</div>

footer 툴바 역시 기본적으로 a테마를 적용받으며 ,쉽게 테마를 변경할 수 있습니다.
옵션 및 설정개념은 header와 매우 비슷합니다.
차이는 footer는 덜 구조적이며 유연하기에 왼쪽이나 오른쪽 자동 정렬을 하지 않습니다.


Adding buttons

footer에 추가된 링크나 버튼 마크업은 자동적으로 버튼으로 변경되어 집니다. 공간절약을 위해 문구와 아이콘의 길이만큼 inline 스타일을 셋팅합니다.

툴바의 이동버튼이나 위젯들 사이에는 어떤 패딩값도 없기때문에 패딩을 적용하고 싶다면 class="ui-bar" 속성을 footer태그에 추가합니다.

<div data-role="footer" class="ui-bar">
	<a href="index.html" data-role="button" data-icon="delete">Remove</a>
	<a href="index.html" data-role="button" data-icon="plus">Add</a>
	<a href="index.html" data-role="button" data-icon="arrow-u">Up</a>
	<a href="index.html" data-role="button" data-icon="arrow-d">Down</a>
</div>

data-role="controlgroup" 과 data-type="horizontal"속성을 추가한 태그로 감싸게 되면 버튼 그룹을 만들수 있습니다.


Adding form elements

폼 속성과 다른 컨텐츠도 툴바에 추가될수있습니다.

<div data-role="footer" class="ui-bar" data-position="inline">
        <label for="select-choice-1">Shipping:</label>
        <select name="select-choice-1" id="select-choice-1">
            <option value="standard">Standard: 7day</option>
            <option value="rush>Rush: 3days</option>
            <option value="express">Express:next day</option>
        </select>
</div>   


Persistent footers

footer가 전체적인 네비게이션 역할을 하는 경우 페이지의 이동중에도 고정된 위치에 보여지길 바랄 겁니다. 이는 JQM에 포함된 영구적인 푸터 특징을 사용하여 이뤄질수 있습니다.

footer가 페이지 이동중에도 자기 위치에 머물 수 있게 하는것은 모든 적절한 페이지들의 footer에 data-id속성을 추가하고, 각각 같은 id값을 사용하여 가능합니다. 현재 페이지와 타겟페이지에 data-id="myfooter"를 추가함으로서, 프레임웍 페이지 애니메이션이 일어나는 동안 같은 곳에 footer 앵커를 유지할 것입니다.

이 효과는 header와 footer에 data-position="fixed" 속성을 셋팅하여야 올바르게 동작할 것입니다.

'Jquery > Jquery mobile' 카테고리의 다른 글

Fullscreen positioning  (0) 2013.03.08
Fixed positioning  (0) 2013.03.08
Navbars  (0) 2013.03.08
Header bars  (0) 2013.03.07
jquery mobile 시작하기  (0) 2013.03.07
:

Header bars

Jquery/Jquery mobile 2013. 3. 7. 16:39

data-role="page" 태그안에 data-role="header"를 삽입하여 사용합니다.

<div data-role="header"> 
	<h1>Page Title</h1> 
</div>


Default header features

툴바의 기본 테마는 검정색의 a테마이며 data-theme 속성을 추가하여 사용자가 쉽게 테마 변경이 가능합니다. 사용하면 좌측에 back버튼이 자동으로 생성됩니다. 만약 버튼을 사용하지 않거나 다른용도로 사용할경우 data-backbtn="false" 속성을 추가하여 사용합니다.


Adding buttons

기본적인 헤더설정으로 타이틀문구 양쪽으로 버튼을 설정할수 있습니다.

<div data-role="header" data-position="inline">
	<a href="index.html" data-icon="delete">Cancel</a>
	<h1>Edit Contact</h1>
	<a href="index.html" data-icon="check">Save</a>
</div>


Creating custom back buttons

앵커 태그에 data-rel="back" 속성을 추가하면 뒤로가기 버튼처럼 작동합니다.또한, 단순히 뒤로가기 효과만을 원할 경우 data-direction="reverse" 속성을 사용하면 됩니다.


Default button posisioning

하위링크는 자동으로 첫 링크를 왼쪽 버튼 슬롯에 셋팅하고, 두번째 링크는 오른쪽 버튼 슬롯에 셋팅합니다. 그리고 버튼은 기본적으로 a테마를 적용받게 되며 테마를 설정할 경우 data-theme 속성을 추가하여 설정합니다.
<a href="" data-icon="delete" data-theme="b">Cancel</a>


Controlling button position with classes

버튼 위치는 버튼 앵커 태그에 class를 추가하여 조정이 가능합니다. 앵커태그에 ui-btn-left 혹은 ui-btn-right의 class를 추가합니다. 버튼을 오른쪽에 하나만 위치하게 할 경우는 data-backbtn="false"속성을 추가하고 class 속성에 ui-btn-right을 추가하면 됩니다.
<a href="" data-icon="gear" class="ui-btn-right>Options</a>


Customizing the back button text

이전페이지로 돌아가기 버튼의 텍스트를 설정하고 싶다면, data-back-btn-text="previous"속성을 사용하거나, 페이지 플러그인 옵션을 통해 $.mobile.page.prototype.options.backBtnText="previous"로 셋팅 가능합니다.


Default back button style

$.mobile.page.prototype.options.backBtnTheme="a"를 사용하여 돌아가기 버튼의 테마를 변경할수 있습니다.


'Jquery > Jquery mobile' 카테고리의 다른 글

Fullscreen positioning  (0) 2013.03.08
Fixed positioning  (0) 2013.03.08
Navbars  (0) 2013.03.08
Footer bars  (0) 2013.03.07
jquery mobile 시작하기  (0) 2013.03.07
:

jquery mobile 시작하기

Jquery/Jquery mobile 2013. 3. 7. 16:24

Jquery Mobile을 사용하기 위해서는 html문서의 head태그에 3가지 파일을 참조해 주면 됩니다.

<!DOCTYPE html> 
<html> 
	<head> 
	<title>Page Title</title> 
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
	<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
</head> 
<body> 

...

</body>
</html>


본문의 내용은 div태그 안에 data-role="page" 안에 구현합니다.

<div data-role="page"> 
	<div data-role="header">...</div> 
	<div data-role="content">...</div> 
	<div data-role="footer">...</div> 
</div>


'Jquery > Jquery mobile' 카테고리의 다른 글

Fullscreen positioning  (0) 2013.03.08
Fixed positioning  (0) 2013.03.08
Navbars  (0) 2013.03.08
Footer bars  (0) 2013.03.07
Header bars  (0) 2013.03.07
:

jquery checkbox관련 기능

Jquery 2012. 7. 3. 17:17

1) checkbox checked 여부

id 인 경우 : $('input:checkbox [ id="checkbox_id" ]').is(":checked") == true;
name인 경우 : $('input:checkbox [ name="checkbox_name"]').is(":checked") == true;

2) checkbox 전체 갯수 : $('input:checkbox [ name="checkbox_name"]').length

3) checkbox 선택된 갯수 : $('input:checkbox [ name="checkbox_name"]:checked').length

4) checkbox 전체 순회 하며 checked 처리

$('input:checkbox [ name="checkbox_name"]').each(function() {
        this.checked = true;
        if ( $(this).is(":checked") ) {
                  처리로직;        
        }
});


5) checkbox value 값 가져오기

$('input:checkbox [ id="checkbox_id" ]').val();

5-1) checkbox value 여러개 값 한번에 가져오기

$('input[id="checkbox_id"]:checkbox:checked').map(function(){
        return $(this).val();
}).get().join(",");

6) checkbox checked 처리하기

$('input:checkbox [ id="checkbox_id"]').attr("checked", true);

'Jquery' 카테고리의 다른 글

jquery datepicker  (0) 2012.06.01
JQuery.js 와 Prototype.js 같이 사용하기  (0) 2010.09.06
:

jquery datepicker

Jquery 2012. 6. 1. 18:10

기본 사용법

$(function() {
    $( "#searchDate" ).datepicker({
        method
    });
});   

메소드 종류

showOn: 'button'     //우측에 달력 버튼 사용
buttonImage: '/images/icon_cal.gif'     //버튼을 이미지로
buttonImageOnly: true     //버튼만 사용(원래는 인풋박스 클릭)
buttonText:"달력"    //버튼 텍스트
showButtonPanel: true     //하단 버튼 패널 보이기(today,done)
showMonthAfterYear:true     //년도 다음에 월 표시
dateFormat: 'yymmdd'    //날짜표시포맷(yymmdd,yy.mm.dd,yy-mm-dd 등)
changeYear: true    //년도 선택 셀렉트 박스 표시
changeMonth: true    //월 선택 셀렉트 박스 표시
minDate: '-0d'    //최소 이전 날짜(-0d:오늘부터) null은 제한없음
showOtherMonths: true    //나머지날짜도 화면에 표시,선택은 불가
selectOtherMonths: false    //나머지날짜도 선택하려면 true 


한글화

    $.datepicker.regional['ko']= {
          closeText:'닫기',
          prevText:'이전달',
          nextText:'다음달',
          currentText:'오늘',
          monthNames:['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
          monthNamesShort:['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
          dayNames:['일','월','화','수','목','금','토'],
          dayNamesShort:['일','월','화','수','목','금','토'],
          dayNamesMin:['일','월','화','수','목','금','토']};
   
    $.datepicker.setDefaults( $.datepicker.regional[ 'ko' ] );

토,일요일 선택 불가

function noWeekend(date) {
      return [date.getDay() != 0 && date.getDay() != 6, ''];
}
beforeShowDay: noWeekend 메소드 추가

토,일요일 색깔 변경

.ui-datepicker-week-end {color:red;}
.ui-datepicker-week-end .ui-state-default {color:red;}

 //휴일을 배열로 설정
    var holidays = {
            "0101":{type:0, title:"신정"},
            "0301":{type:0, title:"삼일절"},
            "0505":{type:0, title:"어린이날"},
            "0606":{type:0, title:"현충일"},
            "0815":{type:0, title:"광복절"},
            "1003":{type:0, title:"개천절"},
            "1225":{type:0, title:"크리스마스"}
    };

 var holiday = holidays[$.datepicker.formatDate("mmdd",day )]; //표시날이 휴일인지 체크

css

.date-holiday0 .ui-state-default {  background-image: none; background-color: #684468;border-color: #535353}

달력 버튼 css적용

$('img.ui-datepicker-trigger').css({'position':'relative','top':'5px'});

2개 입력시 마감날짜가 시작날짜 전을 선택하지 못하게 하는 경우

onSelect: function( selectedDate ) {
                var option = this.id == "startDate" ? "minDate" : "maxDate",
                    instance = $( this ).data( "datepicker" );
                    date = $.datepicker.parseDate(
                        instance.settings.dateFormat ||
                        $.datepicker._defaults.dateFormat,
                        selectedDate, instance.settings );
                dates.not( this ).datepicker( "option", option, date );
            }

달력 크기 조절
jquery-ui-xxx.css 파일에서 요부분을 찾아

.ui-datepicker { width: 17em; padding: .2em .2em 0; display: none; } font-size 를 원하는 크기로 요렇게 바꿔주면 된다. 달력 팝업 사이즈를 크게 하고 싶을때는 font 크기를 크게하고 작게 하고 싶을때는 font 크기를 작게 해주면 팝업창이 쥐똥만하게 뜬다.

.ui-datepicker { width: 17em; padding: .2em .2em0; display: none; font-size: 20px;}




'Jquery' 카테고리의 다른 글

jquery checkbox관련 기능  (0) 2012.07.03
JQuery.js 와 Prototype.js 같이 사용하기  (0) 2010.09.06
:

JQuery.js 와 Prototype.js 같이 사용하기

Jquery 2010. 9. 6. 13:29
<script type="text/javascript" src="/js/prototype.js"></script>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript">
var $J = jQuery.noConflict();
</script>




위처럼 써주고 JQuery를 사용할때는 $ 대신 $J 를 사용하시면 됩니다.

'Jquery' 카테고리의 다른 글

jquery checkbox관련 기능  (0) 2012.07.03
jquery datepicker  (0) 2012.06.01
:
1 2 
블로그 이미지 외부메모리 -_- by 포니테일매니아

카테고리

분류 전체보기 (52)
Java script (13)
SQL (8)
HTML (4)
Java (5)
안드로이드 (0)
Flex (1)
Server (5)
기타등등 (0)
Jquery (16)

카테고리

최근에 올라온 글

달력

«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31

최근에 달린 댓글

최근에 받은 트랙백

링크

태그목록

Tistory Cumulus Flash tag cloud by BLUEnLIVE requires Flash Player 9 or better.

글 보관함

카운터

Total : / Today : / Yesterday :
get rsstistory!

티스토리툴바