jquery实现自适应时间计划安排表效果代码
代码语言:html
所属分类:布局界面
代码描述:jquery实现自适应时间计划安排表效果代码,已经封装成一个插件,直接调用方法即可添加安排数据。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"> <style> @import url("https://fonts.googleapis.com/css?family=Roboto"); * { box-sizing: border-box; font-size: 13px; } body { background: #f7f7f7; margin: 0; } .centered { font-family: "Roboto", sans-serif; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 90%; } .info { width: 100%; max-width: 895px; margin: 50px auto; } .code { background: #dfdfdf; padding: 10px; color: #9e9e9e; font-size: 12px; border-radius: 3px; } #schedule { width: 100%; margin: 0 auto; max-width: 895px; background: #fff; font-family: "Roboto", sans-serif; display: flex; position: asbolute; } .s-legend { display: flex; position: relative; flex-direction: column; width: 150px; } .s-legend .s-head-info { height: 100%; } .s-legend .s-name { margin: 20px auto; } .s-legend .s-week-day { height: 100%; position: relative; box-shadow: inset 0 1px 0 0.5px #f5f5f5; } .s-legend .s-week-day .s-day { width: 100%; margin: 20px auto; } .s-head-info { font-weight: 900; max-height: 50px; position: relative; width: 100%; } .s-wrapper { display: flex; } .s-block { display: block; text-align: center; } .s-week-day { min-width: 50px; max-width: 150px; width: 100%; } .s-cell { text-align: center; } .s-container { width: 100%; overflow: auto; } .s-container .s-head-info { align-items: center; display: flex; } .s-container .s-head-info .s-head-hour { width: 100%; height: 55px; max-height: 55px; padding: 12px 0; min-width: 76.5px; border-left: 1.2px solid #e9e9e9; } .s-container .s-head-info .s-head-hour .s-number { font-size: 15px; } .s-container .s-head-info .s-head-hour .s-hourly-interval { color: #cccccc; font-size: 8px; } .s-container .s-rows-container { display: flex; position: relative; } .s-container .s-rows-container .s-activities { position: absolute; width: 100%; height: 100%; } .s-container .s-rows-container .s-activities .s-act-row { position: relative; height: 55px; } .s-container .s-rows-container .s-activities .s-act-row .green { background: linear-gradient(to right, #00b09b, #96c93d); } .s-container .s-rows-container .s-activities .s-act-row .orange { background: linear-gradient(to right, #F2994A, #F2C94C); } .s-container .s-rows-container .s-activities .s-act-row .red { background: linear-gradient(to right, #CB356B, #BD3F32); } .s-container .s-rows-container .s-activities .s-act-row .yellow { background: linear-gradient(to right, #fffc00, #fffc00); } .s-container .s-rows-container .s-activities .s-act-row .blue { background: linear-gradient(to right, #36D1DC, #5B86E5); } .s-container .s-rows-container .s-activities .s-act-row .pink { background: linear-gradient(to right, #834d9b, #d04ed6); } .s-container .s-rows-container .s-activities .s-act-row .black { background: linear-gradient(to right, #000428, #004e92); } .s-container .s-rows-container .s-activities .s-act-row .s-act-tab { height: 45px; padding: 15px; border-radius: 3px; position: absolute; top: 5px; } .s-container .s-rows-container .s-activities .s-act-row .s-act-tab .s-wrapper { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .s-container .s-rows-container .s-activities .s-act-row .s-act-tab .s-act-teacher, .s-container .s-rows-container .s-activities .s-act-row .s-act-tab .s-act-room, .s-container .s-rows-container .s-activities .s-act-row .s-act-tab .s-act-group { font-size: 7px; color: white; position: absolute; margin: 5px; } .s-container .s-rows-container .s-activities .s-act-row .s-act-tab .s-act-group { bottom: 0; left: 0; } .s-container .s-rows-container .s-activities .s-act-row .s-act-tab .s-act-name { color: white; } .s-container .s-rows-container .s-activities .s-act-row .s-act-tab .s-act-teacher { left: 0; top: 0; } .s-container .s-rows-container .s-activities .s-act-row .s-act-tab .s-act-room { top: 0; right: 0; } .s-hour-row { height: 100%; width: 100%; min-width: 76.5px; } .s-hour-row .s-hour-wrapper { display: flex; } .s-hour-row .s-hour-wrapper .s-half-hour:nth-child(2) { border-left: 0.5px solid #e9e9e9; } .s-hour-row .s-hour-wrapper .s-half-hour { width: 50%; height: 55px; border-left: 1.2px solid #e9e9e9; } @media only screen and (max-width: 480px) { .s-legend { width: 100px; } } </style> </head> <body > <div class='centered'> <div class='info'> <p>Try adding your own activity. Open the console and paste this command:</p> <div class='code'>schedule.activities.add(4,"Physics", "8.00-10.30", 102, "A", "B.Konon","pink");</div> </div> <div id='schedule'> <div class='s-legend'> <div class='s-cell s-head-info'> <div class='s-name'>TT</div> </div> <div class='s-week-day s-cell'> <div class='s-day'>Mon</div> </div> <div class='s-week-day s-cell'> <div class='s-day'>Tue</div> </div> <div class='s-week-day s-cell'> <div class='s-day'>Wed</div> </div> <div class='s-week-day s-cell'> <div class='s-day'>Thu</div> </div> <div class='s-week-day s-cell'> <div class='s-day'>Fri</div> </div> </div> <div class='s-container s-block'> <div class='s-head-info'> <div class='s-head-hour'> <div class='s-number'>0</div> <div class='s-hourly-interval'>7.10-7.55</div> </div> <div class='s-head-hour'> <div class='s-number'>1</div> <div class='s-hourly-interval'>8.00 - 8.45</div> </div> <div class='s-head-hour'> <div class='s-number'>2</div> <div class='s-hourly-interval'>8.50 - 9.35</div> </div> <div class='s-head-hour'> <div class='s-number'>3</div> <div class='s-hourly-interval'>9.45 - 10.30</div> </div> <div class='s-head-hour'> <div class='s-number'>4</div> <div class='s-hourly-interval'>10.50 - 11.35</div> </div> <div class='s-head-hour'> <div class='s-number'>5</div> <div class='s-hourly-interval'>11.45 - 12.30</div> </div> <div class='s-head-hour'> <div class='s-number'>6</div> <div class='s-hourly-interval'>12.50 - 13.35</div> </div> <div class='s-head-hour'> <div class='s-number'>7</div> <div class='s-hourly-interval'>13.45 - 14.30</div> </div> <div class='s-head-hour'> <div class='s-number'>8</div> <div class='s-hourly-interval'>14.35 - 15.20</div> </div> <div class='s-head-hour'> <div class='s-number'>9</div> <div class='s-hourly-interval'>15.25 - 16.10</div> </div> </div> <div class='s-rows-container'> <div class='s-activities'> <div class='s-act-row'> <div class='s-act-tab green' data-hours='7.32-8.45'> <div class='s-act-name'>English</div> <div class='s-wrapper'> <div class='s-act-teacher'>A. Rygulska</div> <div class='s-act-room'>105</div> <div class='s-act-group'>G1</div> </div> </div> <div class='s-act-tab orange' data-hours='9.45-12.50'> <div class='s-act-name'>Math</div> <div class='s-wrapper'> <div class='s-act-teacher'>D. Kozlowicz</div> <div class='s-act-room'>121</div> </div> </div> <div class='s-act-tab green' data-hours='13.45-14.30'> <div class='s-act-name'>Math</div> <div class='s-wrapper'> <div class='s-act-teacher'>D. Kozlowicz</div> <div class='s-act-room'>121</div> </div> </div> </div> <div class='s-act-row'> <div class='s-act-tab blue' data-hours='8.50-10.08'> <div class='s-act-name'>Exam</div> <div class='s-wrapper'> <div class='s-act-teacher'>A. Rygulska</div> <div class='s-act-room'>105</div> <div class='s-act-group'>G1</div> </div> </div> <div class='s-act-tab black' data-hours='10.50-12.30'> <div class='s-act-name'>Math</div> <div class='s-wrapper'> <div class='s-act-teacher'>D. Kozlowicz</div> <div class='s-act-room'>121</div> </div> </div> <div class='s-act-tab orange' data-hours='14.15-15.20'> <div class='s-act-name'>Fitness</div> <div class='s-wrapper'> <div class='s-act-teacher'>D. Kozlowicz</div> <div class='s-act-room'>121</div> </div> </div> </div> <div class='s-act-row'></div> <div class='s-act-row'> <div class='s-act-tab blue' data-hours='7.10-7.55'> <div class='s-act-name'>English</div> <div class='s-wrapper'> <div class='s-act-teacher'>A. Rygulska</div> <div class='s-act-room'>105</div> <div class='s-act-group'>G1</div> </div> </div> <div class='s-act-tab red' data-hours='8.23-9.35'> <div class='s-act-name'>Deutsch</div> <div class='s-wrapper'> <div class='s-act-teacher'>D. Kozlowicz</div> <div class='s-act-room'>121</div> </div> </div> <div class='s-act-tab pink' data-hours='15.05-16.10'> <div class='s-act-name'>Bio</div> <div class='s-wrapper'> <div class='s-act-teacher'>D. Kozlowicz</div> <div class='s-act-room'>121</div> </div> </div> </div> <div class='s-act-row'></div> </div> <div class='s-row s-hour-row'> <div class='s-hour-wrapper s-cell'> <div class='s-half-hour'></div> <div class='s-half-hour'></div> </div> <div class='s-hour-wrapper s-cell'> <div class='s-half-hour'></div> <div class='s-half-hour'></div> </div> <div class='s-hour-wrapper s-cell'> <div class='s-half-hour'></div> <div class='s-half-hour'></div> </div> <div class='s-hour-wrapper s-cell'> <div class='s-half-hour'></div> <div class='s-half-hour'></div> </div> <div class='s-hour-wrapper s-cell'> <div class='s-half-hour'></div> <div class='s-half-hour'></div> </div> </div> <div class='s-row s-hour-row'> <div class='s-hour-wrapper s-cell'> <div class='s-half-hour'></div> <div class='s-half-hour'></div> </div> <div class='s-hour-wrapper s-cell'> <div class='s-half-hour'></div> <div class='s-half-hour'></div> </div> <div class='s-hour-wrapper s-cell'> <div class='s-half-hour'></div> <div class='s-half-hour'></div> </div> <div class='s-hour-wrapper s-cell'> <div class='s-half-hour'></div> <div class='s-half-hour'></div> </div> <div class='s-hour-wrapper s-cell'> <div class='s-half-hour'></div> <div class='s-half-hour'></div> </div> </div> <div class='s-row s-hour-row'> <div class='s-hour-wrapper s-cell'> <div class='s-half-hour'></div> <div class='s-half-hour'></div> </div> <div class='s-hour-wrapper s-cell'> <div class='s-half-hour'></div> <div class='s-half-hour'></div> </div> <div class='s-hour-wrapper s-cell'> <div class='s-half-hour'></div> <div class='s-half-hour'></div> </div> .........完整代码请登录后点击上方下载按钮下载查看
网友评论0