封裝一個簡單的UI組件
阿新 • • 發佈：2017-05-15
span query indent block 年份 函數 方法 his prev
方法其實很簡單，用一個函數把整個過程包起來。調用時用new，這樣可以在一個頁面使用多個改組件。這是一個非常簡單的方法，後面還有很大改進的空間。下面是一個封裝日歷的示例。
現在我們的組件類似bootstrap，寫好下面的html結構，然後引入ui.css和ui.js，就可以生成相應的UI組件了。效果如上圖。
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Calendar</title> <link rel="stylesheet" type="text/css" href="css/ui.css"> </head> <body> <!-- 第一個日歷 --> <div class="calendar"> <div class="title"> <h1 class="green calendar-title">Month</h1> <h2 class="green small calendar-year">Year</h2> <a href="" class="prev">Prev Month</a> <a href="" class="next">Next Month</a> </div> <div class="body"> <div class="lightgrey body-list"> <ul> <li>MON</li> <li>TUE</li> <li>WED</li> <li>THU</li> <li>FRI</li> <li>SAT</li> <li>SUN</li> </ul> </div> <div class="darkgrey body-list"> <ul class="days"> </ul> </div> </div> </div> <!-- 第二個日歷 --> <div class="calendar"> <div class="title"> <h1 class="green calendar-title">Month</h1> <h2 class="green small calendar-year">Year</h2> <a href="" class="prev">Prev Month</a> <a href="" class="next">Next Month</a> </div> <div class="body"> <div class="lightgrey body-list"> <ul> <li>MON</li> <li>TUE</li> <li>WED</li> <li>THU</li> <li>FRI</li> <li>SAT</li> <li>SUN</li> </ul> </div> <div class="darkgrey body-list"> <ul class="days"> </ul> </div> </div> </div> <script src="js/ui.js"></script> </body> </html>
ui.css
body{ background:#f2f2f2; margin:40px; } *{ margin:0; padding:0; } .calendar{ width:450px; height:350px; background:#fff; box-shadow:0px 1px 1px rgba(0,0,0,0.1); margin: 10px auto; } .title{ height:70px; border-bottom:1px solid rgba(0,0,0,0.1); text-align:center; position:relative; } .calendar-title{ font-size:25px; font-family:arial; font-weight:bold; text-transform:uppercase; padding:14px 0 0 0; } .calendar-year{ font-size:15px; font-family:arial; font-weight:normal; } .prev{ text-indent:-9999px; position:absolute; left:0; top:0; width:60px; height:70px; background:url(‘../prev.png‘) no-repeat 50% 50%; } .next{ text-indent:-9999px; position:absolute; right:0; top:0; width:60px; height:70px; background:url(‘../next.png‘) no-repeat 50% 50%; } .body{ padding:10px 20px; } .body-list ul{ width:100%; font-family:arial; font-weight:bold; font-size:14px; } .body-list ul li{ width:14.28%; height:36px; line-height:36px; list-style-type:none; display:block; box-sizing:border-box; float:left; text-align:center; } .lightgrey{ color:#a8a8a8; } .darkgrey{ color:#565656; } .green{ color:#6ac13c; } .greenbox{ border:1px solid #6ac13c; background:#e9f8df; }
ui.js
var Calendar=function(dom){ var me=this; console.log(dom); var month_olympic = [31,29,31,30,31,30,31,31,30,31,30,31]; var month_normal = [31,28,31,30,31,30,31,31,30,31,30,31]; var month_name = ["January","Febrary","March","April","May","June","July","Auguest","September","October","November","December"]; var holder = dom.querySelector(".days"); var prev = dom.querySelector(".prev"); var next = dom.querySelector(".next"); var ctitle = dom.querySelector(".calendar-title"); var cyear = dom.querySelector(".calendar-year"); console.log(ctitle); var my_date = new Date(); var my_year = my_date.getFullYear(); var my_month = my_date.getMonth(); var my_day = my_date.getDate(); prev.onclick = function(e){ e.preventDefault(); my_month--; if(my_month<0){ my_year--; my_month = 11; } me.refreshDate(); } next.onclick = function(e){ e.preventDefault(); my_month++; if(my_month>11){ my_year++; my_month = 0; } me.refreshDate(); } me.refreshDate=function(){ var str = ""; var totalDay = daysMonth(my_month, my_year); //獲取該月總天數 var firstDay = dayStart(my_month, my_year); //獲取該月第一天是星期幾 var myclass; for(var i=1; i<firstDay; i++){ str += "<li></li>"; //為起始日之前的日期創建空白節點 } for(var i=1; i<=totalDay; i++){ if((i<my_day && my_year==my_date.getFullYear() && my_month==my_date.getMonth()) || my_year<my_date.getFullYear() || ( my_year==my_date.getFullYear() && my_month<my_date.getMonth())){ myclass = " class=‘lightgrey‘"; //當該日期在今天之前時，以淺灰色字體顯示 }else if (i==my_day && my_year==my_date.getFullYear() && my_month==my_date.getMonth()){ myclass = " class=‘green greenbox‘"; //當該日期是當天時，以綠色背景突出顯示 }else{ myclass = " class=‘darkgrey‘"; //當該日期在今後之後時，以深灰字體顯示 } str += "<li"+myclass+">"+i+"</li>"; //創建日期節點 } holder.innerHTML = str; //設置日期顯示 ctitle.innerHTML = month_name[my_month]; //設置英文月份顯示 cyear.innerHTML = my_year; //設置年份顯示 } //獲取某年某月第一天是星期幾 function dayStart(month, year) { var tmpDate = new Date(year, month, 1); return (tmpDate.getDay()); } //計算某年是不是閏年，通過求年份除以4的余數即可 function daysMonth(month, year) { var tmp = year % 4; if (tmp == 0) { return (month_olympic[month]); } else { return (month_normal[month]); } } me.refreshDate(); } if(document.querySelector(".calendar")){ for(var i=0;i<document.querySelectorAll(".calendar").length;i++){ new Calendar(document.querySelectorAll(".calendar")[i]); } }
封裝一個簡單的UI組件