0

这是一组非常有前途的工具，但似乎没有在任何地方描述最初的步骤。论坛返回 501 错误，没有准备好启动 html 模板。

以下是我开始尝试的尝试，但显然有些问题。你能纠正它以使其显示一些基本功能吗？

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title></title>
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"> </script>
</head>

<body style="text-align:center">

<%-- :mode=jsp: get handle to demo area --%>
<%@ page import="org.flowplayer.demo.*" %>
<c:set var="demoArea" value="${context.toolDemos2}"/>
<% DemoArea area = (DemoArea)pageContext.getAttribute("demoArea"); %>


<style>
#demos {
    background:#fff url(/img/global/gradient/h150_reverse.png) repeat-x scroll 0 -95px;     
    padding:30px 0 30px 40px;
    border:1px solid #ddd;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}

.col {
    margin-right:0;  
    width:280px; 
    border-right:1px dotted #ccc;
    float:left;
}

#col1, #col2 {
    padding-left:30px;      
}

#col2 {
    border-right:0px;       
    width:310px;
}


.cat {
    width:230px;
    margin-top:25px;
}

.cat a {
    display:block;
    text-decoration:none;
    font-size:11px;
    color:#999; 
    margin:2px 0;
}

.cat a:hover {
    color:#333;
}

.cat h3 {
    font-size:14px;
    margin-bottom:2px;
}

.combinations h3 {
    font-weight:bold;
}

.col h2 {
    font-size:20px;
    text-shadow:0 0 3px #fff;
    text-transform:uppercase;
    font-weight:bold;
}

.col h2 strong {
    color:#5A57AB;
}

.pic {
    background:url(${cdn}${jqt}/img/jqt_sprite_medium.png) no-repeat 0 10px;
    height:200px;
    margin:-10px 0 -50px;   
}

#pic-form {
    background-position:0 -200px;       
}

#pic-toolbox {
    background-position:0 -400px;
}
</style>


<script>
$("#jqt3").addClass("active");
</script>

<div id="demos">
    <c:forTokens items="ui,form,toolbox" var="main" delims="," varStatus="j">

        <div class="col" id="col${j.index}">

            <h2>${main} ${j.index < 2 ? '<strong>TOOLS</strong>' : ''}</h2>

            <div class="pic" id="pic-${main}"></div>

            <c:forEach items='<%= area.getCategories((String)pageContext.getAttribute("main")) %>' var="cat" varStatus="i">

                <div class="cat ${cat.title == 'Combinations' ? 'combinations' : ''}">
                    <h3 title="${cat.description}">${cat.title}</h3>

                    <c:forEach items="${cat.demos}" var="demo">
                        <a href="${demo.path}">${demo.title}</a>
                    </c:forEach>
                </div>

                <c:if test="${i.index == 3}"><br clear="all" /></c:if>

            </c:forEach>

        </div> 

    </c:forTokens>

    <div class="clear"></div>
</div>
</body>
</html>
4

1 回答 1

1

这是使用 jquery-tools 工具提示的基本示例

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>

<script type='text/javascript' src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>    

<style type='text/css'>
.form {
    margin: 50px;
}

.tooltip {
    display:none;
    background:gray;
    font-size:12px;
    height:30px;
    width:100px;
    padding:5px;
    color:#eee;
}
</style>

<script type='text/javascript'>//<![CDATA[ 

$(document).ready(function(){
    $('form input[type="radio"]').tooltip();
});
//]]>  

</script>
</head>

<body>
<form name="form1" method="post" class="form" action="">
    <input type="radio" name="radio" id="jqt1" value="jqt1" title="Tooltip text 1"><label for="jqt1">label 1</label><br>
    <input type="radio" name="radio" id="jqt2" value="jqt2" title="Tooltip text 2"><label for="jqt2">label 2</label><br>
    <input type="radio" name="radio" id="jqt3" value="jqt3" title="Tooltip text 3"><label for="jqt3">label 3</label><br>
</form>

</body>
</html>

http://jsfiddle.net/79rHK/

在你的小提琴链接到 jquery 工具被破坏了。

于 2013-07-21T07:38:04.483 回答