jQuery MiniUI

标题: 关于可伸缩的fieldset的问题 [打印本页]

作者: wudigongzi 时间: 2013-9-29 13:48:41 标题: 关于可伸缩的fieldset的问题

我照着示例里面的写法写了个fieldset，但是很可惜，索然加载出来了，但是伸缩的功能没了。。我无法去实现他。。。
我的代码如下：
<fieldset id="fldset" style="width: 285px">
<legend>
<label>
<input type="checkbox" checkedid="checkbox1"
onClick="toggleFieldSet(this, 'fldset')" checked="tue" hideFocus/>
高级选项
</label>
</legend>
<div class="fieldset-body">
<table class="form-table" border="0" cellpadding="1" cellspacing="2">
<tr>
<td>
注册类型：
</td>
<td>
<div name="rbl" id="rbl" class="mini-radiobuttonlist"
repeatItems="1" repeatDirection="vertical"
repeatLayout="table" valueField="id" value="normal"
url="../jsData/loginRadioButtonList.txt">
</div>
</td>
</tr>
</table>
</div>
</fieldset>

function toggleFieldSet(ck, id) {
var dom = document.getElementById(id);
alert(dom.className);
dom.className = !ck.checked ? "hideFieldset" : "";
}

程序已经进入了断点，能够alert了，界面运行的效果如下：
[attach]2984[/attach]
但是当我点下去之后就是没有反映。。。。到底是哪儿除了问题。。。还有。。。fieldset貌似没有完整的api，我查看不到

作者: lost 时间: 2013-9-29 14:01:53

可以伸缩的，你看下代码哪里有写错[attach]2987[/attach]

作者: wudigongzi 时间: 2013-9-29 14:03:58

lost 发表于 2013-9-29 14:01
可以伸缩的，你看下代码哪里有写错

另外请问下。。。如果我上手就要fieldset内的table为隐藏，需要怎么进行设置？

作者: factory 时间: 2013-9-29 14:05:51

1.你这不是HTML原生的checkbox

<fieldset id="fldset" style="width: 285px">
<legend>
<input type="checkbox" checkedid="checkbox1" onClick="alert(1)" checked="tue" hideFocus/>
</legend>
</fieldset>

复制代码

吗? 你自己检查下为什么无法触发事件

我这样测试了,是正常触发事件的

2.fieldset 是HTML原生的标签,不是miniui控件,所以没有他的API

作者: factory 时间: 2013-9-29 14:11:47

wudigongzi 发表于 2013-9-29 14:03
另外请问下。。。如果我上手就要fieldset内的table为隐藏，需要怎么进行设置？ ...

var dom = document.getElementById(id);
dom.className = !ck.checked ? "hideFieldset" : "";

例子有这个demo么,这个的意思就是如果勾选,就设置成他的class设置为hideFieldset,如果一开始就隐藏,那你直接把他的class设置为hideFieldset不就可以了

作者: wudigongzi 时间: 2013-9-29 14:13:50

factory 发表于 2013-9-29 14:05
1.你这不是HTML原生的checkbox吗? 你自己检查下为什么无法触发事件

我这样测试了,是正常触发事件的

嗯嗯，我后来查了下代码，发现是你们的css我没引入所导致的。。。不过你们官方实例上面有fieldset，所以我一直以为是你们的api了。。。还有。。。就是fieldset里面怎么设置下面的<div class="fieldset-body"> 为关闭状态？

作者: factory 时间: 2013-9-29 14:16:15

本帖最后由 factory 于 2013-9-29 14:17 编辑

wudigongzi 发表于 2013-9-29 14:13
嗯嗯，我后来查了下代码，发现是你们的css我没引入所导致的。。。不过你们官方实例上面有fieldset，所以 ...

fieldset-body 这个样式里面加上display:none就行了,折叠其实就是把他隐藏

之所以在demo里加上fieldset,是因为一些用户想要这样的效果,其实HTML本身就提供了的,所以就给他加上demo了,但是这个并非属于miniui控件,所以没他的API

作者: wudigongzi 时间: 2013-9-29 14:45:43

另外我发现hideFocus在里面貌似没有实际作用

作者: factory 时间: 2013-9-29 14:55:38

wudigongzi 发表于 2013-9-29 14:45
另外我发现hideFocus在里面貌似没有实际作用

忘记说了
.hideFieldset .fieldset-body
{
display:none;
}

不清楚你是希望隐藏整个fieldset还是像demo那样,保留fieldset的边线. 如果是后者,加上上面的样式,其实隐藏的还是里面的div

作者: wudigongzi 时间: 2013-9-29 15:35:32

factory 发表于 2013-9-29 14:55
忘记说了
.hideFieldset .fieldset-body
{

我是想要初始化的时候做到像demo里面的那样。。。保留顶上的线，隐藏里面的div。我现在是默认都打开的，想要的是初始化就是demo里面的那种。。。

作者: factory 时间: 2013-9-29 16:58:32

wudigongzi 发表于 2013-9-29 15:35
我是想要初始化的时候做到像demo里面的那样。。。保留顶上的线，隐藏里面的div。我现在是默认都打开的， ...

你自己看demo那个fieldset的结构,他内部放了一个div,隐藏的时候其实隐藏的这个div,而非fieldset.

所以你一开始,就直接把这个div的display:none就行了

欢迎光临 jQuery MiniUI (http://miniui.com/discuss/)