小编tw1*_*w16的帖子

使用CSS类进行JS标记是一种不好的做法吗?

场景:

  • 使用PHP和模板引擎生成的主页.
  • 该页面正在重新设计.
  • 新设计基于jQuery UI.
  • 当前的CMS使用多个模板:页面模板,文章详细信息模板,评论模板等.

问题: 某些模板(如文章详细信息模板)生成应使用jQuery UI元素(如制表符)的html片段.目前,页面模板的数据源不包含任何信息,哪些元素应该在文档头的主jQuery调用中转换为jQuery UI元素.

可能的解决方案 将类似"jqTabs"的CSS类添加到子模板的html标记中,并.jqTabs在主jQuery脚本中使用选择器.

问题 这是个坏主意吗?

顺便说一句:"使用不同的CMS"并不是一个有效的答案,因为现在不是一个选项(截止日期,预算,...你的名字是-.-).

javascript css php jquery

6
推荐指数
1
解决办法
467
查看次数

半页+ CSS对齐

我不知道如何解释,但绘制了我需要的CSS对齐图片.模板具有固定宽度,绿色区域表示主要内容,蓝色分区提供该页面的标题.

绿色div有以下css:

#content {
  width: 980px;
  margin: 0 auto;
} 
Run Code Online (Sandbox Code Playgroud)

这适用于绿色框,但我不知道如何制作蓝色部分.这div需要覆盖页面的右侧+绿色区域的整个宽度,如下图所示.

请记住,用户可以调整窗口大小,使蓝色位的宽度无法修复!

如何使用纯CSS实现这一目标?

http://img15.imageshack.us/img15/3884/cssalign.png

css alignment css3

5
推荐指数
1
解决办法
499
查看次数

满意的问题

在这里:http://jsfiddle.net/bLHVh/4/我有一个令人满意的div,每当你输入它时,它会将'a'替换为'b',就像一个简单的例子(它稍后会做有用的东西) , 当然).它一直工作,直到你按Enter键,然后div在每次击键后失去焦点.为什么是这样?

html jquery webkit contenteditable

5
推荐指数
1
解决办法
387
查看次数

javascript:使用javascript在select标签中设置选项标题

我正在开发一个项目,我有一个select标签,其选项是在javascript函数中生成的.我目前正在填写每个选项的"标题"属性,并附有详细说明.
在javascript函数里面,我目前正在做这样的事情:

var country = new Option("countryUSA", "United States of America");
$("#mySelect").get(0).options[1]=country;
Run Code Online (Sandbox Code Playgroud)

这工作正常,选项显示.但是,我还需要设置该html选项元素的"title"属性.我尝试过这样的事情:

country.title="Full description of USA";
Run Code Online (Sandbox Code Playgroud)

但它不起作用.
我知道我可以这样做:

 $("#mySelect").get(0).options[1].title="My title";
Run Code Online (Sandbox Code Playgroud)

但我试图在将选项添加到选择标记之前设置标题.是不是"Option"对象假设允许我设置"title"属性?javascript函数甚至没有执行.我无法在javascript中为"选项"html元素设置"title"属性吗?

html javascript jquery title option

5
推荐指数
1
解决办法
1万
查看次数

产生数字变化的影响

我有一个这样的计数器:

<ul>
    <li id="cenMill">0</li>
    <li id="decMill">0</li>
    <li id="uniMill">0</li>
    <li id="cen">3</li>
    <li id="dec">2</li>
    <li id="uni">1</li>
</ul>
Run Code Online (Sandbox Code Playgroud)
    0 0 0 3 2 1

我的意图是让每个数字根据我给它的变量而改变,也就是说如果我添加+1然后只是将id ="uni"从1更改为2但是如果我给它12然后更改受影响的变量等等.但是到目前为止,我不知道如何开始这样做,这就是我所拥有的:

$('#uni').animate({
    marginTop: "-25px",
},200);
Run Code Online (Sandbox Code Playgroud)

但是这只将1放在顶部,它不会从下面弹出"2"弹出作为下一个数字,1是可见的,即使有显示,"无"或其他类似的东西我也无法隐藏它.关于如何做到这一点的任何帮助(或想法)?

html jquery counter

5
推荐指数
1
解决办法
2121
查看次数

背景图像悬停效果在包含元素之外

我正在尝试将背景图像悬停效果应用于我的css表中的每一行,但需要它显示在包含元素的左侧.

查看图片http://www.weiserwebworld.com/images/view.gif

有任何想法吗?

JS:

$(function() {
    $(".table-row").hover(function() { 
        $(this).addClass("highlight");
    }, function() {
        $(this).removeClass("highlight");
    })
})
Run Code Online (Sandbox Code Playgroud)

CSS:

#container {
    width: 660px; 
    margin: 20px auto;
}

