JQueryUI 手风琴:标题和用于排列图像/文本的内联块 [英] JQueryUI Accordion: Headers and an inline block for arranging image/text

问题描述

我现在要做的是弄清楚我的手风琴从哪里拉出它的标题样式.

这是我默认的手风琴标题:

手风琴幻灯片的标题在这里

但是我找不到任何对 h3 样式的引用.

当我想使用我想要的设置在一页上创建多个手风琴时，我使用了:

$(function() {$("#accordion").accordion({ header: "h3", active: false, collapsible: true });

我在这里再次使用了 h3.

我尝试将其添加到样式部分的末尾:

h3{ font-weight:bold;字体大小:1.5em；}

但这并没有影响任何事情.(出于某种原因，我正在使用它的网站已从 html 中完全删除了样式.)

我想要的是将标题更改为看起来更像底部的例如，而不是顶部:

即它需要更大，更易于阅读.

我遇到的另一个问题是，当幻灯片打开时，我在那里有一个带有一些文本的图像.需要显示的文本与图像的右上角对齐，而不是默认的，它从右下角开始.

以前我使用以下方法来做到这一点:

.accordion img{显示:内联块；宽度:180px；高度:125px；垂直对齐:顶部；边距右:10px;}.accordion .taxt{显示:内联块；宽度:280px；}

但这是我不确定在哪里调整 CSS(或者如果可能)的地方，以便我可以将相同的内容应用于这个新的 JQueryUI 手风琴.

这是它目前在 html 中的样子:

<h3>导师主导的学习</h3><div><img src="http://i.imgur.com/30qxeXe.jpg" height="125" width="180"/><taxt>查看导师指导的课程信息，请点击<a href="LINK HERE">这里</a></taxt></div><h3>电子学习</h3><div><img src="http://i.imgur.com/mVynNfO.jpg" height="125" width="180"/><taxt>要查看E-Learning课程信息，请点击<a href="LINK HERE">这里</a></taxt></div>

JSFiddle - http://jsfiddle.net/jz8Bz/

奇怪的是小提琴中的标题看起来好多了......

希望这就是所需的所有信息，这最终是一篇长篇文章:)

在此先感谢您的帮助，

乔恩

字体大小的临时解决方法，我只是在标题标签中使用了 style="font-size:20px" ......不理想，但我猜它有效吗?仍然很困惑为什么 JSFiddle 看起来与我正在使用它的网站不同.

解决方案

您需要进行一些更改.

我添加了 ul 和 li 标签以及 CSS 的类名.这是 HTML:

<ul class="foobar"><li class="foo"><img src="http://i.imgur.com/u6aq5MW.jpg" height="125" width="180"/><li class="bar">查看E-Learning课程信息，请点击<a href="Link">这里</a>

对于CSS:

#accordion .foobar {边距:0px；填充:0px;}#accordion .foobar .foo {显示:内联块；宽度:180px；高度:125px；垂直对齐:顶部；边距右:10px;}#accordion .foobar .bar {显示:内联块；宽度:280px；/* 放大这个值，如果你想把所有的文字都放在一行 */}

这是一个小提琴:http://jsfiddle.net/PvvAc/

至于为什么您的页眉在您的页面而不是 jsfiddle 上乱七八糟，您的页面上一定有一些 css 规则不能很好地发挥作用.

What I'm trying to do at the moment is figure out where the heck my accordion is pulling it's heading styles from.

This is what I had as default for the accordion headers:

<h3>Header for Accordion Slide Goes Here</h3>

However I couldn't find any reference to the h3 style.

When I wanted to create multiple accordions on one page with the settings that I wanted, I used:

$(function() {

        $("#accordion").accordion({ header: "h3", active: false, collapsible: true });

Again I used h3 here.

I tried adding this to the end of the styles section:

h3{ font-weight:bold; font-size:1.5em; }

But it didn't affect anything. (For some reason, the site I'm using this on has removed the styles completely from the html.)

What I want is to change the header to look more like the one in the bottom example, instead of the top:

i.e. it needs to be larger and much easier to read.

The other issue I'm having, is when the slide opens, I have an image in there with some text. Which needs to be displayed with the text aligned to the top right of the image, instead of the default, which starts it at the lower right.

Previously I had used the following to do this:

.accordion img{
    display:inline-block;
    width:180px;
    height:125px;
    vertical-align:top;
    margin-right:10px;
}
.accordion .taxt{
    display:inline-block;
    width:280px;
}

But this is where I'm not sure where to adapt the CSS (or if it's possible) so that I can apply the same to this new JQueryUI accordion.

Here's how it looks in the html currently:

<div id="accordion">
<h3>Tutor-led Learning</h3>
<div><img src="http://i.imgur.com/30qxeXe.jpg" height="125" width="180" /> <taxt>To view the tutor-led course information, please click <a href="LINK HERE">here</a></taxt></div>
<h3>E-Learning</h3>
<div><img src="http://i.imgur.com/mVynNfO.jpg" height="125" width="180" /> <taxt>To view the E-Learning course information, please click <a href="LINK HERE">here</a></taxt></div>
</div>

Edit: JSFiddle - http://jsfiddle.net/jz8Bz/

Strangely the headers in the fiddle look much better...

Hopefully that's all the info required, this ended up as a long post :)

Thanks in advance for any help,

Jon

Edit: Temporary work-around for the font size, I just used style="font-size:20px" in the header tags...not ideal but it works I guess? Still confused as to why the JSFiddle looks different from the site I'm using it on though.

解决方案

You needed a few changes.

I added ul and li tags with class names for the css. Here's the HTML:

<div>
  <ul class="foobar">
    <li class="foo">
      <img src="http://i.imgur.com/u6aq5MW.jpg" height="125" width="180" />
    </li>
    <li class="bar">To view the E-Learning course information, please click 
      <a href="Link">here</a>
    </li>
  </ul>
</div>

For the css:

#accordion .foobar { 
  margin:0px;
  padding:0px;
}

#accordion .foobar .foo {
  display:inline-block;
  width:180px;
  height:125px;
  vertical-align:top;
  margin-right:10px;
}

#accordion .foobar .bar {
  display:inline-block;
  width:280px;         /* enlarge this value, if you want text all on one line */
}

Here is a fiddle: http://jsfiddle.net/PvvAc/

As to why your headers are messed up on your page and not the jsfiddle, you must have some css rules on your page that aren't playing nicely.

这篇关于JQueryUI 手风琴:标题和用于排列图像/文本的内联块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！