검색결과 리스트
jquery에 해당되는 글 5건
- 2016.05.02 ( Web ) 스케쥴 관리 웹 만들기
글
※ 제작과정을... 못만들었어요... 시간 날때 틈틈히 만들다 보니.. 과정을...찍어둔다는게...
※ 회원별 나누는구간도 만들어 두긴 했어요...가입부분을 안만들어서 ... ?!
※ IE10버전, 크롬에서만 돌아가는거 확인했어요...나머진...모름...!?
※ 시간을 계속 투자한게 아니라... 틈틈히 기회날때마다 만든거라... 소스가 조금 너저분 할수도 있어요..
※ 그냥....저혼자 쓸려고 만든거라...?! PC버전이용!
※ 주고 받는 데이터 형식은 Json이나 xml을 쓰지 않았어요...귀찮아서가 아님...아마도...
※ css 랑 js 가 길어서 숨겨놨어요 클릭해서 보세요
1. 만들어진 화면
[ 이미지 1 ]
2. 완성본
....DB랑 이것저것 해야되서 여기다가 바로 못올리더라구요... 그래서 링크를 걸께요!!
http://xline.dothome.co.kr/zero.php
내 위에 주소를 눌리면 새창이떠요!1 여기서 확인 가능해요!!
3. 소스부분 ( 주의 : 꽤 김... )
3-1. CSS 부분 (클릭하면 소스가 나와요)
<!-- css style -->
<style>
html, body {
margin: 0;
}
.schedule_body {
width: 890px;
}
.schedule_info {
float: left;
}
.titleHead {
width: 100%;
}
.schedule_addbt_lay {
float: right;
padding-right: 130px;
padding-top: 10px;
}
.TotalView {
width: 310px;
height: 100px;
border: 1px double black;;
margin-left: 10px;
margin-top: 10px;
}
.TotalView.right{
margin-left: 100px;
}
.TotalView .info_body {
font-size: 13px;
vertical-align: middle;
margin-top: 2px;
}
.TotalView .info_body div {
line-height: 21px;
vertical-align: middle;
}
.lodingMsg {
width: 100px;
height: 20px;
border: 1px;
border-style: double;
float: left;
line-height: 20px;
vertical-align: middle;
padding-left: 10px;
font-size: 13px;
margin-top: 10px;
margin-left: 10px;
opacity: 0;
}
.info_veiw_bk {
width: 100%;
}
.info_veiw_bk .info_view_body {
width: 740px;
height: 105px;
/* height: 350px; */
margin-left: 10px;
margin-top: 10px;
border: 1px;
border-style: double;
overflow: hidden;
}
.info_veiw_bk .info_view_body div {
margin-left: 15px;
padding-top: 10px;
}
.info_veiw_bk .info_view_body div > .rightSaveBt {
float: right;
width: 40px;
height: 20px;
border: 1px;
border-style: dotted;
cursor: pointer;
font-size: 14px;
margin-top: 0px;
margin-right: 10px;
padding-top: 0px;
line-height: 20px;
text-align: center;
vertical-align: middle;
display: none;
}
.info_veiw_bk .info_view_body div > #info_sDay_input {
text-align: center;
}
.info_veiw_bk .info_view_body div > #info_eDay_input {
text-align: center;
}
.info_veiw_bk .info_view_body div > .rightSaveBt:hover {
background-color: #ffff00;
}
.info_veiw_bk .info_view_body #info_subject_memo {
width: 638px;
height: 200px;
margin-left: 30px;
}
.schedule_info {
width: 300px;
height: 90px;
background-color: #ffffff;
border: 1px;
border-style: double;
position: absolute;
z-index: 99;
display: none;
}
.schedule_info .info_subject {
font-size: 14px;
font-family: -webkit-body;
margin-left: 15px;
margin-top: 5px;
}
.schedule_info .info_content {
font-size: 13px;
font-family: -webkit-body;
margin-left: 10px;
margin-top: 5px;
}
.schedule_info .info_content p {
margin-top: 0px;
margin-bottom: 2px;
}
.schedule_body .inDay {
padding-left: 10px;
height: 30px;
}
.schedule_body .inDay > div {
width: 22px;
height: 22px;
line-height: 22px;
vertical-align: middle;
text-align: center;
float: left;
border: 1px;
border-style: dotted;
}
.schedule_body .addSchedule {
width: 100%;
height: 220px;
padding-top: 10px;
border-top: 1px;
border-bottom: 1px;
border-style: dotted;
border-left: 0px;
border-right: 0px;
background-color: #EFEFEF;
}
.schedule_body .addSchedule div {
margin-left: 10px;
width: 95%;
line-height: 28px;
vertical-align: middle;
}
.schedule_body .addSchedule .addLineView #inAddDayMini {
height: 22px;
width: 22px;
line-height: 22px;
vertical-align: middle;
text-align: center;
float: left;
border: 1px;
border-style: dotted;
margin-left: 0px;
cursor: pointer;
}
.schedule_body .inScheduleView {
width: 99%;
height: 141px;
margin-left: 10px;
position: relative;
}
.schedule_body .inScheduleView #inSchDiv {
width: 0px;
height: 25px;
position: absolute;
line-height: 25px;
text-align: center;
vertical-align: middle;
overflow: hidden;
cursor: pointer;
border: 1px double #A2A2A2;
border-top-right-radius: 5px;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.schedule_body .inScheduleView #InSchedule {
width: 23px;
height: 100%;
float: left;
border-right: 1px;
border-left: 0px;
border-top: 0px;
border-bottom: 0px;
border-style: dotted;
}
.schedule_body .inScheduleView #InSchedule.last {
border-right: 0px;
}
.schedule_body .info {
width: 164px;
height: 50px;
line-height: 50px;
vertical-align: middle;
padding-right: 180px;
margin: auto;
}
.schedule_body .info > div {
float: left;
width: 22px;
height: 22px;
cursor: pointer;
padding-left: 10px;
}
.schedule_body .info .TodayView {
width: 100px;
cursor: context-menu;
text-align: center;
padding-left: 0px;
}
.schedule_body .addSchedule div .ColorPikerBody {
width: 350px;
height: 176px;
border: 1px;
border-style: dotted;
margin-top: 5px;
}
.schedule_body .addSchedule div .ColorPik {
margin: auto;
width: 350px;
}
.schedule_body .addSchedule div .ColorPik div {
width: 35px;
height: 35px;
line-height: 35px;
margin: 0;
float: left;
cursor: pointer;
}
.schedule_body .addSchedule div .ColorView {
width: 28px;
height: 28px;
float: left;
margin-right: 10px;
border: 1px;
border-style: dotted;
}
</style>
3-1. JS 부분 ( 클릭하면 소스가 나와요 )
<!-- script -->
<script src='/_Js/JQuery/jquery-2.2.2.js'></script>
<script>
var _user_id = "<?php echo $_user_id;?>";
var init_day = new Date();
var in_year = init_day.getFullYear();
var in_month = init_day.getMonth() + 1;
var in_today = init_day.getDate();
var start_day = 0;
var end_day = 0;
var lastDay = 0;
var SaveInfoScheduleArr;
var clickOnFlag = false;
var DdayInfoScheduleArr;
$(function(){
LoadDdayList();
LoadSchedule();
$('.PrepBt').click(function(){
$('.inDay')[0].innerHTML = "";
$('.addLineView')[0].innerHTML = "";
$('.inScheduleView')[0].innerHTML = "";
in_month -= 1;
if(in_month == 0){
in_month = 12;
in_year -= 1;
}
if(in_month < 10){
drawDayLine(in_year, "0"+in_month);
drawDayAddLine(in_year, "0"+in_month);
drawInScheduleLine(in_year, "0"+in_month);
}else{
drawDayLine(in_year, in_month);
drawDayAddLine(in_year, in_month);
drawInScheduleLine(in_year, in_month);
}
if($('#s_day').val() != ''){
inBkColorChange($('#s_day').val(), $('#e_day').val());
}
LoadSchedule();
modViewCloseBtEvent();
});
$('.NextBt').click(function(){
$('.inDay')[0].innerHTML = "";
$('.addLineView')[0].innerHTML = "";
$('.inScheduleView')[0].innerHTML = "";
in_month += 1;
if(in_month == 13){
in_month = 1;
in_year += 1;
}
if(in_month < 10){
drawDayLine(in_year, "0"+in_month);
drawDayAddLine(in_year, "0"+in_month);
drawInScheduleLine(in_year, "0"+in_month);
}else{
drawDayLine(in_year, in_month);
drawDayAddLine(in_year, in_month);
drawInScheduleLine(in_year, in_month);
}
if($('#s_day').val() != ''){
inBkColorChange($('#s_day').val(), $('#e_day').val());
}
LoadSchedule();
modViewCloseBtEvent();
});
});
function init() {
$('.inDay')[0].innerHTML = "";
$('.addLineView')[0].innerHTML = "";
$('.inScheduleView')[0].innerHTML = "";
if(in_month < 10){
drawDayLine(in_year, "0"+in_month);
drawDayAddLine(in_year, "0"+in_month);
drawInScheduleLine(in_year, "0"+in_month);
}else{
drawDayLine(in_year, in_month);
drawDayAddLine(in_year, in_month);
drawInScheduleLine(in_year, in_month);
}
toDayCheck();
}
function toDayCheck(){
if(Number(in_month) == Number((init_day.getMonth()+1)) && Number(in_year) == Number(init_day.getFullYear())){
$('.inDayMini_'+Number(in_today)).css('background-color', '#8DF6FB');
$('.InSchedule_'+Number(in_today)).css('background-color', '#8DF6FB');
}
getInputDayLabel(in_year, in_month);
}
function getInputDayLabel(yy, mm) {
var Getweek = new Array('일요일', '월요일', '화요일', '수요일', '목요일', '금요일', '토요일');
var Gettoday = "";
for(var i=1;i<=lastDay;i++){
if(mm < 10){
if(i < 10) {
Gettoday = new Date(yy+"-0"+mm+"-0"+i).getDay();
}else {
Gettoday = new Date(yy+"-0"+mm+"-"+i).getDay();
}
}else{
Gettoday = new Date(yy+"-"+mm+"-"+i).getDay();
}
if(Getweek[Gettoday] == "일요일" || Getweek[Gettoday] == "토요일"){
$('.inDayMini_'+i).css('background-color', '#FFEBEB');
$('.InSchedule_'+i).css('background-color', '#FFEBEB');
}
}
}
function drawDayLine(yy, mm) {
$('.TodayView')[0].innerHTML = in_year+"-"+in_month;
lastDay = ( new Date( yy, "0"+mm, 0) ).getDate();
for(var i=1; i <= lastDay; i++){
$('.inDay')[0].innerHTML += "<div class='inDayMini_"+i+"' id='inDayMini'>"+i+"</div>";
}
}
function drawDayAddLine(yy, mm) {
lastDay = ( new Date( yy, "0"+mm, 0) ).getDate();
for(var i=1; i <= lastDay; i++){
var dayMin = i;
if(i < 10){
dayMin = "0"+i;
}
$('.addLineView')[0].innerHTML += " <div class='inAddDayMini_"+i+"' id='inAddDayMini' tumb='"+yy+mm+dayMin+"' inPos='"+i+"'>"+i+"</div>";
}
$("[class^='inAddDayMini_']").hover(
function (){
if($(this).css("background-color") != "rgb(249, 149, 218)"){
$(this).css("background-color", "#ffff00");
}
},
function (){
if($(this).css("background-color") != "rgb(249, 149, 218)"){
$(this).removeAttr('style');
}
}
);
$("[class^='inAddDayMini_']").click(function(){
schedule_add_div_click($(this));
});
}
function drawInScheduleLine (yy, mm) {
lastDay = ( new Date( yy, "0"+mm, 0) ).getDate();
for(var i=1; i <= lastDay; i++){
if(i == lastDay){
$('.inScheduleView')[0].innerHTML += "<div class='InSchedule_"+i+" last' id='InSchedule'></div>";
}else{
$('.inScheduleView')[0].innerHTML += "<div class='InSchedule_"+i+"' id='InSchedule'></div>";
}
}
}
function schedule_add_view() {
if($('.addSchedule').css("display") == "none"){
$('.OnOffbt').val("Close Add Schedule");
$('.addSchedule').css("display", "block");
}else{
$('.OnOffbt').val("Open Add Schedule");
$('.addSchedule').css("display", "none");
}
}
function schedule_add_div_click (obj) {
if(start_day == 0){
obj.css("background-color", "#F995DA");
start_day = obj.attr("tumb");
$('#s_day').val(start_day);
}else if(start_day == obj.attr("tumb")) {
obj.removeAttr('style');
start_day = 0;
clearInput();
}else if(start_day != 0 && start_day != obj.attr("tumb")) {
if(Number(obj.attr("tumb")) > Number(start_day)) {
obj.css("background-color", "#F995DA");
end_day = obj.attr("tumb");
$('#e_day').val(end_day);
inBkColorChange(start_day, end_day);
}
}else {
}
}
function inBkColorChange(s_flag, e_flag) {
clearAddBkColor();
if(e_flag != '' && s_flag != '') {
for(var i=s_flag;i<=e_flag;i++){
$('div[tumb="'+i+'"]').css("background-color", "#F995DA");
}
}else if(s_flag != '' && e_flag == ''){
$('div[tumb="'+s_flag+'"]').css("background-color", "#F995DA");
}
}
function clearAddBkColor() {
$('div[id="inAddDayMini"]').removeAttr('style');
}
function clearInput() {
clearAddBkColor();
$('.addSchedule input[type=text]').val("");
start_day = 0;
end_day = 0;
return false;
}
function schedule_add() {
var url = "스케쥴 등록하는 url 경로";
$('.lodingMsg').animate({
opacity: "1"
}, 500);
$.ajax({
type:"POST",
url:url,
data:{
user_id : _user_id,
subject : $('#s_subject').val(),
content : $('#s_content').val(),
sdate : $('#s_day').val(),
edate : $('#e_day').val(),
field_color : $('#inputColor').val(),
},
success:function(args){
if(args){
LoadDdayList();
LoadSchedule();
schedule_add_view();
clearInput();
}else{
alert("스케쥴 등록 실패.");
LoadSchedule();
schedule_add_view();
}
$('.lodingMsg').animate({
opacity: "0"
}, 500);
},
error:function(e){
alert(e.responseText);
}
});
return false;
}
function colorPickUp() {
if($('.ColorPikerBody').css("display") == "none"){
$('.info_veiw_bk').css('padding-top', '190px');
$('.ColorPikerBody').css("display", "block");
$('.ColorPik')[0].innerHTML = "";
for(var i=0; i< 5; i++){
for(var j=0; j<10; j++){
var InColorPick = Math.random().toString(16).replace(/.*(\w{6})/, '#$1');
$('.ColorPik')[0].innerHTML += "<div class='cPick_1' coloTump='"+InColorPick+"' style='background-color: "+InColorPick+";''></div>";
}
}
$('[class^="cPick_"]').hover(
function(){
$('.ColorView').css("background-color", $(this).attr("coloTump"));
$('#inputColor').val($(this).attr("coloTump"));
}
);
$('[class^="cPick_"]').click(function(){
$('.ColorPikerBody').css("display", "none");
$('.info_veiw_bk').css('padding-top', '0px');
$('#inputColor').val($(this).attr("coloTump"));
});
}else{
$('.info_veiw_bk').css('padding-top', '0px');
$('.ColorPikerBody').css("display", "none");
}
}
function LoadSchedule() {
init();
var NowDate_s = 0;
var NowDate_e = 0;
if(in_month < 10){
NowDate_s = in_year+"0"+in_month+"01";
}else{
NowDate_s = in_year+in_month+"01";
}
if(in_month < 10){
NowDate_e = in_year+"0"+in_month+lastDay;
}else{
NowDate_e = in_year+in_month+lastDay;
}
var url = "스케쥴 등록하는 url 경로";
$('.lodingMsg').animate({
opacity: "1"
}, 500);
$.ajax({
type:"POST",
url:url,
data:{
user_id : _user_id,
yyMonth_s: NowDate_s,
yyMonth_e: NowDate_e,
},
success:function(args){
if(args){
splitScheduleString(args);
}
$('.lodingMsg').animate({
opacity: "0"
}, 500);
},
error:function(e){
alert(e.responseText);
}
});
}
function LoadDdayList() {
var url = "스케쥴 오늘날짜에서부터 D-day 리스트를 가져오는 url 경로";
var now_year = Number(init_day.getFullYear());
var now_month = Number(init_day.getMonth() + 1);
var now_today = Number(init_day.getDate());
var hitNow = "";
if(10 > now_month){
now_month = "0"+now_month;
}
if(10 > now_today){
now_today = "0"+now_today;
}
hitNow = now_year+""+now_month+""+now_today;
$('.lodingMsg').animate({
opacity: "1"
}, 500);
$.ajax({
type:"POST",
url:url,
data:{
user_id : _user_id,
toDay: hitNow,
},
success:function(args){
if(args){
splitScheduleString2(args);
}
$('.lodingMsg').animate({
opacity: "0"
}, 500);
},
error:function(e){
alert(e.responseText);
}
});
}
/*
***********************************************************************
splitScheduleString[0][0] = subject; 스케쥴 제목이 와야되요
splitScheduleString[0][1] = content; 스케쥴 내용이 오구요
splitScheduleString[0][2] = s_date; 스케쥴 시작날짜
splitScheduleString[0][3] = e_date; 스케쥴 종료날짜
splitScheduleString[0][4] = color; 스케쥴 표시할 칼라
splitScheduleString[0][5] = s_idx; 스케쥴 고유 idx
splitScheduleString[0][6] = s_memo; 스케쥴 세부 내용
***********************************************************************
*/
function splitScheduleString(stringTo) {
var InSchArr = stringTo.split('&|&');
var countArr = 0;
SaveInfoScheduleArr = "";
SaveInfoScheduleArr = new Array();
for(var i=0;i<InSchArr.length;i++){
var tempArr = new Array();
tempArr = InSchArr[i].split('@|@');
if( Number(tempArr[2]) >= Number($('[inpos="1"]').attr("tumb")) && Number(tempArr[2]) <= Number($('[inpos="'+lastDay+'"]').attr("tumb")) ){
SaveInfoScheduleArr[countArr] = new Array(tempArr[0], tempArr[1], tempArr[2], tempArr[3], tempArr[4], tempArr[5], tempArr[6]);
countArr += 1;
}else if( Number(tempArr[3]) >= Number($('[inpos="1"]').attr("tumb")) && Number(tempArr[3]) <= Number($('[inpos="'+lastDay+'"]').attr("tumb")) ){
SaveInfoScheduleArr[countArr] = new Array(tempArr[0], tempArr[1], tempArr[2], tempArr[3], tempArr[4], tempArr[5], tempArr[6]);
countArr += 1;
}else if(Number(tempArr[2]) <= Number($('[inpos="1"]').attr("tumb")) && Number(tempArr[3]) >= Number($('[inpos="'+lastDay+'"]').attr("tumb"))){
SaveInfoScheduleArr[countArr] = new Array(tempArr[0], tempArr[1], tempArr[2], tempArr[3], tempArr[4], tempArr[5], tempArr[6]);
countArr += 1;
}
}
ViewheightChange();
DrawInfoSchedule();
}
function splitScheduleString2(stringTo) {
var InSchArr = stringTo.split('&|&');
var countArr = 0;
DdayInfoScheduleArr = "";
DdayInfoScheduleArr = new Array();
for(var i=0;i<InSchArr.length;i++){
var tempArr = new Array();
tempArr = InSchArr[i].split('@|@');
DdayInfoScheduleArr[countArr] = new Array(tempArr[0], tempArr[1], tempArr[2], tempArr[3], tempArr[4], tempArr[5], tempArr[6]);
countArr += 1;
}
info_msg();
}
function ViewheightChange() {
var heightSet = (SaveInfoScheduleArr.length * 33) + 1;
if(heightSet < 141){
$(".inScheduleView").animate({
height: "141px"
}, 1000 );
}else{
$(".inScheduleView").animate({
height: heightSet+"px"
}, 1000 );
}
}
function info_msg() {
var now = new Date();
var then = 0;
var now_year = Number(init_day.getFullYear());
var now_month = Number(init_day.getMonth() + 1);
var now_today = Number(init_day.getDate());
var hitNow = "";
if(10 > now_month){
now_month = "0"+now_month;
}
if(10 > now_today){
now_today = "0"+now_today;
}
hitNow = now_year+""+now_month+""+now_today;
$('.info_msg')[0].innerHTML = "";
var count_info = 0;
for(var i=1; i<=DdayInfoScheduleArr.length;i++){
if(Number(DdayInfoScheduleArr[i-1][3]) >= Number(hitNow)){
then = new Date(YearMonthDay2(DdayInfoScheduleArr[i-1][3]));
var gap = now.getTime() - then.getTime();
gap = Math.floor(gap / (1000 * 60 * 60 * 24)) * -1;
if(i%2 == 0){
$('.info_msg')[0].innerHTML += "<div style='background-color: #F5F5F5;'> "+DdayInfoScheduleArr[i-1][0]+"<div style='float: right; padding-right:10px'>D-day : "+gap+"</div></div>";
}else{
$('.info_msg')[0].innerHTML += "<div> "+DdayInfoScheduleArr[i-1][0]+"<div style='float: right; padding-right:10px'>D-day : "+gap+"</div></div>";
}
count_info += 1;
}
}
var TotalViewHeight = 40 + (count_info * 21);
$('.TotalView').css("height", TotalViewHeight+"px");
$('.titleHead').css("height", (TotalViewHeight+20)+"px");
}
function YearMonthDay2(inDay){
var yy = inDay.substring(0,4);
var mm = inDay.substring(4,6);
var dd = inDay.substring(6,8);
return yy+"-"+mm+"-"+dd;
}
function DrawInfoSchedule(){
for(var i=1; i<=SaveInfoScheduleArr.length;i++){
var left = ($('[tumb="'+SaveInfoScheduleArr[(i-1)][2]+'"]').attr('inpos') * 24) - 24;
var color_set = SaveInfoScheduleArr[(i-1)][4];
$('.inScheduleView')[0].innerHTML += "<div class='inSchDiv_"+i+"' id='inSchDiv' infotumb='"+(i-1)+"' style='bottom:"+(((i-1)*32)+5)+"px; left: "+left+"px; background-color: "+color_set+";'>"+SaveInfoScheduleArr[(i-1)][0]+"</div>";
}
$('[class^=inSchDiv_]').hover(
function(){
var s_day_val = 0;
var e_day_val = 0;
var stringSet = $(this).css("background-color");
stringSet = stringSet.slice(3,-1)+", 0.6)";
$(this).css("background-color", "rgba"+stringSet);
if(!clickOnFlag){
s_day_val = Number($('[tumb="'+SaveInfoScheduleArr[$(this).attr("infotumb")][2]+'"]').attr('inpos'));
e_day_val = Number($('[tumb="'+SaveInfoScheduleArr[$(this).attr("infotumb")][3]+'"]').attr('inpos'));
if(Number(SaveInfoScheduleArr[$(this).attr("infotumb")][2]) < Number($('[inpos="1"]').attr("tumb"))){
s_day_val = 0;
}
if(Number(SaveInfoScheduleArr[$(this).attr("infotumb")][3]) > Number($('[inpos="'+lastDay+'"]').attr("tumb"))){
e_day_val = Number(lastDay);
}
infoSet($(this));
$('.schedule_info').css("display", "block");
for(var i=s_day_val;i<=e_day_val;i++){
$('.inDayMini_'+i).css("background-color", "yellow");
}
}
},
function(){
var stringSet = $(this).css("background-color");
var stringSetArr = stringSet.split(", ");
var stringSet = stringSetArr[0]+", "+stringSetArr[1]+", "+stringSetArr[2]+", 1.0)";
$(this).css("background-color", stringSet);
if(!clickOnFlag){
var s_day_val = Number($('[tumb="'+SaveInfoScheduleArr[$(this).attr("infotumb")][2]+'"]').attr('inpos'));
var e_day_val = Number($('[tumb="'+SaveInfoScheduleArr[$(this).attr("infotumb")][3]+'"]').attr('inpos'));
if(Number(SaveInfoScheduleArr[$(this).attr("infotumb")][2]) < Number($('[inpos="1"]').attr("tumb"))){
s_day_val = 0;
}
if(Number(SaveInfoScheduleArr[$(this).attr("infotumb")][3]) > Number($('[inpos="'+lastDay+'"]').attr("tumb"))){
e_day_val = Number(lastDay);
}
$('.schedule_info').css("display", "none");
for(var i=s_day_val;i<=e_day_val;i++){
$('.inDayMini_'+i).removeAttr('style');
}
toDayCheck();
}
}
);
$('[class^=inSchDiv_]').click(function(){
/* 여기 작업해야됨!!!!!!!! */
if(SaveInfoScheduleArr[$(this).attr('infotumb')][5] == $('#in_idx').val()){
modViewCloseBtEvent();
if($(this).css("border-right") == "0px none rgb(0, 0, 0)"){
$(this).css("border-left", "1px double #A2A2A2");
$(this).css("border-top", "1px double #A2A2A2");
$(this).css("border-bottom", "1px double #A2A2A2");
}else if($(this).css("border-left") == "0px none rgb(0, 0, 0)"){
$(this).css("border-right", "1px double #A2A2A2");
$(this).css("border-top", "1px double #A2A2A2");
$(this).css("border-bottom", "1px double #A2A2A2");
}else{
$(this).css("border", "1px double #A2A2A2");
}
$('[class="rightSaveBt"]').css("display", "none");
return false;
}else{
borderClear();
}
if($(this).css("border-right") == "0px none rgb(0, 0, 0)"){
$(this).css("border-left", "2px groove yellow");
$(this).css("border-top", "2px groove yellow");
$(this).css("border-bottom", "2px groove yellow");
}else if($(this).css("border-left") == "0px none rgb(0, 0, 0)"){
$(this).css("border-right", "2px groove yellow");
$(this).css("border-top", "2px groove yellow");
$(this).css("border-bottom", "2px groove yellow");
}else{
$(this).css("border", "2px");
$(this).css("border-style", "groove");
$(this).css("border-color", "yellow");
}
$('[class="rightSaveBt"]').css("display", "block");
clickOnFlag = true;
$('.schedule_info').css("display", "none");
infoSet($(this));
var s_idx = SaveInfoScheduleArr[$(this).attr('infotumb')][5];
$('#in_idx').val(s_idx);
$('.info_view_body').animate({
height: "350px"
}, 500);
for(var i=1;i<=lastDay;i++){
$('.inDayMini_'+i).removeAttr('style');
}
s_day_val = Number($('[tumb="'+SaveInfoScheduleArr[$(this).attr("infotumb")][2]+'"]').attr('inpos'));
e_day_val = Number($('[tumb="'+SaveInfoScheduleArr[$(this).attr("infotumb")][3]+'"]').attr('inpos'));
if(Number(SaveInfoScheduleArr[$(this).attr("infotumb")][2]) < Number($('[inpos="1"]').attr("tumb"))){
s_day_val = 0;
}
if(Number(SaveInfoScheduleArr[$(this).attr("infotumb")][3]) > Number($('[inpos="'+lastDay+'"]').attr("tumb"))){
e_day_val = Number(lastDay);
}
toDayCheck();
for(var i=s_day_val;i<=e_day_val;i++){
$('.inDayMini_'+i).css("background-color", "yellow");
}
});
inAnimation();
}
function borderClear(){
for(var i=0;i<SaveInfoScheduleArr.length;i++){
if($('div[infotumb="'+i+'"]').css("border-right") == "0px none rgb(0, 0, 0)"){
$('div[infotumb="'+i+'"]').css("border-left", "1px double #A2A2A2");
$('div[infotumb="'+i+'"]').css("border-top", "1px double #A2A2A2");
$('div[infotumb="'+i+'"]').css("border-bottom", "1px double #A2A2A2");
}else if($('div[infotumb="'+i+'"]').css("border-left") == "0px none rgb(0, 0, 0)"){
$('div[infotumb="'+i+'"]').css("border-right", "1px double #A2A2A2");
$('div[infotumb="'+i+'"]').css("border-top", "1px double #A2A2A2");
$('div[infotumb="'+i+'"]').css("border-bottom", "1px double #A2A2A2");
}else{
$('div[infotumb="'+i+'"]').css("border", "1px double #A2A2A2");
}
}
}
function infoSet(obj){
var SubjectVal = SaveInfoScheduleArr[obj.attr('infotumb')][0];
var ContentVal = SaveInfoScheduleArr[obj.attr('infotumb')][1];
var s_date = YearMonthDay(SaveInfoScheduleArr[obj.attr('infotumb')][2]);
var e_date = YearMonthDay(SaveInfoScheduleArr[obj.attr('infotumb')][3]);
$('.info_subject')[0].innerHTML = "<b>"+SubjectVal+"</b>";
$('.info_content')[0].innerHTML = "<p>"+s_date+" ~ "+e_date+"</p><p>"+ContentVal+"</p>";
$('#info_sDay_input').val(SaveInfoScheduleArr[obj.attr('infotumb')][2]);
$('#info_eDay_input').val(SaveInfoScheduleArr[obj.attr('infotumb')][3]);
$('#info_subject_input').val(SaveInfoScheduleArr[obj.attr('infotumb')][0]);
$('#info_subject_content').val(SaveInfoScheduleArr[obj.attr('infotumb')][1]);
$('#info_subject_memo').val(SaveInfoScheduleArr[obj.attr('infotumb')][6]);
$(document).mousemove(function(e){
if(obj.attr('infotumb') > 2){
if((e.pageX+5) < 610){
$('.schedule_info').css('left', e.pageX+5);
$('.schedule_info').css('top', e.pageY);
}else{
$('.schedule_info').css('left', e.pageX-310);
$('.schedule_info').css('top', e.pageY);
}
}else{
if((e.pageX+5) < 610){
$('.schedule_info').css('left', e.pageX+5);
$('.schedule_info').css('top', e.pageY-90);
}else{
$('.schedule_info').css('left', e.pageX-310);
$('.schedule_info').css('top', e.pageY-90);
}
}
});
}
function YearMonthDay(inDay){
var yy = inDay.substring(0,4);
var mm = inDay.substring(4,6);
var dd = inDay.substring(6,8);
return yy+"년 "+mm+"월 "+dd+"일";
}
function inAnimation() {
for(var i=1; i<=SaveInfoScheduleArr.length;i++){
var s_setPos = 0;
var e_setPos = 0;
if(Number(SaveInfoScheduleArr[(i-1)][2]) < Number($('[inpos="1"]').attr("tumb"))){
s_setPos = $('[inpos="1"]').attr('inpos');
$('.inSchDiv_'+i).css("border-left", "0px");
$('.inSchDiv_'+i).css("border-top-left-radius", "0px");
$('.inSchDiv_'+i).css("border-bottom-left-radius", "0px");
}else{
s_setPos = $('[tumb="'+SaveInfoScheduleArr[(i-1)][2]+'"]').attr('inpos');
}
if(Number(SaveInfoScheduleArr[(i-1)][3]) > Number($('[inpos="'+lastDay+'"]').attr("tumb"))){
e_setPos = $('[inpos="'+lastDay+'"]').attr('inpos');
$('.inSchDiv_'+i).css("border-right", "0px");
$('.inSchDiv_'+i).css("border-top-right-radius", "0px");
$('.inSchDiv_'+i).css("border-bottom-right-radius", "0px");
}else{
e_setPos = $('[tumb="'+SaveInfoScheduleArr[(i-1)][3]+'"]').attr('inpos');
}
var widthSet = ((e_setPos - s_setPos)*24) + 21;
$(".inSchDiv_"+i).animate({
width: widthSet+"px"
}, 1500 );
}
}
function modViewCloseBtEvent() {
clickOnFlag = false;
$('#info_sDay_input').val("");
$('#info_eDay_input').val("");
$('#info_subject_input').val("");
$('#info_subject_content').val("");
$('#info_subject_memo').val("");
$('#in_idx').val("");
$('.info_view_body').animate({
height: "105px"
}, 500);
for(var i=1;i<=lastDay;i++){
$('.inDayMini_'+i).removeAttr('style');
}
toDayCheck();
}
function modDelEvent(){
if (confirm("정말 삭제하시겠습니까??") == true){ //확인
var s_idx = $('#in_idx').val();
var url = "스케쥴 삭제 처리하는 url 경로"
$('.lodingMsg').animate({
opacity: "1"
}, 500);
$.ajax({
type:"POST",
url:url,
data:{
user_id : _user_id,
s_idx : s_idx,
},
success:function(args){
if(args){
LoadDdayList();
LoadSchedule();
$('.info_view_body div input[type=text]').val("");
$('.info_view_body div textarea').val("");
modViewCloseBtEvent();
$('[class="rightSaveBt"]').css("display", "none");
}
$('.lodingMsg').animate({
opacity: "0"
}, 500);
},
error:function(e){
alert(e.responseText);
}
});
}else{ //취소
return false;
}
}
function modViewUpdateEvent() {
var s_day = $('#info_sDay_input').val();
var e_day = $('#info_eDay_input').val();
var subject = $('#info_subject_input').val();
var content = $('#info_subject_content').val();
var memo = $('#info_subject_memo').val();
var s_idx = $('#in_idx').val();
var url = "스케쥴 업데이트 및 수정처리하는 url 경로";
$('.lodingMsg').animate({
opacity: "1"
}, 500);
$.ajax({
type:"POST",
url:url,
data:{
user_id : _user_id,
subject : subject,
content : content,
sdate : s_day,
edate : e_day,
memo : memo,
s_idx : s_idx,
},
success:function(args){
if(args){
LoadSchedule();
}else{
clearInput();
init();
}
$('.lodingMsg').animate({
opacity: "0"
}, 500);
},
error:function(e){
alert(e.responseText);
}
});
}
function showObj(obj) {
var str = "";
for(key in obj) {
str += key+"="+obj[key]+"\n";
}
alert(str);
return;
}
function PrepNextDay(flag){
if(!clickOnFlag){
return false;
}
var s_day_yy = Number($('#info_sDay_input').val().substring(0,4));
var s_day_mm = Number($('#info_sDay_input').val().substring(4,6));
var s_day_dd = Number($('#info_sDay_input').val().substring(6,8));
var e_day_yy = Number($('#info_eDay_input').val().substring(0,4));
var e_day_mm = Number($('#info_eDay_input').val().substring(4,6));
var e_day_dd = Number($('#info_eDay_input').val().substring(6,8));
var InlastDay = 0;
InlastDay = ( new Date( s_day_yy, s_day_mm, 0) ).getDate();
switch(Number(flag)){
case 1:
if(1 >= s_day_dd){
if(1 >= s_day_mm){
s_day_yy -= 1;
s_day_mm = 12;
}else{
s_day_mm -= 1;
s_day_dd = ( new Date( s_day_yy, s_day_mm, 0) ).getDate();
}
}else{
s_day_dd -= 1;
}
if(10 > s_day_mm) {
s_day_mm = "0"+s_day_mm;
}
if(10 > s_day_dd) {
s_day_dd = "0"+s_day_dd;
}
$('#info_sDay_input').val(s_day_yy+""+s_day_mm+""+s_day_dd);
break;
case 2:
InlastDay = ( new Date( s_day_yy, s_day_mm, 0) ).getDate();
if(InlastDay <= s_day_dd){
s_day_dd = 1;
if(12 <= s_day_mm){
s_day_yy += 1;
s_day_mm = 1;
}else{
s_day_mm += 1;
}
}else {
s_day_dd += 1;
}
if(10 > s_day_mm) {
s_day_mm = "0"+s_day_mm;
}
if(10 > s_day_dd) {
s_day_dd = "0"+s_day_dd;
}
$('#info_sDay_input').val(s_day_yy+""+s_day_mm+""+s_day_dd);
break;
case 3:
if(1 >= e_day_dd){
if(1 >= e_day_mm){
e_day_yy -= 1;
e_day_mm = 12;
}else{
e_day_mm -= 1;
e_day_dd = ( new Date( e_day_yy, e_day_mm, 0) ).getDate();
}
}else{
e_day_dd -= 1;
}
if(10 > e_day_mm) {
e_day_mm = "0"+e_day_mm;
}
if(10 > e_day_dd) {
e_day_dd = "0"+e_day_dd;
}
$('#info_eDay_input').val(e_day_yy+""+e_day_mm+""+e_day_dd);
break;
case 4:
InlastDay = ( new Date( e_day_yy, e_day_mm, 0) ).getDate();
if(InlastDay <= e_day_dd){
e_day_dd = 1;
if(12 <= e_day_mm){
e_day_yy += 1;
e_day_mm = 1;
}else{
e_day_mm += 1;
}
}else {
e_day_dd += 1;
}
if(10 > e_day_mm) {
e_day_mm = "0"+e_day_mm;
}
if(10 > e_day_dd) {
e_day_dd = "0"+e_day_dd;
}
$('#info_eDay_input').val(e_day_yy+""+e_day_mm+""+e_day_dd);
break;
}
}
</script>
3-1. HTML 부분 ( 클릭하면 소스가 보여요 )
<body> <div class="schedule_info"> <div class="info_subject"><b>제목</b></div><hr><div class="info_content">내용</div> </div> <div class="titleHead"> <div class="TotalView"> <div class="info_body"> <b>현재 진행중인 스케쥴 </b><font style="font-size: 9px; color: gray;"> (지난 프로젝트는 표기하지 않습니다.)</font> <hr> <div class="info_msg"></div> </div> </div> </div> <div class="schedule_body"> <div class="schedule_addbt_lay"> <input type='button' class='OnOffbt' onclick='schedule_add_view();' value='Open Add Schedule'/> </div> <div class="lodingMsg">로딩중...</div> <div class="info"> <div class="PrepBt"><</div> <div class="TodayView">2016-04-26</div> <div class="NextBt">></div> </div> <div class="inScheduleView"></div> <div class="inDay"></div> <div class="addSchedule" style="display:none"> <div><font style="font-size: 13px; color: #F38080;">> 아래 날짜를 선택해주세요.</font></div> <div class="addLineView" style='height: 28px;'></div> <div>기간 : <input type="text" id="s_day" name="s_day" size="8" value="" /> ~ <input type="text" id="e_day" name="e_day" size="8" value="" /></div> <div> 제목 : <input type="text" id="s_subject" name="s_subject" value="" /> </div> <div> 간단설명 : <input type="text" id="s_content" name="s_content" value="" /> </div> <div> <input type='text' id='inputColor' name='inputColor' size='7' onclick='colorPickUp(); return false;' value=''/><div class='ColorView'></div> <div class="ColorPikerBody" style="display:none"> <div class='ColorPik'></div> </div> </div> <div style="padding-top:3px;"> <input type="button" id="s_save" name="s_save" onclick="schedule_add();" value="InSave" /> <input type="button" id="s_clear" name="s_clear" onclick="clearInput();" value="Clear" /> </div> </div> <div class="info_veiw_bk"> <div class="info_view_body"> <input type="hidden" id="in_idx" name="in_idx" value="" /> <div class="mod_subject"> 기간 : <input type="button" onclick="PrepNextDay(1); return false;" value="<" /><input type="text" id="info_sDay_input" name="info_sDay_input" size="8" value="" /><input type="button" onclick="PrepNextDay(2); return false;" value=">" /> ~ <input type="button" onclick="PrepNextDay(3); return false;" value="<" /><input type="text" id="info_eDay_input" name="info_eDay_input" size="8" value="" /><input type="button" onclick="PrepNextDay(4); return false;" value=">" /> <div class="rightSaveBt" id="closeBt" onclick='modDelEvent(); return false;'>Del</div> <div class="rightSaveBt" onclick="modViewUpdateEvent(); return false;" style="margin-left: 0px; margin-right: 00px;">Save</div> </div> <div class="mod_subject"> 제목 : <input type="text" id="info_subject_input" name="info_subject_input" size="80" value="" /> </div> <div class="mod_Content"> 간단설명 : <input type="text" id="info_subject_content" name="info_subject_content" size="80" value="" /> </div> <div class="mod_memo"> 내용<br><textarea id="info_subject_memo" name="info_subject_memo" value="" /></textarea> </div> </div> </div> </div> </body>
3-2 처리단부분
/* 추가 삭제 수정 리스트 가져오는 모든 주고받는 형식은 하단에 정의되로 스트링값으로 주고 받고 있어요 *********************************************************************** splitScheduleString[0][0] = subject; 스케쥴 제목이 와야되요 splitScheduleString[0][1] = content; 스케쥴 내용이 오구요 splitScheduleString[0][2] = s_date; 스케쥴 시작날짜 splitScheduleString[0][3] = e_date; 스케쥴 종료날짜 splitScheduleString[0][4] = color; 스케쥴 표시할 칼라 splitScheduleString[0][5] = s_idx; 스케쥴 고유 idx splitScheduleString[0][6] = s_memo; 스케쥴 세부 내용 *********************************************************************** ex) 제목@|@내용@|@시작날짜@|@종료날짜@|@스케쥴칼라@|@고유idx@|@세부내용&|&제목@|@내용@|@시작날짜@|@종료날짜@|@스케쥴칼라@|@고유idx@|@세부내용 */
궁금하신거 있으면 댓글 ㄱㄱ
'Programing > Web' 카테고리의 다른 글
| ( CSS ) 심플한 드랍다운 메뉴 만들기 (10) | 2016.05.10 |
|---|---|
| ( CSS ) 아주심플하면서 이쁜 메뉴 만들기! (0) | 2016.05.10 |
| ( Jquery ) 아주아주 심플한 칼라 렌덤 팔레트 (0) | 2016.04.27 |
| ( HTML & CSS ) 이쁜 메뉴만들기 두번째 !! (0) | 2016.04.26 |
| ( CSS )( HTML ) 이쁜 메뉴 만들기 (0) | 2016.04.22 |
RECENT COMMENT