wijmo html版 wijaccordion 如何实现填充整个父容器

收藏

使用wijaccordion实现类型QQ分组的功能。高度填充父容器

sjsm · sjsm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet"
type="text/css" />
<link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20133.20.min.css" rel="stylesheet"
type="text/css" />
<script type="text/javascript" src="http://cdn.wijmo.com/external/require.js"></script>
<script type="text/javascript">
requirejs.config({
baseUrl: "http://cdn.wijmo.com/amd-js/",
paths: {
"jquery": "jquery-1.9.1.min",
"jquery-ui": "jquery-ui-1.10.1.custom.min",
"jquery.ui": "jquery-ui",
"jquery.mousewheel": "jquery.mousewheel.min",
"globalize": "globalize.min"
}
});
</script>
</head>
<body>
<h1>如何使用wijaccordion实现与jquery ui accordionfdsafd的同相效果。填充父容器的高度</h1>
<fieldset>相同的效果
<legend>wijaccordion</legend>
<div style="height: 600px; background-color: Aqua;">
<div id="accordion">
<h2>
Page1</h2>
<div>
<img src="http://wijmo.com/wp-content/themes/wijmov2/img/wijmo_logo_small.png">
Sloptingle zung.</div>
<h2>
2</h2>
<div>
Bla boo Ongle Fling shnazzlegobble yap boo Sloptingle zung duh wubble dinglekanoodle
dizzle nip zunglezunk, wuggle slop boo bleep ding blapdazzle yap boo Sloptingle.
Ho slop a boobananarama ho meep 200 Hizzy bleeb, tangfraggle blob a waggleblop ho
oodle dobbafling blungdubba, duh dazzledongle Ongle Fling ingle whack dizzlequibble.
Boo dubbatwiddle Ongle Fling ha zingwooble razzle blip cake flungzongle, dazzleshnaz
dazzle, boo blo-flabblang bleeb bla.</div>
<h2>
3</h2>
<div>
Boo shrubberyfraggle ongle ho Ongle Fling flop shnoz boo 1500s ha flungshnuzzle
blung bla dabba tingleflobble. Bleeblo 1.10.32 bla 1.10.33 cake nip Zoweecake Zungletang
da Nizzlezongle zap Wiggle boo blip flungshnuzzle nip blang blong dabbablang zang,
quibbleshnazzle zap Razzbleeb shnozingle cake boo 1914 slapblob zap H. Shnazbleeb.</div>
<h2>
4</h2>
<div>
Dee zung... tang a blippity onglezunk. Ho oodely blopping zuppity bam blong dee
blingity blupboo. Nip blobbity dobbawheezer! Blo crongle bleebwiggle, flibble nip
zip crongle, ho woogle bang goblin dee hizzy-yada...goblin roo yap! Bam da bananarama
hizzy flibbity zongity tizzle izzlezungle? Wooble twaddle dee flong ha flup? Flee
loo razz flee? Flibbity weeblequibble.</div>
<h2>
5</h2>
<div>
Ongle Fling ha blangity flung zoom ho boo cranglefraggle bla zongbla zangzowee.
Ongle Fling wow zing boo zangzowees shrubberyfraggle flung zoom tang shnoz boo 1500s,
bing bam blipblee flungwooble dang a nizzle ho ding bla shnazzleblab ho duh ting
a ding bleeptwaddle flob. Ho boo nizzleling nip boo 1960s blob boo flapzunk ho Blupblab
wiggle jangledizzle Ongle Fling blupgoblin, bla flap flapping blob ingleblab flibyada
crongledilznoofus bang Blong Meepshnazzle hizzlezungle shnozingle ho Ongle Fling.</div>
<h2>
6</h2>
<div>
Shnozzlecrangle duh plopshrubbery tangle, Ongle Fling ha boo blangity nizzle zoom.
Ho wow hizzy nip a bleep ho woggleflop Hizzy tongleflab cake 45 YIP, wuggle ho meep
2000 flong wow.
<br>
<img src="http://wijmo.com/files/img/icons/widget/Accordion.png"></div>
<h2>
7</h2>
<div>
Ho ha a doof cringlezowee bloo bing a dizzle flop yap dizzlenizzle zap boo flungwhack
shnizzlegobble ho a blop bing bangflib yap boo weeble. Boo wacko ho dabba Ongle
Fling ha bing ho wow a flap-boo-plop jingle funkzonk ho blatwiddle, nip dinglezoom
duh dabba Shnizzlegobble blip, shnizzlegobble blip, wuggle ho zong bang flungwhack
Razzbleeb. Wugglewheezer shnozingle dang blingdoof meep boo flong, flubzongle zap
shnozzleflip, flubzongle yap wibblezowee (dazzleshnaz dazzle bla boo bang). <a href="http://bff.orangehairedboy.com/">
Blippity Fling-Flang by orangehairedboy</a></div>
</div>
</div>
</fieldset>
<fieldset>
<legend>jquery ui accordion</legend>
<div style="height: 600px; background-color: Aqua;">
<div id="accordion2">
<h2>
Page1</h2>
<div>
<img src="http://wijmo.com/wp-content/themes/wijmov2/img/wijmo_logo_small.png">
Sloptingle zung.</div>
<h2>
2</h2>
<div>
Bla boo Ongle Fling shnazzlegobble yap boo Sloptingle zung duh wubble dinglekanoodle
dizzle nip zunglezunk, wuggle slop boo bleep ding blapdazzle yap boo Sloptingle.
Ho slop a boobananarama ho meep 200 Hizzy bleeb, tangfraggle blob a waggleblop ho
oodle dobbafling blungdubba, duh dazzledongle Ongle Fling ingle whack dizzlequibble.
Boo dubbatwiddle Ongle Fling ha zingwooble razzle blip cake flungzongle, dazzleshnaz
dazzle, boo blo-flabblang bleeb bla.</div>
<h2>
3</h2>
<div>
Boo shrubberyfraggle ongle ho Ongle Fling flop shnoz boo 1500s ha flungshnuzzle
blung bla dabba tingleflobble. Bleeblo 1.10.32 bla 1.10.33 cake nip Zoweecake Zungletang
da Nizzlezongle zap Wiggle boo blip flungshnuzzle nip blang blong dabbablang zang,
quibbleshnazzle zap Razzbleeb shnozingle cake boo 1914 slapblob zap H. Shnazbleeb.</div>
<h2>
4</h2>
<div>
Dee zung... tang a blippity onglezunk. Ho oodely blopping zuppity bam blong dee
blingity blupboo. Nip blobbity dobbawheezer! Blo crongle bleebwiggle, flibble nip
zip crongle, ho woogle bang goblin dee hizzy-yada...goblin roo yap! Bam da bananarama
hizzy flibbity zongity tizzle izzlezungle? Wooble twaddle dee flong ha flup? Flee
loo razz flee? Flibbity weeblequibble.</div>
<h2>
5</h2>
<div>
Ongle Fling ha blangity flung zoom ho boo cranglefraggle bla zongbla zangzowee.
Ongle Fling wow zing boo zangzowees shrubberyfraggle flung zoom tang shnoz boo 1500s,
bing bam blipblee flungwooble dang a nizzle ho ding bla shnazzleblab ho duh ting
a ding bleeptwaddle flob. Ho boo nizzleling nip boo 1960s blob boo flapzunk ho Blupblab
wiggle jangledizzle Ongle Fling blupgoblin, bla flap flapping blob ingleblab flibyada
crongledilznoofus bang Blong Meepshnazzle hizzlezungle shnozingle ho Ongle Fling.</div>
<h2>
6</h2>
<div>
Shnozzlecrangle duh plopshrubbery tangle, Ongle Fling ha boo blangity nizzle zoom.
Ho wow hizzy nip a bleep ho woggleflop Hizzy tongleflab cake 45 YIP, wuggle ho meep
2000 flong wow.
<br>
<img src="http://wijmo.com/files/img/icons/widget/Accordion.png"></div>
<h2>
7</h2>
<div>
Ho ha a doof cringlezowee bloo bing a dizzle flop yap dizzlenizzle zap boo flungwhack
shnizzlegobble ho a blop bing bangflib yap boo weeble. Boo wacko ho dabba Ongle
Fling ha bing ho wow a flap-boo-plop jingle funkzonk ho blatwiddle, nip dinglezoom
duh dabba Shnizzlegobble blip, shnizzlegobble blip, wuggle ho zong bang flungwhack
Razzbleeb. Wugglewheezer shnozingle dang blingdoof meep boo flong, flubzongle zap
shnozzleflip, flubzongle yap wibblezowee (dazzleshnaz dazzle bla boo bang). <a href="http://bff.orangehairedboy.com/">
Blippity Fling-Flang by orangehairedboy</a></div>
</div>
</div>
</fieldset>
<script id="scriptInit" type="text/javascript">
require(["wijmo.wijaccordion"], function () {
$(document).ready(function () {
$("#accordion").wijaccordion({
header: "h2",
fillSpace: true,
heightStyle: "fill"
//expandDirection: "right",
//event: "mouseover"
});
$("#accordion2").accordion({
header: "h2",
heightStyle: "fill"
//expandDirection: "right",
//event: "mouseover"
});
});
});
</script>
</body>
</html>

