首页 新闻 搜索 专区 学院

有点乱~!第一次尝试写的js控件写不下去了... ...

2
悬赏园豆:80 [已解决问题] 解决于 2015-05-11 15:57

想做一个手机页面的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();
)();

Coca-code的主页 Coca-code | 初学一级 | 园豆:6
提问于:2015-05-11 10:18
< >
分享
最佳答案
0

我给你开个头

var ControlForTime = function(option){}
ControlForTime.Prototype.OnChange = function(){}
ControlForTime.Prototype.Render();

 

Option 部分是设置

Render部分是输出

OnChange 是事件

 

大致的逻辑为 在option 中设置有那些功能

Render 在Render部分实现html和效果

在OnChange 中实现 业务逻辑 当条件变化的时候 更新右边的数据

 

页面代码为

var controlForTime = new ControlForTime();

controlForTime.OnChange = function(){
// 刷新右边页面
}

controlForTime.Render();
收获园豆:80
小眼睛老鼠 | 老鸟四级 |园豆:2774 | 2015-05-11 15:49

把分给你了,很清晰的代码块~好吧,我试着去实现,有问题还可以trouble你吗?

Coca-code | 园豆:6 (初学一级) | 2015-05-11 15:59

@殷敏峰: 有什么问题就问 没关系的

小眼睛老鼠 | 园豆:2774 (老鸟四级) | 2015-05-11 16:06

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

//一.功能设置
var C /> //TODO
var me = this;
var html,
option.heading = heading || '标题',
option.isShow = isShow || true;
option.position = position,
option.radi>

return function () {

}


}

//二.事件处理
ControlForTime.Prototype. /> //TODO
}

//渲染
ControlForTime.Prototype.Render();

 

 

结构对吗?不会写了~

Coca-code | 园豆:6 (初学一级) | 2015-05-11 16:22

@殷敏峰: 

ControlForTime.Prototype.Render = function()
{
   var obj = this;
   var html = “”;
  // 给容器 填充 html
  $("#" +this.option.containerid).html(html ); 
   // 给html绑定事件 并响应控件事件
   $("#" +this.option.containerid).find(option).change(
    function(){
    obj.option.val = $(this).val();
    obj.Onchange();
}  
);
    
}    

我就写下 render的实现

小眼睛老鼠 | 园豆:2774 (老鸟四级) | 2015-05-11 16:35

@小眼睛老鼠: 真是很感谢。就是我避开Jqueryd的,这是一开始的初衷...

Coca-code | 园豆:6 (初学一级) | 2015-05-11 16:41

@殷敏峰: 。。。 大致的意思就是这样 控件只是为了封装 用什么封装都没关系

小眼睛老鼠 | 园豆:2774 (老鸟四级) | 2015-05-11 17:12
其他回答(3)
1

如果不知道怎么封装的时候,参考下别人的经验是个不错的选择,比如参考我的。我写了一些js组件,都是不过百行的代码,选择一个你喜欢看得懂的,看吧。http://www.cnblogs.com/tianxiangbing/

田想兵 | 园豆:244 (菜鸟二级) | 2015-05-11 17:16
0

你这代码完全没有可读性和可用性~,估计你专业前端吧,没写过后端代码

0xc | 园豆:237 (菜鸟二级) | 2015-05-13 00:12

看了你博客,倒是翻译了不少js的文章,为何你还会写出这样的代码,不得而知~

支持(0) 反对(0) 0xc | 园豆:237 (菜鸟二级) | 2015-05-13 00:14

是的。所以求这方面的书籍或BOLG!~

支持(0) 反对(0) Coca-code | 园豆:6 (初学一级) | 2015-05-13 09:09

@dark89757: 

拼接的。问题在没有原生js组件的系统书籍!~

支持(0) 反对(0) Coca-code | 园豆:6 (初学一级) | 2015-05-13 09:10
0

可以先尝试下合并重复率很高的代码,一步一个脚印。

宇落 | 园豆:204 (菜鸟二级) | 2015-05-13 15:37
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册