想做一个手机页面的Filter，点击会弹出面板，面板下面Mask， 面板内radioButton，如图：

代码结构潦草完成，不能运行，肯定很多bugs，即便无bug，还不知怎么封装和调用，大神出个手帮下忙~

/**
***********************************
*@author:Bruce.Yin
*@desc:侧边弹出组件
*@time:2015/5/08
***********************************
*/

var FilterView = (function(option) {
var me=this;
//定义变量
var html,
heading = option.heading || '标题',
ln = option.ln,
radios = option.radios || [];

//组件容器，标题，组件列表
var c_Body,t_Body,ln,ul;
//Radio的选中状态
var isSeclected = false;
//radio的管理容器
var arrRadio = [];

/**
*初始化函数
*/

me.init = function() {
//创建组件容器
// html = '';
c_Body = document.createElement("div");
c_Body.className = "filterView";
c_Body.setAttribute("id","cBody");
c_Body.style.width = widths || "100px";
c_Body.style.height = heights || "180px";

//创建头
t_Body = document.createElement("div");
t_Body.className = "title-filterView";
t_Body.setAttribute("id","tBody");
c_Body.appendChild(t_Body);

//创建横线
ln = document.createElement("hr");
var t = document.getElementById("tBody");
t.innerHTML = ln[0];

//创建5个单选按钮
r1 = document.createElement("<input type='radio' name='dayName' value='1' />");
r2 = document.createElement("<input type='radio' name='dayName' value='2' />");
r3 = document.createElement("<input type='radio' name='dayName' value='3' />");
r4 = document.createElement("<input type='radio' name='dayName' value='4' />");
r5 = document.createElement("<input type='radio' name='dayName' value='5' />");
//创建5个标签
var l1 = document.createElement("span");
var l2 = document.createElement("span");
var l3 = document.createElement("span");
var l4 = document.createElement("span");
var l5 = document.createElement("span");
//赋具体标签文字
l1.innerHTML = "全部<br/>";
l1.innerHTML = "当天<br/>";
l1.innerHTML = "三天内<br/>";
l1.innerHTML = "七天内<br/>";
l1.innerHTML = "七天以上<br/>";

//将创建的按钮和标签追加到容器内
var c = getElementById("cBody");
c.appendChild(r1);
c.appendChild(l1);

c.appendChild(r2);
c.appendChild(l2);

c.appendChild(r3);
c.appendChild(l3);

c.appendChild(r4);
c.appendChild(l4);

c.appendChild(r5);
c.appendChild(l5);

//创建数组arr,将html元素拼接
var arr = ['c','t'];
html += ''+ arr.join()+'';
document.body.appendChild(html);

me.showFilterView();
me.getValue();

};

//显示FilterView组件
me.prototype.showFilterView = function () {
//TODO
alert('hello');
}

//获取单选按钮值
me.getValue = function () {
//TODO
var value = "";
var radios = document.getElementsByName("dayName");

for (var i = 0，l = radios.length;i < l; i++) {
if (radios[i].checked == true) {
value=radios[i].value;
break;
}
return value;
}
}

me.init();
}
var filterView = new FilterView();
)();