复制代码

iceman · iceman

回复 2楼sjsm的帖子

感谢你的 demo，很详细。
我暂时没有找到合适的解决方法。需要发送给产品组确认，在得到回复后反馈给你。

iceman · iceman

回复 2楼sjsm的帖子

sjsm 你好，
当前没有内置的属性来控制 100% 填充，可以通过selectedIndexChanged 抓取点击事件，再设置当前内容高度：

<script id="scriptInit" type="text/javascript">
function test(e,data)
{
var newIndex=data.newIndex;
var tabcolection=$(".wijmo-wijaccordion-content.ui-widget-content.wijmo-wijaccordion-content-active");
tabcolection.height(307);
}
require(["wijmo.wijaccordion"], function () {
$(document).ready(function () {
$("#accordion").wijaccordion({
header: "h2",
fillSpace: true,
heightStyle: "fill",
selectedIndexChanged :test
//expandDirection: "right",
//event: "mouseover"
});
$("#accordion2").accordion({
header: "h2",
heightStyle: "fill"
//expandDirection: "right",
//event: "mouseover"
});
});
});
</script>

复制代码

		自动登录	找回密码
密码			立即注册

[已处理] wijmo html版 wijaccordion 如何实现填充整个父容器

3 个回复

活字格认证

微信认证勋章

元老葡萄