javascript – 水平手风琴的全宽(HTML,CSS,JQuery)
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了javascript – 水平手风琴的全宽(HTML,CSS,JQuery)，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含9499字，纯文字阅读大概需要14分钟。
内容图文
我从这里使用水平手风琴：
http://www.dynamicdrive.com/dynamicindex17/haccordion.htm
我得到它显示一个完整的高度,但我有宽度的问题,它保持不工作或每个列表项产生500px的内联宽度,我不知道它从哪里拉它.我试图将我的代码上传到JS Fiddle,但我遇到了麻烦:(以下是代码：
HTML：http://pastebin.com/4UuwJXSi
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<link rel="stylesheet" type="text/css" href="redo.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="../scripts/accordion.js">
/***********************************************
* Horizontal Accordion script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>
<script type="text/javascript">
haccordion.setup({
accordionid: 'hc1', //main accordion div id
paneldimensions: {peekw:'50px', fullw:'100%', h:'100%'},
selectedli: [0, true], //[selectedli_index, persiststate_bool]
collapsecurrent: false //<- No comma following very last setting!
})</script>
</head>
<body>
<div id="hc1" class="haccordion">
<ul>
<li>
<div class="hpanel">
<img src="http://img502.imageshack.us/img502/746/thailand.jpg" style="float:left; padding-right:8px; width:200px; height:148px" />The Andaman Sea is regarded as Thailand's most precious natural resource as it hosts the most popular and luxurious resorts in Asia.
</div>
</li>
<li>
<div class="hpanel">
<img src="http://img264.imageshack.us/img264/7199/japan.jpg" style="float:left; padding-right:8px; width:200px; height:148px" />Japan is a constitutional monarchy where the power of the Emperor is very limited.
</div>
</li>
<li>
<div class="hpanel">
<img src="http://img101.imageshack.us/img101/516/mayai.jpg" style="float:left; padding-right:8px; width:200px; height:148px" />Malaysia is a South Asian country rich in natural resources in areas such as agriculture, forestry and minerals.
</div>
</li>
<li>
<div class="hpanel">
<img src="http://img194.imageshack.us/img194/9553/camam.jpg" style="float:left; padding-right:8px; width:200px; height:148px" />Agriculture has long been the most important sector of the Cambodian economy.
</div>
</li>
<li>
<div class="hpanel">
<img src="http://www.fourseasons.com/images/generated/property/langkawi/landing_pages/basics_welcome.jpg" style="float:left; padding-right:8px; width:200px; height:148px" />Langkawi is particularly known for its beaches which are among the best in Malaysia.
</div>
</li>
</ul>
</div>
</body>
CSS：
html, body
{
height:100%;
width: 100%;
}
*
{
margin:0px;
padding:0px
}
#hc1, #hc1 ul, #hc1 li
{
height: 100%;
}
#hc1, #hc1 ul
{
width: 100%;
}
li
{
border: 1px solid black;
height: 100%;
}
/* -- Start Accordion -- */
.haccordion{
padding: 0;
}
.haccordion ul{
margin: 0;
padding: 0;
list-style: none;
overflow: hidden; /*leave as is*/
}
.haccordion li{
margin: 0;
padding: 0;
display: block; /*leave as is*/
overflow: hidden; /*leave as is*/
float: left; /*leave as is*/
}
/* -- End Accordion -- */
使用Javascript：
/ * Horizontal Accordion script * Created: Oct 27th,
2009.This notice must stay intact
for usage * Author: Dynamic Drive at http: //www.dynamicdrive.com/
* Visit http: //www.dynamicdrive.com/ for full source code
* /
var haccordion={
/ / customize loading message
if accordion markup is fetched via Ajax: ajaxloadingmsg: '<div style="margin: 1em; font-weight: bold"><img src="ajaxloadr.gif" style="vertical-align: middle" /></div>',
accordioninfo: {},
//class that holds config information of each haccordion instance
expandli: function(accordionid, targetli) {
var config = haccordion.accordioninfo[accordionid]
var $targetli = (typeof targetli == "number") ? config.$targetlis.eq(targetli) : (typeof targetli == "string") ? jQuery('#' + targetli) : jQuery(targetli)
if (typeof config.$lastexpanded != "undefined") //targetli may be an index, ID string, or DOM reference to LI
config.$lastexpanded.stop().animate({
width: config.paneldimensions.peekw
}, config.speed) //contract last opened content
$targetli.stop().animate({
width: $targetli.data('hpaneloffsetw')
}, config.speed) //expand current content
config.$lastexpanded = $targetli
},
urlparamselect: function(accordionid) {
var result = window.location.search.match(new RegExp(accordionid + "=(\\d+)", "i")) //check for "?accordionid=index" in URL
if (result != null) result = parseInt(RegExp.$1) + "" //return value as string so 0 doesn't test for false
return result //returns null or index, where index is the desired selected hcontent index
},
getCookie: function(Name) {
var re = new RegExp(Name + "=[^;]+", "i") //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return null
},
setCookie: function(name, value) {
document.cookie = name + "=" + value + "; path=/"
},
loadexternal: function($, config) { //function to fetch external page containing the entire accordion content markup
var $hcontainer = $('#' + config.ajaxsource.container).html(this.ajaxloadingmsg)
$.ajax({
url: config.ajaxsource.path,
//path to external content
async: true,
error: function(ajaxrequest) {
$hcontainer.html('Error fetching content.<br />Server Response: ' + ajaxrequest.responseText)
},
success: function(content) {
$hcontainer.html(content)
haccordion.init($, config)
}
})
},
init: function($, config) {
haccordion.accordioninfo[config.accordionid] = config //cache config info for this accordion
var $targetlis = $('#' + config.accordionid).find('ul:eq(0) > li') //find top level LIs
config.$targetlis = $targetlis
config.selectedli = config.selectedli || [] //set default selectedli option
config.speed = config.speed || "normal" //set default speed
$targetlis.each(function(i) {
var $target = $(this).data('pos', i) //give each li an index #
$target.data('hpaneloffsetw', $target.find('.hpanel:eq(0)').outerWidth()) //get offset width of each .hpanel DIV (config.dimensions.fullw + any DIV padding)
$target.click(function() {
haccordion.expandli(config.accordionid, this)
config.$lastexpanded = $(this)
})
/*if (config.collapsecurrent){ //if previous content should be contracted when expanding current
$target.click(function(){
$(this).stop().animate({width:config.paneldimensions.peekw}, config.speed) //contract previous content
})
}*/
}) //end $targetlis.each
var selectedli = haccordion.urlparamselect(config.accordionid) || ((config.selectedli[1] && haccordion.getCookie(config.accordionid)) ? parseInt(haccordion.getCookie(config.accordionid)) : config.selectedli[0])
selectedli = parseInt(selectedli)
if (selectedli >= 0 && selectedli < config.$targetlis.length) { //if selectedli index is within range
config.$lastexpanded = $targetlis.eq(selectedli)
config.$lastexpanded.css('width', config.$lastexpanded.data('hpaneloffsetw')) //expand selected li
}
$(window).bind('unload', function() { //clean up and persist on page unload
haccordion.uninit($, config)
}) //end window.onunload
},
uninit: function($, config) {
var $targetlis = config.$targetlis
var expandedliindex = -1 //index of expanded content to remember (-1 indicates non)
$targetlis.each(function() {
var $target = $(this)
$target.unbind()
if ($target.width() == $target.data('hpaneloffsetw')) expandedliindex = $target.data('pos')
})
if (config.selectedli[1] == true) //enable persistence?
haccordion.setCookie(config.accordionid, expandedliindex)
},
setup: function(config) {
//Use JS to write out CSS that sets up initial dimensions of each LI, for JS enabled browsers only
document.write('<style type="text/css">\n')
document.write('#' + config.accordionid + ' li{width: ' + config.paneldimensions.peekw + ';\nheight: ' + config.paneldimensions.h + ';\n}\n')
document.write('#' + config.accordionid + ' li .hpanel{width: ' + config.paneldimensions.fullw + ';\nheight: ' + config.paneldimensions.h + ';\n}\n')
document.write('<\/style>')
jQuery(document).ready(function($) { //on Dom load
if (config.ajaxsource) //if config.ajaxsource option defined
haccordion.loadexternal($, config)
else haccordion.init($, config)
}) //end DOM load
}
}
对此的任何帮助都会很棒.最后,我希望开放式手风琴能够全屏占用用户,无论他们处于什么分辨率.这是不起作用的JSFiddle：http://jsfiddle.net/HGh3V/
注意我发现由于peekw值具有像素宽度,所以宽度不是100％.它占据了窥视宽度的百分比.我该如何解决？
解决方法:
该库不是为处理％宽度而设计的,也不是为了防止手风琴溢出.
要修复,您需要编辑haccordion.js(您显然已将其重命名为“accordion.js”).
更改此代码段：
$targetlis.each(function(i){
var $target=$(this).data('pos', i) //give each li an index #
$target.data('hpaneloffsetw', $target.find('.hpanel:eq(0)').outerWidth()) //get offset width of each .hpanel DIV (config.dimensions.fullw + any DIV padding)
对此：
var maxWidth = $targetlis.parent ().width ();
$targetlis.each ( function () { maxWidth -= $(this).outerWidth (true); } );
$targetlis.each(function(i){
var $target=$(this).data('pos', i) //give each li an index #
var lclMaxWidth = maxWidth + $target.find ('.hpanel:eq(0)').outerWidth (true);
$target.css ('width', config.paneldimensions.fullw);
//get offset width of each .hpanel DIV (config.dimensions.fullw + any DIV padding)
var hpaneloffsetw = $target.find ('.hpanel:eq(0)').outerWidth (true);
if (hpaneloffsetw > lclMaxWidth)
hpaneloffsetw = lclMaxWidth;
$target.data('hpaneloffsetw', hpaneloffsetw);
$target.css ('width', '');
我还将文件与更改一起放在http://pastebin.com/yXZNmn7C.
内容总结
以上是互联网集市为您收集整理的javascript – 水平手风琴的全宽(HTML,CSS,JQuery)全部内容，希望文章能够帮你解决javascript – 水平手风琴的全宽(HTML,CSS,JQuery)所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】