jquery tools hello world template

StackOverflow https://stackoverflow.com/questions/17762189

  •  03-06-2022
  •  | 
  •  

Pregunta

This is a very promising set of tools, but the very first steps do not seem to be described anywhere. THe forum returns 501 error and there are no ready to launch html templates.

Below is my attempt to get started, but something is wrong, apparently. could you correct it to make it show some basic functionality?

<!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>
¿Fue útil?

Solución

Here is basic example of using jquery-tools tooltips

<!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/

In your fiddles link to jquery tools was broken.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top