合并css分支
|
|
@ -0,0 +1,77 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="calendar">
|
||||
<header class="header">
|
||||
<ul>
|
||||
<li class="cur">月</li>
|
||||
<li>年</li>
|
||||
</ul>
|
||||
</header>
|
||||
<aside class="sidebar">
|
||||
<div class="wrapper">
|
||||
<div class="title">
|
||||
<span class="btn btn-prev"><</span>
|
||||
<span class="date">2017年9月</span>
|
||||
<span class="btn btn-next">></span>
|
||||
</div>
|
||||
<ul class="week">
|
||||
<li>日</li>
|
||||
<li>一</li>
|
||||
<li>二</li>
|
||||
<li>三</li>
|
||||
<li>四</li>
|
||||
<li>五</li>
|
||||
<li>六</li>
|
||||
</ul>
|
||||
<ul class="day"></ul>
|
||||
</div>
|
||||
</aside>
|
||||
<div class="container">
|
||||
<div id="renderMonth" class="render render-show">
|
||||
<h2 class="title">2017年9月</h2>
|
||||
<ul class="week">
|
||||
<li>周日</li>
|
||||
<li>周一</li>
|
||||
<li>周二</li>
|
||||
<li>周三</li>
|
||||
<li>周四</li>
|
||||
<li>周五</li>
|
||||
<li>周六</li>
|
||||
</ul>
|
||||
<ul class="day"></ul>
|
||||
</div>
|
||||
<div id="renderFullYear" class="render">
|
||||
<div class="title">
|
||||
<h2>2017年</h2>
|
||||
<p>
|
||||
<span class="lunar-year"><i></i>丁酉鸡年</span>
|
||||
<span class="info"><i></i>农历初一</span>
|
||||
</p>
|
||||
</div>
|
||||
<ul class="month"></ul>
|
||||
</div>
|
||||
<div id="control">
|
||||
<input type="button" value="<" class="btn btn-prev">
|
||||
<input type="button" value="今天" class="today">
|
||||
<input type="button" value=">" class="btn btn-next">
|
||||
</div>
|
||||
<div id="popup">
|
||||
<h3 class="title">七夕节</h3>
|
||||
<i class="arrow arrow-left"></i>
|
||||
<i class="arrow arrow-right"></i>
|
||||
<p class="date">2017年8月28日</p>
|
||||
<p class="lunar">丁酉鸡年</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="js/tools.js"></script>
|
||||
<script src="js/chinesecalendar.js"></script>
|
||||
<script src="js/calender.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,94 @@
|
|||
;(function(window,undefined){var calendar=document.querySelector('#calendar')
|
||||
var simpleMonth_area=calendar.querySelector('.sidebar')
|
||||
var simpleMonth_title=simpleMonth_area.querySelector('.date')
|
||||
var fullMonth_area=calendar.querySelector('#renderFullYear')
|
||||
var fullMonth_title=fullMonth_area.querySelector('h2')
|
||||
var fullMonth_lunar=fullMonth_area.querySelector('.lunar-year')
|
||||
var detailMonth=calendar.querySelector('#renderMonth')
|
||||
var detailMonth_title=detailMonth.querySelector('.title')
|
||||
var detailMonth_day=detailMonth.querySelector('.day')
|
||||
var tab_num=0
|
||||
var today=new Date()
|
||||
var year=today.getFullYear()
|
||||
var month=today.getMonth()
|
||||
var calendarObj=ChineseCalendar
|
||||
renderTab()
|
||||
initalToday()
|
||||
function renderTab(){var aTab=calendar.querySelector('.header').querySelectorAll('li')
|
||||
var aRender=calendar.querySelectorAll('.render')
|
||||
for(var i=0;i<aTab.length;i++){aTab[i].index=i
|
||||
aTab[i].onclick=function(){for(var j=0;j<aTab.length;j++){aTab[j].className=''
|
||||
aRender[j].className='render'}
|
||||
aTab[this.index].className='cur'
|
||||
aRender[this.index].className='render render-show'
|
||||
tab_num=this.index}}}
|
||||
function initalToday(){simpleMonth_title.innerHTML=year+'年'+(month+1)+'月'
|
||||
fullMonth_title.innerHTML=year+'年'
|
||||
fullMonth_lunar.innerHTML='<i></i>'+calendarObj.year2GanZhe(year)+calendarObj.getAnimal(year)+'年'
|
||||
detailMonth_title.innerHTML=year+'年'+(month+1)+'月'
|
||||
renderFullMonth()
|
||||
tools.renderDetailMonth(detailMonth_day,year,month)
|
||||
dateEvent()}
|
||||
function renderFullMonth(){var sidebar_day=simpleMonth_area.querySelector('.day')
|
||||
var fullYear_month=fullMonth_area.querySelector('.month')
|
||||
var fullMonth_hmtl=``
|
||||
var monthArr=['January','Febuary','March','April','May','June','July','August','September','Octorber','November','December']
|
||||
for(var i=0;i<12;i++){fullMonth_hmtl+=`<li class="item">
|
||||
<div class="title">${monthArr[i]}</div>
|
||||
<ul class="week">
|
||||
<li>日</li>
|
||||
<li>一</li>
|
||||
<li>二</li>
|
||||
<li>三</li>
|
||||
<li>四</li>
|
||||
<li>五</li>
|
||||
<li>六</li>
|
||||
</ul>
|
||||
<ul class="day">${tools.renderDay(year,i)}</ul>
|
||||
</li>`}
|
||||
fullYear_month.innerHTML=fullMonth_hmtl
|
||||
sidebar_day.innerHTML=tools.renderDay(year,month)}
|
||||
function dateEvent(){var sidebar_prevBtn=simpleMonth_area.querySelector('.btn-prev')
|
||||
var sidebar_nextBtn=simpleMonth_area.querySelector('.btn-next')
|
||||
var control=calendar.querySelector('#control')
|
||||
var control_btnPrev=control.querySelector('.btn-prev')
|
||||
var control_today=control.querySelector('.today')
|
||||
var control_btnNext=control.querySelector('.btn-next')
|
||||
var sidebar_date=simpleMonth_area.querySelectorAll('.day li')
|
||||
var detail_festival=detailMonth_day.querySelectorAll('.show')
|
||||
var popup=calendar.querySelector('#popup')
|
||||
var container=calendar.querySelector('.container')
|
||||
var dataTime=null
|
||||
var popupPos={lx:0,lr:0,y:0,w:detail_festival[0].offsetWidth,h:detail_festival[0].offsetHeight}
|
||||
sidebar_prevBtn.onclick=function(){if(month==0){year--
|
||||
month=11}else{month--}
|
||||
initalToday()}
|
||||
sidebar_nextBtn.onclick=function(){if(month==11){year++
|
||||
month=0}else{month++}
|
||||
initalToday()}
|
||||
control_today.onclick=function(){year=today.getFullYear()
|
||||
month=today.getMonth()
|
||||
initalToday()}
|
||||
control_btnPrev.onclick=function(){if(tab_num==0){if(month==0){year--
|
||||
month=11}else{month--}
|
||||
tools.renderDetailMonth(detailMonth_day,year,month)}else{year--}
|
||||
initalToday()}
|
||||
control_btnNext.onclick=function(){if(tab_num==0){if(month==11){year++
|
||||
month=0}else{month++}}else{year++}
|
||||
initalToday()}
|
||||
for(var i=0;i<sidebar_date.length;i++){sidebar_date[i].onclick=function(){dataTime=this.dataset.time
|
||||
year=parseInt(dataTime.substr(0,4))
|
||||
month=parseInt(dataTime.substr(4,2))
|
||||
initalToday()}}
|
||||
for(var i=0;i<detail_festival.length;i++){detail_festival[i].onclick=function(ev){var dateStr=this.parentNode.dataset.time
|
||||
popupPos.lx=this.offsetLeft+popupPos.w+20
|
||||
popupPos.lr=this.offsetLeft-280
|
||||
popupPos.y=this.offsetTop-52+popupPos.h/2
|
||||
popup.style.display='block'
|
||||
popup.style.top=popupPos.y+'px'
|
||||
if(container.offsetWidth-this.offsetLeft-this.offsetWidth>=popup.offsetWidth){popup.style.left=popupPos.lx+'px'
|
||||
popup.className='popup-left'}else{popup.style.left=popupPos.lr+'px'
|
||||
popup.className='popup-right'}
|
||||
tools.renderPopup(this,popup,dateStr)
|
||||
ev.stopPropagation()}}
|
||||
document.onclick=function(){popup.style.display='none'}}})(window)
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
var ChineseCalendar={lunarInfo:[0x04bd8,0x04ae0,0x0a570,0x054d5,0x0d260,0x0d950,0x16554,0x056a0,0x09ad0,0x055d2,0x04ae0,0x0a5b6,0x0a4d0,0x0d250,0x1d255,0x0b540,0x0d6a0,0x0ada2,0x095b0,0x14977,0x04970,0x0a4b0,0x0b4b5,0x06a50,0x06d40,0x1ab54,0x02b60,0x09570,0x052f2,0x04970,0x06566,0x0d4a0,0x0ea50,0x06e95,0x05ad0,0x02b60,0x186e3,0x092e0,0x1c8d7,0x0c950,0x0d4a0,0x1d8a6,0x0b550,0x056a0,0x1a5b4,0x025d0,0x092d0,0x0d2b2,0x0a950,0x0b557,0x06ca0,0x0b550,0x15355,0x04da0,0x0a5b0,0x14573,0x052b0,0x0a9a8,0x0e950,0x06aa0,0x0aea6,0x0ab50,0x04b60,0x0aae4,0x0a570,0x05260,0x0f263,0x0d950,0x05b57,0x056a0,0x096d0,0x04dd5,0x04ad0,0x0a4d0,0x0d4d4,0x0d250,0x0d558,0x0b540,0x0b6a0,0x195a6,0x095b0,0x049b0,0x0a974,0x0a4b0,0x0b27a,0x06a50,0x06d40,0x0af46,0x0ab60,0x09570,0x04af5,0x04970,0x064b0,0x074a3,0x0ea50,0x06b58,0x055c0,0x0ab60,0x096d5,0x092e0,0x0c960,0x0d954,0x0d4a0,0x0da50,0x07552,0x056a0,0x0abb7,0x025d0,0x092d0,0x0cab5,0x0a950,0x0b4a0,0x0baa4,0x0ad50,0x055d9,0x04ba0,0x0a5b0,0x15176,0x052b0,0x0a930,0x07954,0x06aa0,0x0ad50,0x05b52,0x04b60,0x0a6e6,0x0a4e0,0x0d260,0x0ea65,0x0d530,0x05aa0,0x076a3,0x096d0,0x04afb,0x04ad0,0x0a4d0,0x1d0b6,0x0d250,0x0d520,0x0dd45,0x0b5a0,0x056d0,0x055b2,0x049b0,0x0a577,0x0a4b0,0x0aa50,0x1b255,0x06d20,0x0ada0,0x14b63,0x09370,0x049f8,0x04970,0x064b0,0x168a6,0x0ea50,0x06b20,0x1a6c4,0x0aae0,0x0a2e0,0x0d2e3,0x0c960,0x0d557,0x0d4a0,0x0da50,0x05d55,0x056a0,0x0a6d0,0x055d4,0x052d0,0x0a9b8,0x0a950,0x0b4a0,0x0b6a6,0x0ad50,0x055a0,0x0aba4,0x0a5b0,0x052b0,0x0b273,0x06930,0x07337,0x06aa0,0x0ad50,0x14b55,0x04b60,0x0a570,0x054e4,0x0d160,0x0e968,0x0d520,0x0daa0,0x16aa6,0x056d0,0x04ae0,0x0a9d4,0x0a2d0,0x0d150,0x0f252,0x0d520],Gan:["甲","乙","丙","丁","戊","己","庚","辛","壬","癸"],Zhe:["子","丑","寅","卯","辰","巳","午","未","申","酉","戌","亥"],Animals:["鼠","牛","虎","兔","龙","蛇","马","羊","猴","鸡","狗","猪"],solarTerm:["小寒","大寒","立春","雨水","惊蛰","春分","清明","谷雨","立夏","小满","芒种","夏至","小暑","大暑","立秋","处暑","白露","秋分","寒露","霜降","立冬","小雪","大雪","冬至"],weekend:['日','一','二','三','四','五','六','七','八','九','十'],lunarStr:['初','十','廿','卅'],lunarMonStr:['正','二','三','四','五','六','七','八','九','十','冬','腊'],sTermInfo:[0,21208,42467,63836,85337,107014,128867,150921,173149,195551,218072,240693,263343,285989,308563,331033,353350,375494,397447,419210,440795,462224,483532,504758],wFestive:['0520-母亲节','0630-父亲节','1144-感恩节'],cFestive:['0101-元旦','0214-情人节','0305#1963-雷锋日','0308-妇女节','0312-植树节','0401-愚人节','0501-劳动日','0504-青年节','0512-护士节','0601#1925-儿童节','0701#1997-建党节','0801#1927-建军节','0910-教师节','1001#1949-国庆节','1224-平安夜','1225-圣诞节',],lFestive:['1230-除夕','0101-春节','0102-正月初二','0115-元宵节','0505-端午节','0707-七夕节','0715-中元节','0815-中秋节','0909-重阳节','1208-腊八节','1224-小年'],lunarYearLength:function(y){var sum=12*29;for(var i=0x8000;i>0x8;i=i>>1){sum+=(ChineseCalendar.lunarInfo[y-1900]&i?1:0);}
|
||||
sum+=ChineseCalendar.leapMonthLengths(y);return sum;},lunarMonthLength:function(y,m){return ChineseCalendar.lunarInfo[y-1900]&(0x10000>>m)?30:29;},isLeapMonth:function(y){return ChineseCalendar.lunarInfo[y-1900]&0xf?true:false;},leapMonth:function(y){if(ChineseCalendar.isLeapMonth(y)){return ChineseCalendar.lunarInfo[y-1900]&0xf;}
|
||||
return 0;},leapMonthLengths:function(y){if(ChineseCalendar.isLeapMonth(y)){return ChineseCalendar.lunarInfo[y-1900]&0x10000?30:29;}
|
||||
return 0;},year2GanZhe:function(y){var gan=(y-3)%10;if(gan===0){gan=10;}
|
||||
var zhe=(y-3)%12;if(zhe===0){zhe=12;}
|
||||
return ChineseCalendar.Gan[gan-1]+ChineseCalendar.Zhe[zhe-1];},month2GanZhe:function(y,m){var ganY=(y-3)%10;if(ganY===0){ganY=10;}
|
||||
var month=((ganY-1)%5)*12+m+1;return ChineseCalendar.Gan[month%10]+ChineseCalendar.Zhe[month%12];},day2GanZhe:function(offset){var temp=40+offset;return ChineseCalendar.Gan[temp%10]+ChineseCalendar.Zhe[temp%12];},sTerm:function(y,n){var ms=31556925974.7*(y-1900)+ChineseCalendar.sTermInfo[n]*60000;var base=Date.UTC(1900,0,6,2,5);var date=new Date(ms+base);return date;},isTerm:function(y,m,d){var date=new Date(y,m-1,d);var n=(m-1)*2;var dateTerm=ChineseCalendar.sTerm(y,n);if(ChineseCalendar.isSameDay(dateTerm,date)){return ChineseCalendar.solarTerm[n];}
|
||||
n=n+1;dateTerm=ChineseCalendar.sTerm(y,n);if(ChineseCalendar.isSameDay(dateTerm,date)){return ChineseCalendar.solarTerm[n];}
|
||||
return false;},isSameDay:function(date1,date2){return date1.getFullYear()===date2.getFullYear()&&date1.getMonth()===date2.getMonth()&&date1.getDate()===date2.getDate();},getStar:function(month,day){var start=['魔羯','水瓶','双鱼','白羊','金牛','双子','巨蟹','狮子','处女','天秤','天蝎','射手','魔羯'],limit=[20,19,21,21,21,22,23,23,23,23,22,22],result=(month-1)+(day>limit[month-1]?1:0);return start[result]+'座';},toLunarMonth:function(m,flag){if(flag){return '闰'+ChineseCalendar.lunarMonStr[m-1]+'月';}
|
||||
return ChineseCalendar.lunarMonStr[m-1]+'月';},toLunarDay:function(d){if(d===10){return '初十';}
|
||||
return ChineseCalendar.lunarStr[Math.floor(d/10)]+(d%10===0?'十':ChineseCalendar.weekend[d%10]);},getAnimal:function(y){return ChineseCalendar.Animals[(y-4)%12];},isTody:function(date){var now=new Date();return date.getFullYear()===now.getFullYear()&&date.getMonth()===now.getMonth()&&date.getDate()===now.getDate();},isFestive:function(y,m,d,ly,lm,ld){var lstr=lm>9?(lm+''):'0'+lm;lstr+=ld>9?(ld+''):'0'+ld;var cstr=m>9?(m+''):'0'+m;cstr+=d>9?(d+''):'0'+d;var festive=ChineseCalendar.lFestive;for(var i=0,l=festive.length;i<l;i+=1){var test=festive[i].match(/(\d*)-(.*)/);if(test[1]===lstr){return test[2];}}
|
||||
festive=ChineseCalendar.cFestive;for(var i=0,l=festive.length;i<l;i+=1){var test=festive[i].match(/(\d*#?\d*)-(.*)/);var year=test[1].split('#');if(year[1]&&y>year[1]){if(year[0]===cstr){return test[2];}}else if(!year[1]){if(test[1]===cstr){return test[2];}}}
|
||||
festive=ChineseCalendar.wFestive;var date=new Date(y,m-1,d);for(var i=0,l=festive.length;i<l;i+=1){var test=festive[i].match(/(\d*)-(.*)/);var month=test[1].substring(0,2);var day=test[1].substring(3,4);var nWeek=test[1].substring(2,3);var str=m>9?(m+''):'0'+m;if(str===month&&date.getDay()===parseInt(day)){var temp=ChineseCalendar.theNoWeek(y,m,d);if(temp===parseInt(nWeek)){return test[2];}}}
|
||||
return false;},theNoWeek:function(y,m,d){var first=new Date(y,m-1,d);first.setDate(1);var date=new Date(y,m-1,d);var day=first.getDay(),current=date.getDate();if(day===0){day=7;}
|
||||
var head=1,tail=8-day,result=1;while(1){if(current>=head&¤t<=tail){return result;}
|
||||
result+=1;head=tail+1;tail=head+6;}},isRunYear:function(year){return year%400===0||(year%4===0&&year%100!==0);},getlunarYMD:function(date){var result={year:date.getFullYear(),month:date.getMonth()+1,day:date.getDate()};var offset=(Date.UTC(result.year,result.month-1,result.day)-Date.UTC(1900,0,31))/(60*60*24*1000),temp=0;for(var i=1900;i<2101&&offset>0;i++){temp=ChineseCalendar.lunarYearLength(i);offset-=temp;}
|
||||
if(offset<0){offset+=temp;i--;}
|
||||
result.lunarYear=i;var isLear=false,lunarMonth=ChineseCalendar.leapMonth(result.lunarYear);for(var i=1;i<13&&offset>=0;i++){temp=ChineseCalendar.lunarMonthLength(result.lunarYear,i);offset-=temp;isLear=false;if(i===lunarMonth){if(offset<0){i--;isLear=true;}else{temp=ChineseCalendar.leapMonthLengths(result.lunarYear);offset-=temp;}}}
|
||||
if(offset<0){if(i===lunarMonth&&isLear){offset+=temp;isLear=false;}else if(i===(lunarMonth+1)){offset+=temp;isLear=true;i--;}else{offset+=temp;i--;}}
|
||||
result.lunarMonth=i;result.lunarMonthChiness=ChineseCalendar.toLunarMonth(result.lunarMonth,isLear);result.lunarDay=offset+1;result.lunarDayChiness=ChineseCalendar.toLunarDay(result.lunarDay);return result;},lunarFestival:function(date){var result=ChineseCalendar.getlunarYMD(date);var festive=ChineseCalendar.isFestive(result.year,result.month,result.day,result.lunarYear,result.lunarMonth,result.lunarDay);var term=ChineseCalendar.isTerm(result.year,result.month,result.day);if(festive){return festive}},lunarTerm:function(date){var result=ChineseCalendar.getlunarYMD(date);var term=ChineseCalendar.isTerm(result.year,result.month,result.day);if(term){return term}},lunarTime:function(date){var result=ChineseCalendar.getlunarYMD(date);return result.lunarDayChiness;},date2lunar:function(date){date=date||new Date();var result={year:date.getFullYear(),month:date.getMonth()+1,day:date.getDate()};var offset=(Date.UTC(result.year,result.month-1,result.day)-Date.UTC(1900,0,31))/(60*60*24*1000),temp=0;result.gzD=ChineseCalendar.day2GanZhe(offset);for(var i=1900;i<2101&&offset>0;i++){temp=ChineseCalendar.lunarYearLength(i);offset-=temp;}
|
||||
if(offset<0){offset+=temp;i--;}
|
||||
result.lunarYear=i;var isLear=false,lunarMonth=ChineseCalendar.leapMonth(result.lunarYear);for(var i=1;i<13&&offset>=0;i++){temp=ChineseCalendar.lunarMonthLength(result.lunarYear,i);offset-=temp;isLear=false;if(i===lunarMonth){if(offset<0){i--;isLear=true;}else{temp=ChineseCalendar.leapMonthLengths(result.lunarYear);offset-=temp;}}}
|
||||
if(offset<0){if(i===lunarMonth&&isLear){offset+=temp;isLear=false;}else if(i===(lunarMonth+1)){offset+=temp;isLear=true;i--;}else{offset+=temp;i--;}}
|
||||
result.lunarMonth=i;result.lunarMonthChiness=ChineseCalendar.toLunarMonth(result.lunarMonth,isLear);result.lunarDay=offset+1;result.lunarDayChiness=ChineseCalendar.toLunarDay(result.lunarDay);result.animal=ChineseCalendar.getAnimal(result.year);result.week="星期"+ChineseCalendar.weekend[date.getDay()];result.start=ChineseCalendar.getStar(result.month,result.day);result.gzY=ChineseCalendar.year2GanZhe(result.lunarYear);result.isTody=ChineseCalendar.isTody(date);result.gzM=ChineseCalendar.month2GanZhe(result.lunarYear,result.lunarMonth);result.isTerm=ChineseCalendar.isTerm(result.year,result.month,result.day);if(result.isTerm){result.term=result.isTerm;result.isTerm=true;}
|
||||
result.isFestive=ChineseCalendar.isFestive(result.year,result.month,result.day,result.lunarYear,result.lunarMonth,result.lunarDay);if(result.isFestive){result.festive=result.isFestive;result.isFestive=true;}
|
||||
return result;}}
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
var tools=(function(){var toolsObj={renderPopup:function(festival,obj,str){var title=obj.querySelector('.title')
|
||||
var date=obj.querySelector('.date')
|
||||
var lunar=obj.querySelector('.lunar')
|
||||
var dateFormat=tools.strFormatDate(str)
|
||||
var lunarObj=ChineseCalendar.date2lunar(dateFormat);console.log(dateFormat)
|
||||
title.innerHTML=festival.innerHTML
|
||||
date.innerHTML=dateFormat.getFullYear()+'年'+(dateFormat.getMonth()+1)+'月'+dateFormat.getDate()+'日'
|
||||
lunar.innerHTML=lunarObj.lunarMonthChiness+lunarObj.lunarDayChiness+' · '+lunarObj.gzY+'年'+lunarObj.gzM+'月'+lunarObj.gzD+'日'},renderDay:function(year,n){var year=year
|
||||
var month=n
|
||||
var firstDay=new Date(year,n,1)
|
||||
var _hmtl=``
|
||||
for(var i=0;i<42;i++){var allDay=new Date(year,month,i+1-firstDay.getDay());var allDay_str=tools.returnDateStr(allDay)
|
||||
var firstDay_str=tools.returnDateStr(firstDay)
|
||||
var first_lunarday=ChineseCalendar.date2lunar(allDay).lunarDayChiness
|
||||
var lunarJanuary_month=ChineseCalendar.date2lunar(allDay).lunarMonthChiness
|
||||
if(tools.returnDateStr(new Date())===allDay_str){if(first_lunarday=='初一'){if(lunarJanuary_month=='正月'){_hmtl+=`<li data-time="${allDay_str}" class="cur-day lunar-january">${allDay.getDate()}</li>`}else{_hmtl+=`<li data-time="${allDay_str}" class="cur-day lunar-first">${allDay.getDate()}</li>`}}else{_hmtl+=`<li data-time="${allDay_str}" class="cur-day">${allDay.getDate()}</li>`}}else if(firstDay_str.substr(0,6)===allDay_str.substr(0,6)){if(first_lunarday=='初一'){if(lunarJanuary_month=='正月'){_hmtl+=`<li data-time="${allDay_str}" class="cur-month lunar-january">${allDay.getDate()}</li>`}else{_hmtl+=`<li data-time="${allDay_str}" class="cur-month lunar-first">${allDay.getDate()}</li>`}}else{_hmtl+=`<li data-time="${allDay_str}" class="cur-month">${allDay.getDate()}</li>`}}else{if(first_lunarday=='初一'){if(lunarJanuary_month=='正月'){_hmtl+=`<li data-time="${allDay_str}" class="lunar-january">${allDay.getDate()}</li>`}else{_hmtl+=`<li data-time="${allDay_str}" class="lunar-first">${allDay.getDate()}</li>`}}else{_hmtl+=`<li data-time="${allDay_str}">${allDay.getDate()}</li>`}}}
|
||||
return _hmtl},renderDetailMonth:function(dayWrapper,recivedYear,recivedMonth){var array=[]
|
||||
var recivedDate=new Date()
|
||||
var _html=``
|
||||
var date=new Date(recivedYear,recivedMonth,1)
|
||||
date.setDate(1)
|
||||
var week=date.getDay()
|
||||
date.setDate(1-week)
|
||||
var month=date.getMonth()
|
||||
for(var i=0;i<42;i++){if(month!==recivedMonth){if(date.getDay()===0||date.getDay()===6){array.push({day:date.getDate(),first_lunarday:ChineseCalendar.lunarTime(date),lunar:ChineseCalendar.date2lunar(date).lunarMonthChiness,state:'weekend',festival:ChineseCalendar.lunarFestival(date),term:ChineseCalendar.lunarTerm(date),dateStr:tools.returnDateStr(date)})}else{array.push({day:date.getDate(),first_lunarday:ChineseCalendar.lunarTime(date),lunar:ChineseCalendar.date2lunar(date).lunarMonthChiness,state:'',festival:ChineseCalendar.lunarFestival(date),term:ChineseCalendar.lunarTerm(date),dateStr:tools.returnDateStr(date)})}}else if(tools.curDay(date,recivedDate)){if(date.getDay()===0||date.getDay()===6){array.push({day:date.getDate(),first_lunarday:ChineseCalendar.lunarTime(date),lunar:ChineseCalendar.date2lunar(date).lunarMonthChiness,state:'weekend cur-day',festival:ChineseCalendar.lunarFestival(date),term:ChineseCalendar.lunarTerm(date),dateStr:tools.returnDateStr(date)})}else{array.push({day:date.getDate(),first_lunarday:ChineseCalendar.lunarTime(date),lunar:ChineseCalendar.date2lunar(date).lunarMonthChiness,state:'cur-day',festival:ChineseCalendar.lunarFestival(date),term:ChineseCalendar.lunarTerm(date),dateStr:tools.returnDateStr(date)})}}else{if(date.getDay()===0||date.getDay()===6){array.push({day:date.getDate(),first_lunarday:ChineseCalendar.lunarTime(date),lunar:ChineseCalendar.date2lunar(date).lunarMonthChiness,state:'weekend cur-month',festival:ChineseCalendar.lunarFestival(date),term:ChineseCalendar.lunarTerm(date),dateStr:tools.returnDateStr(date)})}else{array.push({day:date.getDate(),first_lunarday:ChineseCalendar.lunarTime(date),lunar:ChineseCalendar.date2lunar(date).lunarMonthChiness,state:'cur-month',festival:ChineseCalendar.lunarFestival(date),term:ChineseCalendar.lunarTerm(date),dateStr:tools.returnDateStr(date)})}}
|
||||
date.setDate(date.getDate()+1)
|
||||
month=date.getMonth()}
|
||||
console.log(array);for(var j=0;j<array.length;j++){var festival_state=array[j].festival?'festival show':'festival'
|
||||
var term_state=array[j].term?'term show':'term'
|
||||
var first_lunarday=array[j].first_lunarday=='初一'?array[j].lunar+array[j].first_lunarday:array[j].first_lunarday
|
||||
if(array[j].first_lunarday=='初一'){if(array[j].lunar=='正月'&&array[j].state!==''){var lunar_state='lunar first-lunarJanuary'}else{var lunar_state='lunar first-lunarday'}}else{var lunar_state='lunar'}
|
||||
_html+=`<li data-time="${array[j].dateStr}" class="${array[j].state}">
|
||||
<p class="info">
|
||||
<span class="${lunar_state}">${first_lunarday}</span>
|
||||
<span class="date"><em>${array[j].day}</em>日</span>
|
||||
</p>
|
||||
<p class="${festival_state}">${array[j].festival}</p>
|
||||
<p class="${term_state}">${array[j].term}</p>
|
||||
</li>`}
|
||||
dayWrapper.innerHTML=_html},nowDate:function(){return new Date()},returnDateStr:function(date){var year=date.getFullYear();var month=date.getMonth()+1;var day=date.getDate();month=month<=9?('0'+month):(''+month);day=day<=9?('0'+day):(''+day);return year+month+day;},curDay:function(oldTime,nowTime){return oldTime.getFullYear()===nowTime.getFullYear()&&oldTime.getMonth()===nowTime.getMonth()&&oldTime.getDate()===nowTime.getDate()},strFormatDate:function(str){var date=new Date(parseInt(str.substr(0,4)),parseInt(str.substr(4,2)),parseInt(str.substr(6)))
|
||||
console.log(str)
|
||||
return date}}
|
||||
return toolsObj}())
|
||||
|
After Width: | Height: | Size: 9.1 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 21 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 23 KiB |
|
After Width: | Height: | Size: 9.3 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 19 KiB |
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 4.2 KiB |
|
After Width: | Height: | Size: 19 KiB |
|
After Width: | Height: | Size: 179 KiB |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 4.3 KiB |
|
After Width: | Height: | Size: 4.6 KiB |
|
After Width: | Height: | Size: 84 KiB |
|
After Width: | Height: | Size: 3.5 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 4.0 KiB |
|
After Width: | Height: | Size: 4.5 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 3.1 KiB |
|
After Width: | Height: | Size: 3.8 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 4.7 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 255 B |
|
After Width: | Height: | Size: 389 B |
|
After Width: | Height: | Size: 526 B |
|
After Width: | Height: | Size: 374 B |
|
After Width: | Height: | Size: 222 B |
|
After Width: | Height: | Size: 341 B |
|
After Width: | Height: | Size: 576 B |
|
After Width: | Height: | Size: 366 B |
|
After Width: | Height: | Size: 384 B |
|
After Width: | Height: | Size: 511 B |
|
After Width: | Height: | Size: 2.7 KiB |
|
After Width: | Height: | Size: 2.7 KiB |
|
After Width: | Height: | Size: 3.2 KiB |
|
After Width: | Height: | Size: 3.4 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 2.8 KiB |
|
After Width: | Height: | Size: 2.8 KiB |
|
After Width: | Height: | Size: 3.2 KiB |
|
After Width: | Height: | Size: 5.4 KiB |
|
After Width: | Height: | Size: 3.3 KiB |
|
After Width: | Height: | Size: 4.3 KiB |
|
After Width: | Height: | Size: 3.1 KiB |
|
After Width: | Height: | Size: 345 KiB |
|
After Width: | Height: | Size: 274 KiB |
|
After Width: | Height: | Size: 378 KiB |
|
After Width: | Height: | Size: 105 KiB |
|
After Width: | Height: | Size: 636 KiB |
|
After Width: | Height: | Size: 284 KiB |
|
After Width: | Height: | Size: 476 KiB |
|
After Width: | Height: | Size: 474 KiB |
|
After Width: | Height: | Size: 240 KiB |
|
After Width: | Height: | Size: 553 KiB |
|
After Width: | Height: | Size: 19 KiB |
|
After Width: | Height: | Size: 225 KiB |
|
After Width: | Height: | Size: 280 KiB |
|
|
@ -0,0 +1,392 @@
|
|||
blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
|
||||
}
|
||||
|
||||
body,button,input,select,textarea {
|
||||
font: 9pt/1.5tahoma,arial,\5b8b\4f53
|
||||
}
|
||||
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
font-size: 100%
|
||||
}
|
||||
|
||||
address,cite,dfn,em,var {
|
||||
font-style: normal
|
||||
}
|
||||
|
||||
code,kbd,pre,samp {
|
||||
font-family: couriernew,courier,monospace
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 9pt
|
||||
}
|
||||
|
||||
ol,ul {
|
||||
list-style: none
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline
|
||||
}
|
||||
|
||||
sup {
|
||||
vertical-align: text-top
|
||||
}
|
||||
|
||||
sub {
|
||||
vertical-align: text-bottom
|
||||
}
|
||||
|
||||
legend {
|
||||
color: #000
|
||||
}
|
||||
|
||||
fieldset,img {
|
||||
border: 0
|
||||
}
|
||||
|
||||
button,input,select,textarea {
|
||||
font-size: 100%
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0
|
||||
}
|
||||
|
||||
body,html {
|
||||
height: 100%
|
||||
}
|
||||
|
||||
body {
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: fixed;
|
||||
-moz-background-size: cover;
|
||||
-webkit-background-size: cover
|
||||
}
|
||||
|
||||
a:focus {
|
||||
outline: 0
|
||||
}
|
||||
|
||||
.app-list {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%
|
||||
}
|
||||
|
||||
.clear {
|
||||
clear: both
|
||||
}
|
||||
|
||||
.finder-wrapper {
|
||||
width: 100%;
|
||||
height: 100%
|
||||
}
|
||||
|
||||
.finder-wrapper .topbar {
|
||||
margin-top: 0;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
border-bottom: 1px solid #9a9a9a;
|
||||
background: #f6f6f6
|
||||
}
|
||||
|
||||
.finder-wrapper .topbar .sortstyle-box {
|
||||
float: left;
|
||||
margin-left: 105px;
|
||||
width: 58px;
|
||||
height: 24px;
|
||||
background: url(images/icons/sortstyle.png) no-repeat;
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
.finder-wrapper .topbar .config-button {
|
||||
float: left;
|
||||
margin-left: 10px;
|
||||
width: 40px;
|
||||
height: 24px;
|
||||
background: url(images/icons/config.png) no-repeat;
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
.finder-wrapper .topbar .higher-button {
|
||||
float: left;
|
||||
margin-left: 10px;
|
||||
width: 40px;
|
||||
height: 24px;
|
||||
background: url(images/icons/higher.png) no-repeat;
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
.finder-wrapper .topbar .collection-button {
|
||||
float: left;
|
||||
margin-left: 10px;
|
||||
width: 40px;
|
||||
height: 24px;
|
||||
background: url(images/icons/collection.png) no-repeat;
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
.finder-wrapper .topbar .search-box {
|
||||
float: right;
|
||||
margin-top: 2px;
|
||||
margin-right: 5px;
|
||||
width: 234px;
|
||||
height: 24px;
|
||||
background: url(images/icons/search.png) no-repeat
|
||||
}
|
||||
|
||||
.finder-wrapper .main .content .app-box {
|
||||
z-index: 999;
|
||||
border-radius: 3px;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.finder-wrapper .main .content .middle {
|
||||
width: 5pc;
|
||||
height: 75pt
|
||||
}
|
||||
|
||||
.finder-wrapper .main .content .middle,.trash-wrapper .main .content .middle {
|
||||
float: left;
|
||||
margin-top: 10px;
|
||||
margin-left: 30px
|
||||
}
|
||||
|
||||
.finder-wrapper .main .content .middle img {
|
||||
margin-top: 5px;
|
||||
width: 60px
|
||||
}
|
||||
|
||||
.finder-wrapper .main .content .middle {
|
||||
float: left
|
||||
}
|
||||
|
||||
.finder-wrapper .main .content .middle .app-name {
|
||||
float: left;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
margin-top: 6px;
|
||||
padding-top: 1px;
|
||||
width: 5pc;
|
||||
color: #333;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 9pt;
|
||||
line-height: 1.7em;
|
||||
transition: none 0s ease 0s;
|
||||
writing-mode: horizontal-tb;
|
||||
word-break: keep-all
|
||||
}
|
||||
|
||||
.finder-wrapper .main .content .active {
|
||||
background-image: url(images/icons/finder_app_active_bg.png)
|
||||
}
|
||||
|
||||
.finder-wrapper .main .content .hover {
|
||||
background-image: url(images/icons/finder_app_hover_bg.png)
|
||||
}
|
||||
|
||||
.finder-wrapper .topbar .next-prev-box {
|
||||
float: left;
|
||||
margin-top: 2px;
|
||||
margin-left: 5px;
|
||||
width: 53px;
|
||||
height: 24px;
|
||||
background: url(images/icons/next_prev.png) no-repeat;
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
.finder-wrapper .main {
|
||||
width: 100%;
|
||||
height: calc(100% - 30px);
|
||||
background: #fff
|
||||
}
|
||||
|
||||
.finder-wrapper .main .sidebar {
|
||||
float: left;
|
||||
width: 148px;
|
||||
height: 100%;
|
||||
border-right: 1px solid #dfdfdf;
|
||||
background: #f6f6f6
|
||||
}
|
||||
|
||||
.finder-wrapper .main .content {
|
||||
float: left;
|
||||
overflow-y: auto;
|
||||
width: 80%;
|
||||
width: calc(100% - 150px);
|
||||
height: 100%
|
||||
}
|
||||
|
||||
.finder-wrapper .main .sidebar ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
padding-top: 5px;
|
||||
width: 148px;
|
||||
list-style: none
|
||||
}
|
||||
|
||||
.finder-wrapper .main .sidebar ul .title {
|
||||
padding-left: 5px;
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.finder-wrapper .main .sidebar ul li,.trash-wrapper .main .sidebar ul li {
|
||||
float: left;
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.finder-wrapper .main .sidebar ul li a {
|
||||
clear: both;
|
||||
display: block;
|
||||
width: 148px;
|
||||
height: 30px;
|
||||
color: #444;
|
||||
text-decoration: none;
|
||||
line-height: 30px
|
||||
}
|
||||
|
||||
.finder-wrapper .main .sidebar ul li a .name {
|
||||
float: left;
|
||||
display: block;
|
||||
margin-left: 5px;
|
||||
font-size: 14px
|
||||
}
|
||||
|
||||
.finder-wrapper .main .sidebar ul li a .home-icon {
|
||||
float: left;
|
||||
display: block;
|
||||
margin-top: 7px;
|
||||
margin-left: 15px;
|
||||
width: 1pc;
|
||||
height: 1pc;
|
||||
background-image: url(images/icons/SidebarHomeFolder_16x16.png)
|
||||
}
|
||||
|
||||
.finder-wrapper .main .sidebar ul li a .desktop-icon {
|
||||
float: left;
|
||||
display: block;
|
||||
margin-top: 7px;
|
||||
margin-left: 15px;
|
||||
width: 1pc;
|
||||
height: 1pc;
|
||||
background-image: url(images/icons/SidebarDesktopFolder_16x16.png)
|
||||
}
|
||||
|
||||
.finder-wrapper .main .sidebar ul li a .documents-icon {
|
||||
float: left;
|
||||
display: block;
|
||||
margin-top: 7px;
|
||||
margin-left: 15px;
|
||||
width: 1pc;
|
||||
height: 1pc;
|
||||
background-image: url(images/icons/SidebarDocumentsFolder_16x16.png)
|
||||
}
|
||||
|
||||
.finder-wrapper .main .sidebar ul li a .downloads-icon {
|
||||
float: left;
|
||||
display: block;
|
||||
margin-top: 7px;
|
||||
margin-left: 15px;
|
||||
width: 1pc;
|
||||
height: 1pc;
|
||||
background-image: url(images/icons/SidebarDownloadsFolder_16x16.png)
|
||||
}
|
||||
|
||||
.finder-wrapper .main .sidebar ul li a .movies-icon {
|
||||
float: left;
|
||||
display: block;
|
||||
margin-top: 7px;
|
||||
margin-left: 15px;
|
||||
width: 1pc;
|
||||
height: 1pc;
|
||||
background-image: url(images/icons/SidebarMoviesFolder_16x16.png)
|
||||
}
|
||||
|
||||
.finder-wrapper .main .sidebar ul li a .music-icon {
|
||||
float: left;
|
||||
display: block;
|
||||
margin-top: 7px;
|
||||
margin-left: 15px;
|
||||
width: 1pc;
|
||||
height: 1pc;
|
||||
background-image: url(images/icons/SidebarMusicFolder_16x16.png)
|
||||
}
|
||||
|
||||
.finder-wrapper .main .sidebar ul li a .pictures-icon {
|
||||
float: left;
|
||||
display: block;
|
||||
margin-top: 7px;
|
||||
margin-left: 15px;
|
||||
width: 1pc;
|
||||
height: 1pc;
|
||||
background-image: url(images/icons/SidebarPicturesFolder_16x16.png)
|
||||
}
|
||||
|
||||
.finder-wrapper .main .sidebar ul li a .cloud-icon {
|
||||
float: left;
|
||||
display: block;
|
||||
margin-top: 7px;
|
||||
margin-left: 15px;
|
||||
width: 1pc;
|
||||
height: 1pc;
|
||||
background-image: url(images/icons/SidebariCloud_16x16.png)
|
||||
}
|
||||
|
||||
.finder-wrapper .main .sidebar ul li a .network-icon {
|
||||
float: left;
|
||||
display: block;
|
||||
margin-top: 7px;
|
||||
margin-left: 15px;
|
||||
width: 1pc;
|
||||
height: 1pc;
|
||||
background-image: url(images/icons/SidebarNetwork_16x16.png)
|
||||
}
|
||||
|
||||
.finder-wrapper .main .sidebar ul li a .trash-icon {
|
||||
float: left;
|
||||
display: block;
|
||||
margin-top: 7px;
|
||||
margin-left: 15px;
|
||||
width: 1pc;
|
||||
height: 1pc;
|
||||
background-image: url(images/icons/StatusBarTrashIcon_16x16.png)
|
||||
}
|
||||
|
||||
.finder-wrapper .main .sidebar ul li .on {
|
||||
background: #cecece
|
||||
}
|
||||
|
||||
.finder-wrapper .topbar .next-prev-box .prev {
|
||||
float: left;
|
||||
display: block;
|
||||
width: 25px;
|
||||
height: 22px
|
||||
}
|
||||
|
||||
.finder-wrapper .topbar .next-prev-box .next {
|
||||
float: right;
|
||||
display: block;
|
||||
width: 25px;
|
||||
height: 22px
|
||||
}
|
||||
|
||||
.rename {
|
||||
width: 60px;
|
||||
height: 18px;
|
||||
border: 0;
|
||||
background: 0 0;
|
||||
text-align: center
|
||||
}
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh-cn">
|
||||
<head>
|
||||
<link rel="stylesheet" href="index.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="finder-wrapper" id="finder">
|
||||
<div class="topbar">
|
||||
<div class="next-prev-box">
|
||||
<div onclick="prev()" class="prev"></div>
|
||||
<div onclick="next()" class="next"></div>
|
||||
<input type="hidden" class="pathHistory" value="root" />
|
||||
<input type="hidden" class="currentPath" />
|
||||
</div>
|
||||
<!--<div class="sortstyle-box"></div>-->
|
||||
<!--<div class="config-button"></div>
|
||||
<div class="higher-button"></div>
|
||||
<div class="collection-button"></div>-->
|
||||
<div class="search-box"></div>
|
||||
</div>
|
||||
<div class="main">
|
||||
<div class="sidebar" app-path="public/user/administrator/home/"></div>
|
||||
<div class="content" current-path="">
|
||||
<div class="app-list"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script type="text/javascript" src="js/jquery-2.2.4.min.js"></script>
|
||||
<script type="text/javascript" src="js/jquery.nicescroll.min.js"></script>
|
||||
<script type="text/javascript" src="js/main.js"></script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,215 @@
|
|||
function finder(name,path,appObject) {
|
||||
|
||||
// ajax请求sidebar数据
|
||||
$.ajax({
|
||||
url:'json/sidebar.json',
|
||||
type:'GET', // GET
|
||||
async:true, // 是否异步
|
||||
dataType:'json',
|
||||
success:function(data,textStatus,jqXHR){
|
||||
// 变量赋值
|
||||
favoritesTitle = data.data.favoritesTitle;
|
||||
favorites = data.data.favorites;
|
||||
devicesTitle = data.data.devicesTitle;
|
||||
devices = data.data.devices;
|
||||
delimiter = "<div style='height:10px;clear:both'></div>";
|
||||
|
||||
favoritesHeaderHtml = "<ul><li class='title'>"+favoritesTitle+"</li>";
|
||||
favoritesBodyHtml = '';
|
||||
$.each(favorites,function(key, value) {
|
||||
if(!name){
|
||||
//如果设置默认打开app,则以第一个为主
|
||||
name = value.name;
|
||||
}
|
||||
if(!path){
|
||||
//如果设置默认打开位置,则以第一个为主
|
||||
path = value.path;
|
||||
}
|
||||
favoritesBodyHtml = favoritesBodyHtml +
|
||||
"<li>\
|
||||
<a onclick=\"finderOpenApp('"+value.name+"','"+value.path+"')\" class='"+value.active+"' href='#'>\
|
||||
<span class='"+value.icon+"'></span>\
|
||||
<span class='name'>"+value.title+"</span>\
|
||||
</a>\
|
||||
</li>";
|
||||
});
|
||||
favoritesFooterHtml = "</ul>";
|
||||
favoritesHtml = favoritesHeaderHtml+favoritesBodyHtml+favoritesFooterHtml;
|
||||
|
||||
devicesHeaderHtml = "<ul><li class='title'>"+devicesTitle+"</li>";
|
||||
devicesBodyHtml = '';
|
||||
$.each(devices,function(key, value) {
|
||||
devicesBodyHtml = devicesBodyHtml +
|
||||
"<li>\
|
||||
<a onclick=\"finderOpenApp('"+value.name+"','"+value.path+"')\" class='"+value.active+"' href='#'>\
|
||||
<span class='"+value.icon+"'></span>\
|
||||
<span class='name'>"+value.title+"</span>\
|
||||
</a>\
|
||||
</li>";
|
||||
});
|
||||
devicesFooterHtml = "</ul>";
|
||||
devicesHtml = devicesHeaderHtml+devicesBodyHtml+devicesFooterHtml;
|
||||
|
||||
$(".finder-wrapper .sidebar").html(favoritesHtml+delimiter+devicesHtml);
|
||||
|
||||
if(path) {
|
||||
$('.finder-wrapper .pathHistory').val(path);
|
||||
$('.finder-wrapper .content').attr(path);
|
||||
} else {
|
||||
$('.finder-wrapper .content').attr('current-path','public/user/'+'administrator'+'/home/'); //administrator为用户名
|
||||
}
|
||||
finderOpenApp(name,path,appObject);
|
||||
|
||||
},
|
||||
error:function(xhr,textStatus){
|
||||
console.log('错误')
|
||||
}
|
||||
});
|
||||
// scroll
|
||||
$(".sidebar").niceScroll({cursorcolor:"#bebebe"});
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* 打开app，finder专用
|
||||
* @author tangtanglove
|
||||
*/
|
||||
function finderOpenApp(name,path,appObject) {
|
||||
// 保存历史记录
|
||||
pathHistory = $('.finder-wrapper .pathHistory').val();
|
||||
pathArray = new Array(); //定义一数组
|
||||
pathArray = pathHistory.split("|"); //字符分割
|
||||
key = $.inArray(path, pathArray);
|
||||
|
||||
if(key ==-1) {
|
||||
if(path) {
|
||||
lastPath = pathArray[pathArray.length-1];
|
||||
if(lastPath != 'root') {
|
||||
if(path.indexOf(lastPath) > -1) {
|
||||
pathHistory = pathHistory+'|'+path;
|
||||
$('.finder-wrapper .pathHistory').val(pathHistory);
|
||||
$('.finder-wrapper .currentPath').val(path);
|
||||
$('.finder-wrapper .content').attr('current-path',path);
|
||||
} else {
|
||||
// 将历史路径的最后一个路径替换新的路径
|
||||
pathHistory = pathHistory.replace(lastPath,path);
|
||||
// pathHistory = pathHistory+'|'+path;
|
||||
$('.finder-wrapper .pathHistory').val(pathHistory);
|
||||
$('.finder-wrapper .currentPath').val(path);
|
||||
$('.finder-wrapper .content').attr('current-path',path);
|
||||
}
|
||||
} else {
|
||||
pathHistory = pathHistory+'|'+path;
|
||||
$('.finder-wrapper .pathHistory').val(pathHistory);
|
||||
$('.finder-wrapper .currentPath').val(path);
|
||||
$('.finder-wrapper .content').attr('current-path',path);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
$('.finder-wrapper .currentPath').val(path);
|
||||
$('.finder-wrapper .content').attr('current-path',path);
|
||||
}
|
||||
|
||||
|
||||
// ajax请求后台数据
|
||||
$.ajax({
|
||||
url:'json/openPath.json',
|
||||
type:'GET', // GET
|
||||
async:true, // 是否异步
|
||||
data:{
|
||||
path:path
|
||||
},
|
||||
dataType:'json',
|
||||
success:function(data,textStatus,jqXHR){
|
||||
if (data.status == 'success') {
|
||||
html = '';
|
||||
if(data.data) {
|
||||
$.each(data.data,function(key, value) {
|
||||
if(typeof(value.path)=="undefined") {
|
||||
value.path = '';
|
||||
}
|
||||
html = html + "<div class='app-box middle "+value.context+"' title='"+value.title+"' app-name='"+value.name+"' app-path='"+value.path+"' app-width="+value.width+" app-height="+value.height+">\
|
||||
<span class='app-icon'><img class='img-rounded' src='"+value.icon+"' alt='"+value.title+"' app-path='"+value.path+"' app-width="+value.width+" app-height="+value.height+"></span>\
|
||||
<span class='app-name'>"+value.title+"</span>\
|
||||
<div class='clear'></div>\
|
||||
</div>";
|
||||
});
|
||||
}
|
||||
$('.finder-wrapper .app-list').html(html);
|
||||
|
||||
} else {
|
||||
layer.msg(data.msg,{zIndex: layer.zIndex,success: function(layero){layer.setTop(layero);}});
|
||||
}
|
||||
},
|
||||
error:function(xhr,textStatus){
|
||||
console.log('错误')
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* 下一级
|
||||
* @author tangtanglove
|
||||
*/
|
||||
function next () {
|
||||
pathHistory = $('.finder-wrapper .pathHistory').val();
|
||||
currentPath = $('.finder-wrapper .currentPath').val();
|
||||
pathArray = new Array(); //定义一数组
|
||||
pathArray = pathHistory.split("|"); //字符分割
|
||||
key = $.inArray(currentPath, pathArray);
|
||||
path = pathArray[key+1];
|
||||
if(path) {
|
||||
finderOpenApp('finder',path);
|
||||
$('.finder-wrapper .currentPath').val(path);
|
||||
$('.finder-wrapper .content').attr('current-path',path);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 上一级
|
||||
* @author tangtanglove
|
||||
*/
|
||||
function prev () {
|
||||
pathHistory = $('.finder-wrapper .pathHistory').val();
|
||||
currentPath = $('.finder-wrapper .currentPath').val();
|
||||
pathArray = new Array(); //定义一数组
|
||||
pathArray = pathHistory.split("|"); //字符分割
|
||||
key = $.inArray(currentPath, pathArray);
|
||||
path = pathArray[key-1];
|
||||
if(path) {
|
||||
if(path=='root') {
|
||||
finderOpenApp('finder','');
|
||||
} else {
|
||||
finderOpenApp('finder',path);
|
||||
}
|
||||
$('.finder-wrapper .currentPath').val(path);
|
||||
$('.finder-wrapper .content').attr('current-path',path);
|
||||
}
|
||||
}
|
||||
|
||||
// 系统点击事件
|
||||
$(document).on("dblclick",'.finder-wrapper .app-box',function(event){
|
||||
finderOpenApp($(this).attr('app-name'),$(this).attr('app-path'),$(this));
|
||||
});
|
||||
$(document).on("mouseover",'.finder-wrapper .app-box',function(event){
|
||||
$(this).addClass('hover');
|
||||
})
|
||||
$(document).on("mouseout",'.finder-wrapper .app-box',function(event){
|
||||
$(this).removeClass('hover');
|
||||
});
|
||||
$(document).on("mousedown",'.finder-wrapper .app-box',function(event){
|
||||
$(".finder-wrapper .app-box").removeClass('active');
|
||||
$(this).addClass('active');
|
||||
return false;
|
||||
});
|
||||
$(document).on("mousedown",'.finder-wrapper .content',function(event){
|
||||
$(".finder-wrapper .app-box").removeClass('active');
|
||||
})
|
||||
$(document).on("mousedown",'.finder-wrapper .sidebar ul li a',function(event){
|
||||
$(".finder-wrapper .sidebar ul li a").removeClass('on');
|
||||
$(this).addClass('on');
|
||||
})
|
||||
|
||||
finder();//系统调用开始
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"msg":"\u83b7\u53d6\u6210\u529f\uff01","url":"","data":[{"title":"computer","name":"finder","icon":".\/images\/apps\/computer.png","width":"800","height":"450","sort":1,"context":"computer"},{"title":"trash","name":"trash","icon":".\/images\/apps\/TrashIcon.png","width":"800","height":"450","sort":2,"context":"trash"},{"title":"\u7cfb\u7edf\u8bbe\u7f6e","name":"setting","icon":".\/images\/apps\/PrefApp.png","width":800,"height":450,"sort":3,"context":"setting"},{"title":"\u63a7\u5236\u53f0","name":"terminal","icon":".\/images\/apps\/Terminal.png","width":800,"height":450,"sort":5,"context":"terminal"}],"status":"success"}
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"msg":"\u83b7\u53d6\u6210\u529f\uff01","url":"","data":[{"title":"desktop","name":"finder","icon":".\/images\/apps\/GenericFolderIcon.png","width":800,"height":450,"path":"public\/user\/administrator\/home\/desktop\/","context":"finder"},{"title":"\u65b0\u5efa\u6587\u4ef6\u5939","name":"finder","icon":".\/images\/apps\/GenericFolderIcon.png","width":800,"height":450,"path":"public\/user\/administrator\/home\/\u65b0\u5efa\u6587\u4ef6\u5939\/","context":"finder"}],"status":"success"}
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"msg":"\u83b7\u53d6\u6210\u529f\uff01","url":"","data":[{"title":"desktop","name":"finder","icon":".\/images\/apps\/GenericFolderIcon.png","width":800,"height":450,"path":"public\/user\/admin\/home\/desktop\/","context":"finder"},{"title":"documents","name":"finder","icon":".\/images\/apps\/GenericFolderIcon.png","width":800,"height":450,"path":"public\/user\/admin\/home\/documents\/","context":"finder"},{"title":"downloads","name":"finder","icon":".\/images\/apps\/GenericFolderIcon.png","width":800,"height":450,"path":"public\/user\/admin\/home\/downloads\/","context":"finder"},{"title":"movies","name":"finder","icon":".\/images\/apps\/GenericFolderIcon.png","width":800,"height":450,"path":"public\/user\/admin\/home\/movies\/","context":"finder"},{"title":"music","name":"finder","icon":".\/images\/apps\/GenericFolderIcon.png","width":800,"height":450,"path":"public\/user\/admin\/home\/music\/","context":"finder"},{"title":"pictures","name":"finder","icon":".\/images\/apps\/GenericFolderIcon.png","width":800,"height":450,"path":"public\/user\/admin\/home\/pictures\/","context":"finder"}],"status":"success"}
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"msg":"获取成功！","url":"","data":{"favoritesTitle":"个人收藏","favorites":[{"name":"finder","icon":"home-icon","path":"public/user/administrator/home/","title":"电脑","active":"on"},{"name":"finder","icon":"desktop-icon","path":"public/user/administrator/home/desktop/","title":"桌面"},{"name":"finder","icon":"documents-icon","path":"public/user/administrator/home/documents/","title":"文稿"},{"name":"finder","icon":"downloads-icon","path":"public/user/administrator/home/downloads/","title":"下载"},{"name":"finder","icon":"movies-icon","path":"public/user/administrator/home/movies/","title":"影片"},{"name":"finder","icon":"music-icon","path":"public/user/administrator/home/music/","title":"音乐"},{"name":"finder","icon":"pictures-icon","path":"public/user/administrator/home/pictures/","title":"图片"}],"devicesTitle":"设备","devices":[{"name":"finder","icon":"cloud-icon","path":"public/cloud/","title":"云服务"},{"name":"finder","icon":"network-icon","path":"public/network/","title":"网络文件"},{"name":"finder","icon":"network-icon","path":"public/network/","title":"宝宝云"}]},"status":"success"}
|
||||
|
|
@ -0,0 +1 @@
|
|||
body{padding:0;margin:0;font-family:microsoft yahei,segoe ui,lucida grande,Helvetica,Arial,sans-serif;font-size:14px;color:#333}.container{width:590px;margin:0 auto;padding-top:100px;position:relative}.container:after{content:'';display:block;clear:both}.container>div{float:left}.container .logo{width:100%;height:120px;margin:0 auto 10px;background-position:center;background-repeat:no-repeat;background-size:auto 120px}.container .input{position:relative;width:500px;height:44px;border-top:#ccc solid 1px;border-right:0;border-bottom:#ccc solid 1px;border-left:#ccc solid 1px;border-radius:4px 0 0 4px}.container .input>input{outline:0;border:0;padding:0 80px 0 10px;margin:0;height:44px;width:410px;color:#333;font-size:16px;border-radius:4px 0 0 4px}.container .input>input::-webkit-input-placeholder{color:#999}.container .input .picker{width:40px;padding-right:30px;position:absolute;top:0;right:0;height:100%;line-height:44px;cursor:pointer;color:#999;font-size:12px;text-align:right;background-image:url(../img/down.png);background-position:50px center;background-repeat:no-repeat;user-select:none}.container .input .picker-list{list-style:none;padding:5px 0;width:100px;position:absolute;right:0;top:50px;margin:0;line-height:26px;font-size:12px;border-radius:2px;box-shadow:0 1px 5px rgba(0,0,0,.2);background-color:#fff;display:none}.container .input .picker-list>li{padding-left:36px;background-position:10px center;background-repeat:no-repeat;background-size:16px auto}.container .input .picker-list>li:hover{background-color:#ebf1f5;cursor:pointer}.container .input .hot-list{padding:10px 0;width:100%;position:absolute;left:0;top:50px;margin:0;line-height:32px;font-size:14px;border-radius:2px;box-shadow:0 1px 5px rgba(0,0,0,.2);background-color:#fff;display:none}.container .input .hot-list>a{display:block;color:#333;text-decoration:none;padding:0 10px;overflow:hidden}.container .input .hot-list>a:hover{background-color:#f3f3f3}.container .input .hot-list>a>div{float:left}.container .input .hot-list>a>div.number{text-align:center;width:40px}.container .search{width:89px;height:46px;background-color:#08f;background-image:url(../img/search.png);background-position:center;background-repeat:no-repeat;border-radius:0 4px 4px 0;cursor:pointer}
|
||||
|
After Width: | Height: | Size: 3.1 KiB |
|
After Width: | Height: | Size: 100 KiB |
|
After Width: | Height: | Size: 94 B |
|
After Width: | Height: | Size: 48 KiB |
|
After Width: | Height: | Size: 178 B |
|
After Width: | Height: | Size: 239 B |
|
After Width: | Height: | Size: 5.3 KiB |
|
After Width: | Height: | Size: 562 B |
|
After Width: | Height: | Size: 297 B |
|
After Width: | Height: | Size: 4.4 KiB |
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>仿浏览器主页搜索</title>
|
||||
<link rel="stylesheet" href="css/index.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="logo" style="background-image: url(img/baidu.png)"></div>
|
||||
<div class="input">
|
||||
<input type="text" placeholder="请输入要搜索的内容" autocomplete="off" id="search-input">
|
||||
<div class="picker">百度</div>
|
||||
<ul class="picker-list">
|
||||
<li style="background-image: url(img/ico_baidu.png)" data-logo="baidu.png">百度</li>
|
||||
<li style="background-image: url(img/ico_sogou.png)" data-logo="sogou.png">搜狗</li>
|
||||
<li style="background-image: url(img/ico_bing.png)" data-logo="bing.png">bing</li>
|
||||
<li style="background-image: url(img/ico_google.ico)" data-logo="google.png">Google</li>
|
||||
</ul>
|
||||
<div class="hot-list"></div>
|
||||
</div>
|
||||
<div class="search"></div>
|
||||
</div>
|
||||
<script src="js/jquery-2.2.4.min.js"></script>
|
||||
<script type="text/javascript" src="js/index.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
helangSearch.init();
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||