jQuery UI의 tab을 동적으로 생성하는 방법.
$(function() {
$('#main_tab').tabs();
});
tab을 생성하는 함수.
function fn_tabAdd() {
no++;
var tabs = $("#main_tab").tabs();
var ul = tabs.find("ul");
$("<li><a href='#tabs-" + no + "'>" + "Tab No." + no + "</a></li>").appendTo(ul);
$("<div id='" + "tabs-" + no + "'>" + "Tabs No." + no + "</div>" ).appendTo(tabs);
tabs.tabs("refresh");
}
html파일.
..
<div id="main_tab">
<ul id="tab_head">
<li><a href="#tabs-0">Tab 1</a></li>
</ul>
<div id="tabs-0">Tab 01</div>
</div>
..
2015년 9월 7일 월요일
2015년 3월 18일 수요일
파이썬 프로그래밍 - Chapter 03
string.py
fred = "Why do gorillas have big nostrils? Big fingers!!"
print (fred)
fred = 'Why do gorillas have big nostrils? Big fingers!!'
print (fred)
fred = '''How do dinosaurs pay their bills?
With tyrannosaurus checks!'''
print (fred)
silly_string = '''He said, "Aren't can't shouldn't wouldn't."'''
print (silly_string)
#escape
single_quote_str = 'He said, "Aren\'t can\'t shouldn\'t wouldn\'t."'
print (single_quote_str)
double_quote_str = "He said, \"Aren't can't shouldn't wouldn't.\""
print (double_quote_str)
myscore = 1000
message = 'I scored %s points'
print (message % myscore)
#placeholder
nums = 'What did the number %s say to the number %s? Nice belt!!'
print (nums % (0, 8))
myletter.py
spaces = ' ' * 25
print('%s 12 Butts Whnd' % spaces)
print('%s Twinklebottom Heath' % spaces)
print('%s West Snoring' % spaces)
print('')
print('')
print('Dear Sir')
print('')
print('I wish to report that tiles are missing from the')
print('outside toilet roof.')
print('I think it was bad wind the other night that blew them away.')
print('')
print('Regards')
print('Malcolm Dithering')
List.py
wizard_list = 'spider legs, toe of frog, eye of newt, bat wing, slug butter, snake dandruff'
print(wizard_list)
wizard_list = ['spider legs', 'toe of frog', 'eye of newt', 'bat wing', 'slug butter', 'snake dandruff']
print(wizard_list)
print(wizard_list[2])
wizard_list[2] = 'snail tongue'
print(wizard_list)
print(wizard_list[2:5])
some_numbers = [1, 2, 5, 10, 20]
print(some_numbers)
some_things = ['Which', 'Witch', 'Is', 'Which']
print(some_things)
number_and_strings = ['Why', 'was', 6, 'afraid', 'of', 7, 'because', 7, 8, 9]
print(number_and_strings)
numbers = [1, 2, 3, 4]
strings = ['I', 'kicked', 'my', 'toe', 'and', 'it', 'is', 'sore']
mylist= [numbers, strings]
print(mylist)
wizard_list.append('bear burp')
print(wizard_list)
wizard_list.append('mandrake')
wizard_list.append('hemlock')
wizard_list.append('swamp gas')
print(wizard_list)
del wizard_list[5]
print(wizard_list)
del wizard_list[8]
del wizard_list[7]
del wizard_list[6]
print(wizard_list)
list1 = [1, 2, 3, 4]
list2 = ['I', 'tripped', 'over', 'and', 'hit', 'the', 'floor']
print(list1 + list2)
list3 = list1 + list2
print(list3)
list1 = [1, 2]
print(list1 * 5)
#tuple
fibs = (0, 1, 1, 2, 3)
fibs2 = (4, 5, 6, 7, 8)
print(fibs[3])
print(fibs * 2)
print(fibs + fibs2)
#map
favorite_sports = {'Ralph Williams' : 'Football',
'Michael Tippett' : 'Basketball',
'Edward Elgar' : 'Baseball',
'Rebecca Clarke' : 'Netball',
'Ethel Smyth' : 'Badminton',
'Frank Bridge' : 'Rugby'}
print(favorite_sports['Rebecca Clarke'])
del favorite_sports['Ethel Smyth']
print(favorite_sports)
favorite_sports['Ralph Williams'] = 'Ice Hockey'
print(favorite_sports)
파이썬 프로그래밍 - Chapter 02
variable.py
found_coins = 20
magic_coins = 10
stolen_coins = 3
msg = "found_coins + magic_coins * 365 - stolen_coins * 52 = %s"
sum = found_coins + magic_coins * 365 - stolen_coins * 52
print (msg % sum)
stolen_coins = 2
sum = found_coins + magic_coins * 365 - stolen_coins * 52
print (msg % sum)
magic_coins = 13
sum = found_coins + magic_coins * 365 - stolen_coins * 52
print (msg % sum)
2014년 12월 2일 화요일
C#으로 구현한 하위 폴더에서 특정 확장자의 파일 갯수를 카운트하는 프로그램.
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.IO;
using System.Windows.Forms;
namespace FileCounter
{
public partial class FileCounter : Form
{
private int counter = 0;
public FileCounter()
{
InitializeComponent();
}
private void label1_Click(object sender, EventArgs e)
{
}
private void txtFolderPath_TextChanged(object sender, EventArgs e)
{
}
private void btnOpenFolderDlg_Click(object sender, EventArgs e)
{
FolderBrowserDialog folderBrowserDialog = new FolderBrowserDialog();
folderBrowserDialog.SelectedPath = @"C\";
if (folderBrowserDialog.ShowDialog() == DialogResult.OK)
{
txtFolderPath.Text = folderBrowserDialog.SelectedPath;
}
}
private void btnFileCount_Click(object sender, EventArgs e)
{
//파일을 찾아야 폴더 선택 여부 확인
if (txtFolderPath.Text == "" || txtFolderPath.Text.Length < 1)
{
MessageBox.Show("대상 폴더를 선택하세요. !!");
return;
}
//찾아야 할 파일 확장자 입력 여부 확인
if (txtFileExt.Text == "" || txtFileExt.Text.Length < 1)
{
MessageBox.Show("파일 확장자를 입력하세요. !!");
return;
}
lbCount.Text = "";
counter = 0;
//Root폴더 아래의 파일 검색
RootSearchFileExtCounter(txtFolderPath.Text, txtFileExt.Text);
//하위 폴더 아래의 파일 검색
DirSearchFileExtCounter(txtFolderPath.Text, txtFileExt.Text);
lbCount.Text = "" + counter;
}
private void btnCancel_Click(object sender, EventArgs e)
{
//종료
this.Close();
}
//Root폴더 아래의 파일을 검색
void RootSearchFileExtCounter(string sDir, string sExt)
{
//입력된 파일 확장자에서 순수한 확장자만 추출
string strExt = sExt;
if (sExt.IndexOf("*") > -1) strExt = strExt.Replace("*", "");
if (sExt.IndexOf(".") > -1) strExt = strExt.Replace(".", "");
//검색을 위한 패턴 생성
string searchPattern = "*." + strExt;
string[] rootFileEntries = Directory.GetFiles(sDir, searchPattern);
foreach (string rootFileName in rootFileEntries)
{
//순수 확장자가 파일명의 끝에 있는지 체크해서 카운트.
if (rootFileName.EndsWith(strExt))
{
counter = counter + 1;
}
}
}
void DirSearchFileExtCounter(string sDir, string sExt)
{
string strExt = sExt;
if (sExt.IndexOf("*") > -1) strExt = strExt.Replace("*", "");
if (sExt.IndexOf(".") > -1) strExt = strExt.Replace(".", "");
string searchPattern = "*." + strExt;
try
{
//Root폴더 아래의 하위 폴더 갯수 만큼 Looping
foreach (string d in Directory.GetDirectories(sDir))
{
//searchPattern에 맞는 파일 목록을 가져온다.
string[] searchFileEntries = Directory.GetFiles(d, searchPattern);
//가져온 파일 목록만큼 Looping
foreach (string sFileName in searchFileEntries)
{
//순수 확장자가 파일명의 끝에 있는지 체크해서 카운트.
if (sFileName.EndsWith(strExt))
{
counter = counter + 1;
}
}
//하위 폴더 검색을 위한 재귀호출
DirSearchFileExtCounter(d, searchPattern);
}
}
catch (System.Exception excpt)
{
Console.WriteLine(excpt.Message);
}
}
}
}
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.IO;
using System.Windows.Forms;
namespace FileCounter
{
public partial class FileCounter : Form
{
private int counter = 0;
public FileCounter()
{
InitializeComponent();
}
private void label1_Click(object sender, EventArgs e)
{
}
private void txtFolderPath_TextChanged(object sender, EventArgs e)
{
}
private void btnOpenFolderDlg_Click(object sender, EventArgs e)
{
FolderBrowserDialog folderBrowserDialog = new FolderBrowserDialog();
folderBrowserDialog.SelectedPath = @"C\";
if (folderBrowserDialog.ShowDialog() == DialogResult.OK)
{
txtFolderPath.Text = folderBrowserDialog.SelectedPath;
}
}
private void btnFileCount_Click(object sender, EventArgs e)
{
//파일을 찾아야 폴더 선택 여부 확인
if (txtFolderPath.Text == "" || txtFolderPath.Text.Length < 1)
{
MessageBox.Show("대상 폴더를 선택하세요. !!");
return;
}
//찾아야 할 파일 확장자 입력 여부 확인
if (txtFileExt.Text == "" || txtFileExt.Text.Length < 1)
{
MessageBox.Show("파일 확장자를 입력하세요. !!");
return;
}
lbCount.Text = "";
counter = 0;
//Root폴더 아래의 파일 검색
RootSearchFileExtCounter(txtFolderPath.Text, txtFileExt.Text);
//하위 폴더 아래의 파일 검색
DirSearchFileExtCounter(txtFolderPath.Text, txtFileExt.Text);
lbCount.Text = "" + counter;
}
private void btnCancel_Click(object sender, EventArgs e)
{
//종료
this.Close();
}
//Root폴더 아래의 파일을 검색
void RootSearchFileExtCounter(string sDir, string sExt)
{
//입력된 파일 확장자에서 순수한 확장자만 추출
string strExt = sExt;
if (sExt.IndexOf("*") > -1) strExt = strExt.Replace("*", "");
if (sExt.IndexOf(".") > -1) strExt = strExt.Replace(".", "");
//검색을 위한 패턴 생성
string searchPattern = "*." + strExt;
string[] rootFileEntries = Directory.GetFiles(sDir, searchPattern);
foreach (string rootFileName in rootFileEntries)
{
//순수 확장자가 파일명의 끝에 있는지 체크해서 카운트.
if (rootFileName.EndsWith(strExt))
{
counter = counter + 1;
}
}
}
void DirSearchFileExtCounter(string sDir, string sExt)
{
string strExt = sExt;
if (sExt.IndexOf("*") > -1) strExt = strExt.Replace("*", "");
if (sExt.IndexOf(".") > -1) strExt = strExt.Replace(".", "");
string searchPattern = "*." + strExt;
try
{
//Root폴더 아래의 하위 폴더 갯수 만큼 Looping
foreach (string d in Directory.GetDirectories(sDir))
{
//searchPattern에 맞는 파일 목록을 가져온다.
string[] searchFileEntries = Directory.GetFiles(d, searchPattern);
//가져온 파일 목록만큼 Looping
foreach (string sFileName in searchFileEntries)
{
//순수 확장자가 파일명의 끝에 있는지 체크해서 카운트.
if (sFileName.EndsWith(strExt))
{
counter = counter + 1;
}
}
//하위 폴더 검색을 위한 재귀호출
DirSearchFileExtCounter(d, searchPattern);
}
}
catch (System.Exception excpt)
{
Console.WriteLine(excpt.Message);
}
}
}
}
2014년 9월 11일 목요일
Full Calendar 사용법 예시.
좀 더 기능을 추가해서 완성도 높은 소스를 제공할 예정이다.
<!DOCTYPE html>
<html>
<title>Full Calendar Example</title>
<head>
<meta charset='utf-8' />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<link href='../css/fullcalendar.css' rel='stylesheet' />
<link href='../css/fullcalendar.print.css' rel='stylesheet' media='print' />
<style>
label, input { display:block; }
input.text { margin-bottom:12px; width:95%; padding: .4em; }
fieldset { padding:0; border:0; margin-top:10px; }
textarea { width:95%; overflow:visible;}
h1 { font-size: 1.2em; margin: .6em 0; }
div#users-contain { width: 350px; margin: 20px 0; }
div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
.ui-dialog .ui-state-error { padding: .3em; }
.validateTips { border: 1px solid transparent; padding: 0.3em; }
</style>
<script src='../js/moment.min.js'></script>
<script src='../js/jquery.min.js'></script>
<script src='http://code.jquery.com/ui/1.11.1/jquery-ui.js'></script>
<script src='../js/fullcalendar.min.js'></script>
<script src='../js/lang-all.js'></script>
<script>
var dialog, form;
var timeList = ["00:00", "00:30", "01:00", "01:30", "02:00", "02:30", "03:00", "03:30", "04:00", "04:30",
"05:00", "05:30", "06:00", "06:30", "07:00", "07:30", "08:00", "08:30", "09:00", "09:30",
"10:00", "10:30", "11:00", "11:30", "12:00", "12:30", "13:00", "13:30", "14:00", "14:30",
"15:00", "15:30", "16:00", "16:30", "17:00", "17:30", "18:00", "18:30", "19:00", "19:30",
"20:00", "20:30", "21:00", "21:30", "22:00", "22:30", "23:00", "23:30"];
var currentDate = moment().format('YYYY-MM-DD');
var currentTime = moment().format('HH:mm');
function setOptionsTimeList(selectName, endHourIndc) {
var checkMinute = currentTime.substring(3);
var checkHour = currentTime.substring(0,2);
var strHour = checkHour;
var strMinute = "00";
//현재 시간보다 30분 빠르게 시간을 설정.
if (checkMinute < 30) {
strMinute = "30";
} else {
strHour = Number(strHour) + 1;
if (strHour < 10) {
strHour = "0" + strHour;
}
}
//시작시간 보다 1시간 늦게 설정.
if (endHourIndc) {
strHour = Number(strHour) + 1;
if (strHour < 10) {
strHour = "0" + strHour;
}
}
//시간 선택 select 박스에서 트겆시간을 선택.
$.each(timeList, function(key, val) {
var str = "";
if (val == (strHour + ":" + strMinute)) {
str = "<option value=" + val + " selected='selected'>" + val + "</option>";
} else {
str = "<option value=" + val + ">" + val + "</option>";
}
$(selectName).append(str);
});
}
function saveSchedule() {
alert('saveSchedule Function');
dialog.dialog("close");
}
function setDatePicker(datepicker) {
$(datepicker).datepicker({
dateFormat:'yy.mm.dd', //선택된 날짜 포맷(yyyy.mm.dd)
monthNamesShort: ['1월','2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
monthNames: ['1월','2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
dayNamesMin: ['일', '월', '화', '수', '목', '금', '토'],
dayNamesShot: ['일', '월', '화', '수', '목', '금', '토'],
dayNames: ['일요일', '월요일', '화요일', '수요일', '목요일', '금요일', '토요일'],
firstDay: 1, //0: 일요일 부터 시작, 1:월요일 부터 시작
autoSize: true, //default: false, input 사이즈를 자동으로 리사이즈.
showAnim: "fold", //default: show
showButtonPanel: true, //하단에 Today, Done 버튼 Display
showWeek: true, //주차 보이기
weekHeader: "주차", //default: Wk, 주차 헤드 부분의 명칭 설정
changeMonth: true, //월 변경가능
changeYear: true, //년 변경가능
showMonthAfterYear: true, //년 뒤에 월 표시
gotoCurrent: true //default: false, true일 경우에는 Today버튼 클릭 시 현재 일자로 이동하지 못함. false는 가능.
});
}
//날짜와 시간 선택 부분을 초기화. 모두 선택 가능하도록...
function initialDateTime() {
$('#startDate').removeAttr('disabled');
$('#endDate').removeAttr('disabled');
$('#startTime').removeAttr('disabled');
$('#endTime').removeAttr('disabled');
}
$(document).ready(function() {
var currentLangCode = 'ko';
var schedule = new Array();
// build the language selector's options
$.each($.fullCalendar.langs, function(langCode) {
$('#lang-selector').append(
$('<option/>')
.attr('value', langCode)
.prop('selected', langCode == currentLangCode)
.text(langCode)
);
});
// rerender the calendar when the selected option changes
$('#lang-selector').on('change', function() {
if (this.value) {
currentLangCode = this.value;
$('#calendar').fullCalendar('destroy');
renderCalendar();
}
});
dialog = $('#dialog-form').dialog({
autoOpen: false,
height: 400,
width: 450,
modal: true,
buttons: {
"Save": saveSchedule,
Cancel: function() {
dialog.dialog("close");
}
},
close: function() {
form[0].reset();
//allFields.removeClass("ui-state-error");
}
});
form = dialog.find( "form" ).on( "submit", function( event ) {
event.preventDefault();
saveSchedule();
});
//check box 클릭 이벤트 등록
$('#allDay').click(function(){
var chk = $(this).is(":checked");
if (chk) {
$('#startDate').attr('disabled', 'disabled');
$('#endDate').attr('disabled', 'disabled');
$('#startTime').attr('disabled', 'disabled');
$('#endTime').attr('disabled', 'disabled');
} else {
$('#startDate').removeAttr('disabled');
$('#endDate').removeAttr('disabled');
$('#startTime').removeAttr('disabled');
$('#endTime').removeAttr('disabled');
}
});
setDatePicker('#startDate');
setDatePicker('#endDate');
setOptionsTimeList('#startTime', false);
setOptionsTimeList('#endTime', true);
function renderCalendar() {
$('#calendar').fullCalendar({
header: {
//left: 'prevYear,prev,next,nextYear today',
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: currentDate,
lang: currentLangCode,
buttonIcons: false, // show the prev/next text
weekNumbers: true,
editable: true,
eventLimit: true, // allow 'more" link when too many events
dayClick: function(date, jsEvent, view) {
//alert('Clicked on: ' + date.format());
//alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
//alert('Current view: ' + view.name);
dialog.dialog("open");
initialDateTime();
}
});
}
renderCalendar();
});
</script>
<style>
body {
margin: 0;
padding: 0;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
font-size: 14px;
}
#top {
background: #eee;
border-bottom: 1px solid #ddd;
padding: 0 10px;
line-height: 40px;
font-size: 12px;
}
#calendar {
max-width: 900px;
margin: 40px auto;
padding: 0 10px;
}
</style>
</head>
<body>
<div id='top'>
Language:
<select id='lang-selector'> </select>
</div>
<div id="dialog-form" title="Create new schedule">
<form>
<fieldset>
<label for="title">Title</label>
<input type="text" name="title" id="title" class="text ui-widget-content ui-corner-all">
<label for="allDay">하루 종일</label>
<input type="checkbox" id="allDay">
<table>
<tr>
<td>
<label for="startDate">Start Date</label>
</td>
<td>
<input type="text" name="startDate" id="startDate">
</td>
<td>
<label for="startTime">Start Time</label>
</td>
<td>
<select id="startTime"></select>
</td>
</tr>
<tr>
<td>
<label for="endDate">End Date</label>
</td>
<td>
<input type="text" name="endDate" id="endDate">
</td>
<td>
<label for="endDate">End Time</label>
</td>
<td>
<select id="endTime"></select>
</td>
</tr>
</table>
<label for="comments">Comments</label>
<textarea id="comments" name="comments"></textarea>
<!-- Allow form submission with keyboard without duplicating the dialog button -->
<input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
</fieldset>
</form>
</div>
<div id='calendar'> </div>
</body>
</html>
좀 더 기능을 추가해서 완성도 높은 소스를 제공할 예정이다.
<!DOCTYPE html>
<html>
<title>Full Calendar Example</title>
<head>
<meta charset='utf-8' />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<link href='../css/fullcalendar.css' rel='stylesheet' />
<link href='../css/fullcalendar.print.css' rel='stylesheet' media='print' />
<style>
label, input { display:block; }
input.text { margin-bottom:12px; width:95%; padding: .4em; }
fieldset { padding:0; border:0; margin-top:10px; }
textarea { width:95%; overflow:visible;}
h1 { font-size: 1.2em; margin: .6em 0; }
div#users-contain { width: 350px; margin: 20px 0; }
div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
.ui-dialog .ui-state-error { padding: .3em; }
.validateTips { border: 1px solid transparent; padding: 0.3em; }
</style>
<script src='../js/moment.min.js'></script>
<script src='../js/jquery.min.js'></script>
<script src='http://code.jquery.com/ui/1.11.1/jquery-ui.js'></script>
<script src='../js/fullcalendar.min.js'></script>
<script src='../js/lang-all.js'></script>
<script>
var dialog, form;
var timeList = ["00:00", "00:30", "01:00", "01:30", "02:00", "02:30", "03:00", "03:30", "04:00", "04:30",
"05:00", "05:30", "06:00", "06:30", "07:00", "07:30", "08:00", "08:30", "09:00", "09:30",
"10:00", "10:30", "11:00", "11:30", "12:00", "12:30", "13:00", "13:30", "14:00", "14:30",
"15:00", "15:30", "16:00", "16:30", "17:00", "17:30", "18:00", "18:30", "19:00", "19:30",
"20:00", "20:30", "21:00", "21:30", "22:00", "22:30", "23:00", "23:30"];
var currentDate = moment().format('YYYY-MM-DD');
var currentTime = moment().format('HH:mm');
function setOptionsTimeList(selectName, endHourIndc) {
var checkMinute = currentTime.substring(3);
var checkHour = currentTime.substring(0,2);
var strHour = checkHour;
var strMinute = "00";
//현재 시간보다 30분 빠르게 시간을 설정.
if (checkMinute < 30) {
strMinute = "30";
} else {
strHour = Number(strHour) + 1;
if (strHour < 10) {
strHour = "0" + strHour;
}
}
//시작시간 보다 1시간 늦게 설정.
if (endHourIndc) {
strHour = Number(strHour) + 1;
if (strHour < 10) {
strHour = "0" + strHour;
}
}
//시간 선택 select 박스에서 트겆시간을 선택.
$.each(timeList, function(key, val) {
var str = "";
if (val == (strHour + ":" + strMinute)) {
str = "<option value=" + val + " selected='selected'>" + val + "</option>";
} else {
str = "<option value=" + val + ">" + val + "</option>";
}
$(selectName).append(str);
});
}
function saveSchedule() {
alert('saveSchedule Function');
dialog.dialog("close");
}
function setDatePicker(datepicker) {
$(datepicker).datepicker({
dateFormat:'yy.mm.dd', //선택된 날짜 포맷(yyyy.mm.dd)
monthNamesShort: ['1월','2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
monthNames: ['1월','2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
dayNamesMin: ['일', '월', '화', '수', '목', '금', '토'],
dayNamesShot: ['일', '월', '화', '수', '목', '금', '토'],
dayNames: ['일요일', '월요일', '화요일', '수요일', '목요일', '금요일', '토요일'],
firstDay: 1, //0: 일요일 부터 시작, 1:월요일 부터 시작
autoSize: true, //default: false, input 사이즈를 자동으로 리사이즈.
showAnim: "fold", //default: show
showButtonPanel: true, //하단에 Today, Done 버튼 Display
showWeek: true, //주차 보이기
weekHeader: "주차", //default: Wk, 주차 헤드 부분의 명칭 설정
changeMonth: true, //월 변경가능
changeYear: true, //년 변경가능
showMonthAfterYear: true, //년 뒤에 월 표시
gotoCurrent: true //default: false, true일 경우에는 Today버튼 클릭 시 현재 일자로 이동하지 못함. false는 가능.
});
}
//날짜와 시간 선택 부분을 초기화. 모두 선택 가능하도록...
function initialDateTime() {
$('#startDate').removeAttr('disabled');
$('#endDate').removeAttr('disabled');
$('#startTime').removeAttr('disabled');
$('#endTime').removeAttr('disabled');
}
$(document).ready(function() {
var currentLangCode = 'ko';
var schedule = new Array();
// build the language selector's options
$.each($.fullCalendar.langs, function(langCode) {
$('#lang-selector').append(
$('<option/>')
.attr('value', langCode)
.prop('selected', langCode == currentLangCode)
.text(langCode)
);
});
// rerender the calendar when the selected option changes
$('#lang-selector').on('change', function() {
if (this.value) {
currentLangCode = this.value;
$('#calendar').fullCalendar('destroy');
renderCalendar();
}
});
dialog = $('#dialog-form').dialog({
autoOpen: false,
height: 400,
width: 450,
modal: true,
buttons: {
"Save": saveSchedule,
Cancel: function() {
dialog.dialog("close");
}
},
close: function() {
form[0].reset();
//allFields.removeClass("ui-state-error");
}
});
form = dialog.find( "form" ).on( "submit", function( event ) {
event.preventDefault();
saveSchedule();
});
//check box 클릭 이벤트 등록
$('#allDay').click(function(){
var chk = $(this).is(":checked");
if (chk) {
$('#startDate').attr('disabled', 'disabled');
$('#endDate').attr('disabled', 'disabled');
$('#startTime').attr('disabled', 'disabled');
$('#endTime').attr('disabled', 'disabled');
} else {
$('#startDate').removeAttr('disabled');
$('#endDate').removeAttr('disabled');
$('#startTime').removeAttr('disabled');
$('#endTime').removeAttr('disabled');
}
});
setDatePicker('#startDate');
setDatePicker('#endDate');
setOptionsTimeList('#startTime', false);
setOptionsTimeList('#endTime', true);
function renderCalendar() {
$('#calendar').fullCalendar({
header: {
//left: 'prevYear,prev,next,nextYear today',
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: currentDate,
lang: currentLangCode,
buttonIcons: false, // show the prev/next text
weekNumbers: true,
editable: true,
eventLimit: true, // allow 'more" link when too many events
dayClick: function(date, jsEvent, view) {
//alert('Clicked on: ' + date.format());
//alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
//alert('Current view: ' + view.name);
dialog.dialog("open");
initialDateTime();
}
});
}
renderCalendar();
});
</script>
<style>
body {
margin: 0;
padding: 0;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
font-size: 14px;
}
#top {
background: #eee;
border-bottom: 1px solid #ddd;
padding: 0 10px;
line-height: 40px;
font-size: 12px;
}
#calendar {
max-width: 900px;
margin: 40px auto;
padding: 0 10px;
}
</style>
</head>
<body>
<div id='top'>
Language:
<select id='lang-selector'> </select>
</div>
<div id="dialog-form" title="Create new schedule">
<form>
<fieldset>
<label for="title">Title</label>
<input type="text" name="title" id="title" class="text ui-widget-content ui-corner-all">
<label for="allDay">하루 종일</label>
<input type="checkbox" id="allDay">
<table>
<tr>
<td>
<label for="startDate">Start Date</label>
</td>
<td>
<input type="text" name="startDate" id="startDate">
</td>
<td>
<label for="startTime">Start Time</label>
</td>
<td>
<select id="startTime"></select>
</td>
</tr>
<tr>
<td>
<label for="endDate">End Date</label>
</td>
<td>
<input type="text" name="endDate" id="endDate">
</td>
<td>
<label for="endDate">End Time</label>
</td>
<td>
<select id="endTime"></select>
</td>
</tr>
</table>
<label for="comments">Comments</label>
<textarea id="comments" name="comments"></textarea>
<!-- Allow form submission with keyboard without duplicating the dialog button -->
<input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
</fieldset>
</form>
</div>
<div id='calendar'> </div>
</body>
</html>
2014년 8월 25일 월요일
jQuery의 datepicker를 이용해서 날짜를 선택할 수 있는 편리한 기능이다.
모양은 투박하지만 jQuery를 이용할 경우, 보다 편리하게 달력을 이용해서 일자를 선택할 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" />
<style>
.ui-datepicker{ font-size: 12px; width: 200px; }
.ui-datepicker select.ui-datepicker-month{ width:30%; font-size: 11px; }
.ui-datepicker select.ui-datepicker-year{ width:40%; font-size: 11px; }
</style>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$("#datepicker").datepicker({
dateFormat:'yy.mm.dd', //선택된 날짜 포맷(yyyy.mm.dd)
monthNamesShort: ['1월','2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
monthNames: ['1월','2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
dayNamesMin: ['일', '월', '화', '수', '목', '금', '토'],
dayNamesShot: ['일', '월', '화', '수', '목', '금', '토'],
dayNames: ['일요일', '월요일', '화요일', '수요일', '목요일', '금요일', '토요일'],
firstDay: 1, //0: 일요일 부터 시작, 1:월요일 부터 시작
autoSize: true, //default: false, input 사이즈를 자동으로 리사이즈.
showAnim: "fold", //default: show
showButtonPanel: true, //하단에 Today, Done 버튼 Display
showWeek: false, //주차 보이기
weekHeader: "주차", //default: Wk, 주차 헤드 부분의 명칭 설정
changeMonth: true, //월 변경가능
changeYear: true, //년 변경가능
showMonthAfterYear: true, //년 뒤에 월 표시
gotoCurrent: false //default: false, true일 경우에는 Today버튼 클릭 시 현재 일자로 이동하지 못함. false는 가능.
});
});
function getDate() {
alert($("#datepicker").datepicker("getDate"));
}
</script>
</head>
<body>
<p>
Date: <input type="text" id="datepicker" /> <input type="button" id="btnDate" value="가져오기" onclick="getDate()" />
</p>
</body>
</html>
모양은 투박하지만 jQuery를 이용할 경우, 보다 편리하게 달력을 이용해서 일자를 선택할 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" />
<style>
.ui-datepicker{ font-size: 12px; width: 200px; }
.ui-datepicker select.ui-datepicker-month{ width:30%; font-size: 11px; }
.ui-datepicker select.ui-datepicker-year{ width:40%; font-size: 11px; }
</style>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$("#datepicker").datepicker({
dateFormat:'yy.mm.dd', //선택된 날짜 포맷(yyyy.mm.dd)
monthNamesShort: ['1월','2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
monthNames: ['1월','2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
dayNamesMin: ['일', '월', '화', '수', '목', '금', '토'],
dayNamesShot: ['일', '월', '화', '수', '목', '금', '토'],
dayNames: ['일요일', '월요일', '화요일', '수요일', '목요일', '금요일', '토요일'],
firstDay: 1, //0: 일요일 부터 시작, 1:월요일 부터 시작
autoSize: true, //default: false, input 사이즈를 자동으로 리사이즈.
showAnim: "fold", //default: show
showButtonPanel: true, //하단에 Today, Done 버튼 Display
showWeek: false, //주차 보이기
weekHeader: "주차", //default: Wk, 주차 헤드 부분의 명칭 설정
changeMonth: true, //월 변경가능
changeYear: true, //년 변경가능
showMonthAfterYear: true, //년 뒤에 월 표시
gotoCurrent: false //default: false, true일 경우에는 Today버튼 클릭 시 현재 일자로 이동하지 못함. false는 가능.
});
});
function getDate() {
alert($("#datepicker").datepicker("getDate"));
}
</script>
</head>
<body>
<p>
Date: <input type="text" id="datepicker" /> <input type="button" id="btnDate" value="가져오기" onclick="getDate()" />
</p>
</body>
</html>
2014년 7월 23일 수요일
Javascript에서 callback함수를 이용해서 form의 특정 Object에 대한 validation 확인 후 특정 메시지를 alert창으로 알려준 뒤에 해당 Object에 포커싱을 두는 예제.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
Remove this if you use the .htaccess -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>callback_sample_01</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<script type="text/javascript">
var each = function(arr, callback) {
for(i = 0; i < arr.length; i++) {
callback.prototype = arr[i];
new callback(i);
}
document.getElementById('txtName').focus();
};
onload=function() {
var test = [ { name : 'a' }, { name : 'b' }, { name : 'c' } ];
each(test, function(index) {
alert(index + " = " + this.name);
});
};
</script>
</head>
<body>
<div>
<header>
<h1>callback_sample_01</h1>
</header>
<nav>
<p>
<a href="/">Home</a>
</p>
<p>
<a href="/contact">Contact</a>
<input type="text" id="txtName" name="name"/>
</p>
</nav>
<div>
</div>
<footer>
<p>
© Copyright by
</p>
</footer>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
Remove this if you use the .htaccess -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>callback_sample_01</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<script type="text/javascript">
var each = function(arr, callback) {
for(i = 0; i < arr.length; i++) {
callback.prototype = arr[i];
new callback(i);
}
document.getElementById('txtName').focus();
};
onload=function() {
var test = [ { name : 'a' }, { name : 'b' }, { name : 'c' } ];
each(test, function(index) {
alert(index + " = " + this.name);
});
};
</script>
</head>
<body>
<div>
<header>
<h1>callback_sample_01</h1>
</header>
<nav>
<p>
<a href="/">Home</a>
</p>
<p>
<a href="/contact">Contact</a>
<input type="text" id="txtName" name="name"/>
</p>
</nav>
<div>
</div>
<footer>
<p>
© Copyright by
</p>
</footer>
</div>
</body>
</html>
피드 구독하기:
글 (Atom)