div .table {
    display: table;
    border: 1px red solid;  
}
div .table-row {
    display: table-row;
}
div .table-cell {
    display: table-cell;
    width: 145px;
    padding: 10px;
    vertical-align: top;

}
.highlight {
    cursor: pointer;
    background-image: url('click-to-view.png');
    background-position: 0 center;
    background-repeat: no-repeat;

}
Run Code Online (Sandbox Code Playgroud)

HTML:

<div id="container">
    <div class="table">
        <div class="table-row">
            <div class="table-cell">Ralph Kramden</div>
            <div class="table-cell">Truck Driver</div>
            <div class="table-cell">8/17/2010</div>
            <div …
Run Code Online (Sandbox Code Playgroud)

css

5
推荐指数
1
解决办法
3042
查看次数

水平滚动条仅出现在IE7中,即使有溢出:隐藏设置

我正在敲打这个.

我有一个令人不安的水平滚动条,只有在IE7浏览我的网站时才会出现:http:
//www.regia.it

我试过并尝试通过使用overflow:hidden我的divs 来阻止这种情况发生但由于某种原因我似乎无法找到导致问题的原因.

任何帮助是极大的赞赏.

css horizontal-scrolling internet-explorer-7

5
推荐指数
1
解决办法
1万
查看次数

使用CSS制作带边框卷曲的圆形徽章?

是否可以仅使用CSS使徽章像下图一样卷曲?

文本必须保持在下面的卷曲和渐变之下,文本应该是可选择的.

在此输入图像描述

JS小提琴: http ://jsfiddle.net/jitendravyas/vVeME/1/

css css3

5
推荐指数
1
解决办法
1334
查看次数

在Firefox中出现图像映射问题

我的图像映射在Firefox中不起作用,但它可以在Chrome和Safari中使用.我认为它与div中的一些标签有关.你们可以帮助我,因为我对此并不了解:

<div style="font-size: 14px" id="tabs-1">
  ....
    <img src="/data/04_cvit/input.fa_x_Glyma1aaunq_gray.png" style="display:block;margin-left:auto;margin-right:auto" usemap="#CViT_image_gray"></img>
    <map name="#CViT_image_gray">
        <area onmouseover="mouseover_toggle('Glyma02g37330..173..179..694..700')" shape="rect" coords="173,694,179,700" href="http://soybase.org/gb2/gbrowse/gmax1.01/?start=42605601;stop=42707190;ref=Gm02;h_feat=Glyma02g37330@yellow" target="_blank"></area>
        <area onmouseover="mouseover_toggle('Glyma02g37330..1013..1019..723..729')" shape="rect" coords="1013,723,1019,729" href="http://soybase.org/gb2/gbrowse/gmax1.01/?start=44520215;stop=44621936;ref=Gm14;h_feat=Glyma14g35580@yellow" target="_blank"></area>
        <area onmouseover="mouseover_toggle('Glyma02g37330..313..319..147..153')" shape="rect" coords="313,147,319,153" href="http://soybase.org/gb2/gbrowse/gmax1.01/?start=6118288;stop=6218620;ref=Gm04;h_feat=Glyma04g07910@yellow" target="_blank"></area>  
    </map>

    <div id="Glyma02g37330..173..179..694..700" style="border: 2px solid rgb(0, 0, 0);background-color: rgb(239,237,233); z-index: 1; visibility: hidden; position: absolute; width: 250px; left: 394px; top: 774px;">
        <input type="button" name="closeDiv" value="Close" onclick="mouseover_toggle('Glyma02g37330..173..179..694..700')"></input>
        <br /> Query = Glyma02g37330 <br />Target = Glyma02g37330
        <br />Chromosome = Gm02 <br />Start = 42605601 <br />End = 42707190
        <br /> …
Run Code Online (Sandbox Code Playgroud)

html firefox image map

5
推荐指数
1
解决办法
4311
查看次数

Google 字体在 Firefox 中无法正确呈现

我在我的网站上使用谷歌网络字体Titillium Web。它在 Google Chrome、IE、Opera 和 Safari 中完美呈现,但在 Firefox 中,文本看起来很糟糕。

谷歌字体链接:

<link href='http://fonts.googleapis.com/css?family=Titillium+Web:200' rel='stylesheet' type='text/css'>
Run Code Online (Sandbox Code Playgroud)

HTML:

<p id="main-top-text" class="txt-style">WELCOME TO <span class="site-colour">NATHAN DA SILVA,</span></p>

<p id="main-bottom-text" class="txt-style">ENJOY YOUR STAY.</p>
Run Code Online (Sandbox Code Playgroud)

CSS:

.txt-style {
    font-family: 'Titillium Web', sans-serif;
    font-size: 60px;    
    line-height: 70px;
    color: #666666;
    text-align: center;
}
Run Code Online (Sandbox Code Playgroud)

您可以在这里看到它的样子: http: //www.nathandasilva.co.uk/v3

我想没有人知道有什么修复可以让这个在 Firefox 中看起来更好?

html css google-font-api

5
推荐指数
1
解决办法
9569
查看次数