jquery slideDown()

Question

本帖最后由 Net2012pb 于 2014-05-01 11:43:22 编辑

Answer 1

你这些代码是看不出什么的function $(id)
这个是你在哪里定义的，这个要在后面定义，否则你使用
var   jq  =  $.noConflict()
的时候，应该会出问题的。所以要么把$方法的定义，放在jq赋值之后，要么就改一下：
var   jq  =  jQuery.noConflict()这样试试。。
没有测试仅供参考。

Answer 2

  非常谢谢，这个弄好了。
还有些问题不太会弄，希望您能帮帮忙，谢谢。您能帮我看一下这个问题吗？谢谢。要达到的效果是，点击日历中的某一天，弹出添加日程的框，   1. 希望能把这个框显示在网页中的固定位置
2.弹出的框覆盖底下的内容。如图，顶部中间的   图形按钮及“5月，2014”字样都是日历里的，却也显示在弹出的框里了。
再如图，弹出框显示页面右下角，还超出了网页的宽度。#addBox{
    display:none;
position:absolute;
    width:530px;
height:360px;
    border:1px solid #FF0000;
background:#FFCC33;
}td{
   width:60px;
}#taskDate{
    height:30px;
    font-weight:bold;
    padding:3px;
}<script>
/*  jquery  */
var jq = jQuery.noConflict();/*  打开addBox   */
function openAddBox(src){
    jq("#taskDate").html(src.id);
    jq("#addBox").offset({top:60,left:400}).slideDown();  //显示新建任务box
}/* 关闭addBox  */
function closeAddBox(){
   jq("#addBox").slideUp();
}
</script>

Answer 3

你对那个弹出框的CSS，有没有设置z-index的属性？看起来是设置了，但是并没有设置对的情况。如果是设置了，然后出问题的，可以参考一下：
position中z-index问题,关于z-index的那些事儿第二个显示在右下角的情况，应该跟固定定位有关吧
下面一种情况，按理说就会出现问题：
position:fixed;
bottom:100px;
left:50%;
width:300px;如果设置的css是上面这样，当文档窗口的视图窗口（也就是浏览器的显示大小）的宽度小于600px时，就会出现你说的那种情况，你这里具体是因为什么出现的，我也就不知道了。你自己查查吧。固定定位，利用top,left,right,bottom属性使用百分比，然后元素的width，height使用固定值时，当窗口是小窗口时。就会出现这个问题的。这个问题，你可以参考一下那些有返回顶部按钮的网站，当浏览器宽度变小时，那个按钮一般就有问题了，有的网站就没有进行处理（例如：新浪微博），有的就在宽度到了一定值时，把这个按钮直接隐藏了（例如：hao123主页）。暂时就看到你想说的这两个问题，能明白我的意思不？如果说的不对，那就是我没有理解到你想表达的问题了

Answer 4

谢谢您的详细解答。还想继续向您请教啊，希望您不介意，谢谢。
我在弹出框的样式里设置  z-index:10;    也设置成显示在网页中的固定位了。
我还想把这个弹出框设置成模态框，在关闭它前，原网页内容不能操作。
可是现在弹出框出来后，我仍然可以点击日历中的其他日期，而且弹出框顶部显示的日期也相应变成后来点击的日期。

Answer 5

不客气，有问题就直接说，我看到，问题我也了解一些的话，就可以说一下。之前的没有继续说问题，我就当你是解决了。你后面说的这个问题，只要再添加一个固定定位的div就行了，然后把div设置成width:100%,height:100%，让这个div占据整个窗口，不设置或者设置一个背景色添加上透明度显示，就行了，设置这个div的z-index的要比你那个模态窗口的z-index小就可以了。这个时因为，两个元素如果重合的话，下面的元素会被上面的元素覆盖的，所以下面的元素就不可操作了。所以这里也要注意，模态窗口的z-index要大于那个div才行。

Answer 6

您帮我看看这个问题吧，点击弹出框内的保存按钮，不能显示在日期框内。
//向服务器提交新任务信息
function addTask() {   var taskInfo = $("#taskInfo").val();//获取任务信息
    //检查任务信息是否为空
    if ($.trim(taskInfo)=="") {
        alert("请输入任务信息。");
    } else {
        var buildDate = $("#taskDate").html();          //获取任务日期
        $.post("calendar.jsp",                          //服务器页面地址
            {
                action: "addTask",                      //action参数
                taskInfo: taskInfo,                     //任务信息参数
                buildDate: buildDate                    //任务日期参数
            },
            function(taskId) {                      //回调函数
                buildTask(buildDate, taskId, taskInfo); //建立任务节点
                closeAddBox();                          //关闭新建任务box
            }
        );
    } 
}//根据日期、任务编号、任务内容在页面上创建任务节点
function buildTask(buildDate, taskId, taskInfo) {
    $("#" + buildDate).parent().append("<div id='task" + taskId + "' class='task' onclick='editTask(this)'>" + taskInfo + "</div>");
}calendar.jsp文件里的代码：//添加新任务
    int addTask(String taskInfo, String buildDate) {
        int newId = -1;                         //用于保存新任务编号
        String sql = "insert into schedule(task, builddate) values(?,?)";   //定义插入数据的SQL语句        Connection conn = null;                 //声明Connection对象
        PreparedStatement pstmt = null;         //声明PreparedStatement对象
        ResultSet rs = null;                    //声明ResultSet对象
        try {
            conn = DBUtils.getConnection();     //获取数据库连接
            pstmt = conn.prepareStatement(sql); //根据sql创建PreparedStatement
            pstmt.setString(1, taskInfo);       //设置参数
            pstmt.setString(2, buildDate);      //设置参数
            pstmt.executeUpdate();
            pstmt.close();            //获取刚插入数据的新id
            pstmt = conn.prepareStatement("select last_insert_id()");
            rs = pstmt.executeQuery();
            if (rs.next()) {
                newId = rs.getInt(1);           //获取新id
            }
        } catch (SQLException e) {
            System.out.println(e.toString());
        } finally {
            DBUtils.close(rs);                  //关闭结果集
            DBUtils.close(pstmt);               //关闭PreparedStatement
            DBUtils.close(conn);                //关闭连接
        }
        return newId;
    }     
    out.clear();                                                //清空当前的输出内容（空格和换行符）
    request.setCharacterEncoding("UTF-8");                      //设置请求字符集为UTF-8    String action = request.getParameter("action"); 
           //获取action信息
   System.out.print("before");     //根据action不同执行不同的操作
    if ("addTask".equals(action)) {  
System.out.print("after");                            //新建任务
        String taskInfo = request.getParameter("taskInfo");
        String buildDate = request.getParameter("buildDate");
        out.print(addTask(taskInfo,buildDate));
    } else if ("getTasks".equals(action)) {                     //获取整月任务信息
        String month = request.getParameter("month");
        String result = getTasks(month);
        out.println(result);
    } else if ("delTask".equals(action)) {                      //删除任务
        String taskId = request.getParameter("taskId");
        delTask(taskId);
    } else if ("updateTask".equals(action)) {                   //更新任务信息
        String taskId = request.getParameter("taskId");
        String taskInfo = request.getParameter("taskInfo");
        updateTask(taskId, taskInfo);
    }
最后的效果应该是，日程显示在日期单元格内，如图：

Answer 7

您帮我看看这个问题吧，点击弹出框内的保存按钮，不能显示在日期框内。
//向服务器提交新任务信息
function addTask() {   var taskInfo = $("#taskInfo").val();//获取任务信息
    //检查任务信息是否为空
    if ($.trim(taskInfo)=="") {
        alert("请输入任务信息。");
    } else {
        var buildDate = $("#taskDate").html();          //获取任务日期
        $.post("calendar.jsp",                          //服务器页面地址
            {
                action: "addTask",                      //action参数
                taskInfo: taskInfo,                     //任务信息参数
                buildDate: buildDate                    //任务日期参数
            },
            function(taskId) {                      //回调函数
                buildTask(buildDate, taskId, taskInfo); //建立任务节点
                closeAddBox();                          //关闭新建任务box
            }
        );
    } 
}//根据日期、任务编号、任务内容在页面上创建任务节点
function buildTask(buildDate, taskId, taskInfo) {
    $("#" + buildDate).parent().append("<div id='task" + taskId + "' class='task' onclick='editTask(this)'>" + taskInfo + "</div>");
}
calendar.jsp文件里的代码：//添加新任务
    int addTask(String taskInfo, String buildDate) {
        int newId = -1;                         //用于保存新任务编号
        String sql = "insert into schedule(task, builddate) values(?,?)";   //定义插入数据的SQL语句        Connection conn = null;                 //声明Connection对象
        PreparedStatement pstmt = null;         //声明PreparedStatement对象
        ResultSet rs = null;                    //声明ResultSet对象
        try {
            conn = DBUtils.getConnection();     //获取数据库连接
            pstmt = conn.prepareStatement(sql); //根据sql创建PreparedStatement
            pstmt.setString(1, taskInfo);       //设置参数
            pstmt.setString(2, buildDate);      //设置参数
            pstmt.executeUpdate();
            pstmt.close();            //获取刚插入数据的新id
            pstmt = conn.prepareStatement("select last_insert_id()");
            rs = pstmt.executeQuery();
            if (rs.next()) {
                newId = rs.getInt(1);           //获取新id
            }
        } catch (SQLException e) {
            System.out.println(e.toString());
        } finally {
            DBUtils.close(rs);                  //关闭结果集
            DBUtils.close(pstmt);               //关闭PreparedStatement
            DBUtils.close(conn);                //关闭连接
        }
        return newId;
    }     
    out.clear();                                                //清空当前的输出内容（空格和换行符）
    request.setCharacterEncoding("UTF-8");                      //设置请求字符集为UTF-8    String action = request.getParameter("action"); 
           //获取action信息
   System.out.print("before");     //根据action不同执行不同的操作
    if ("addTask".equals(action)) {  
System.out.print("after");                            //新建任务
        String taskInfo = request.getParameter("taskInfo");
        String buildDate = request.getParameter("buildDate");
        out.print(addTask(taskInfo,buildDate));
    } else if ("getTasks".equals(action)) {                     //获取整月任务信息
        String month = request.getParameter("month");
        String result = getTasks(month);
        out.println(result);
    } else if ("delTask".equals(action)) {                      //删除任务
        String taskId = request.getParameter("taskId");
        delTask(taskId);
    } else if ("updateTask".equals(action)) {                   //更新任务信息
        String taskId = request.getParameter("taskId");
        String taskInfo = request.getParameter("taskInfo");
        updateTask(taskId, taskInfo);
    }最后的效果应该是，日程显示在日期单元格内，如图：

Answer 8

我理解的意思，就是说，你想要在添加一个日程之后，把内容显示在日期下方的那个空白区域。如果你确定，下面这段代码执行了的话，
function(taskId) {                      //回调函数
                buildTask(buildDate, taskId, taskInfo); //建立任务节点
                closeAddBox();                          //关闭新建任务box
            }那就是说buildTask，这个函数执行没有达到理想的效果了。那这里就要看你的代码结构了，我你也没有给出你的代码结构，那么我就稍微说一点，你试着改。$("#" + buildDate).parent().append("<div id='task" + taskId + "' class='task' onclick='editTask(this)'>" + taskInfo + "</div>");你这里获取的$("#" + buildDate)这个id元素，是哪个？按我的理解的话，这个就应该是日期下方的空白元素吧？就是这样：日期小块的结构。
<div>14</div>
<div id = "buildDate"></div>
如果这个就是日程需要显示的位置，那么就不需要获取parent元素了。<div id = "buildDate">14</div>
<div></div>
如果这个就是你上面的那个数字所在元素的id的话，$("#" + buildDate).next().append这样操作了。如果你的结构式上面的一种，却采用了你代码中的写法，那你就在浏览器调试工具中看看，是不是在第二个div后面，又出现了第三个div，只是因为CSS设置的原因，被其他元素覆盖了。关于这样的问题，确认问题原因的最直接的方法，就是在浏览器的调试面板，查看正在操作的元素，是不是已经被添加到hmtl结构中了，如果添加进去了，位置不对，那就调位置，显示不对，就调CSS，这样能更快确认问题，解决问题。

Answer 9

上面这个问题还是没有解决，麻烦您再给看看
$("#" + buildDate)这个id元素，buildDate由这个函数function buildTask(buildDate, taskId, taskInfo)的参数传递。
buildTask这个函数下面的函数里调用//向服务器提交新任务信息
function addTask() {
 
   var taskInfo = $("#taskInfo").val();//获取任务信息
    //检查任务信息是否为空
    if ($.trim(taskInfo)=="") {
        alert("请输入任务信息。");
    } else {
        var buildDate = $("#taskDate").html();          //获取任务日期
        $.post("calendar.jsp",                          //服务器页面地址
            {
                action: "addTask",                      //action参数
                taskInfo: taskInfo,                     //任务信息参数
                buildDate: buildDate                    //任务日期参数
            },
            function(taskId) {                      //回调函数
                buildTask(buildDate, taskId, taskInfo); //建立任务节点
                closeAddBox();                          //关闭新建任务box
            }
        );
    }
 
  
}在这里取得buildDate
var buildDate = $("#taskDate").html();          //获取任务日期而$("#taskDate")这个id，是在下面这个日程添加框的表格里定义的，
<table id="addBox">
   <tr>
      <td id="taskDate"></td>
   </tr>
   <tr>
      <td>内容：</td>
  <td><input type="text"  id="taskInfo"  /></td>
   </tr>
   <tr>
      <td>类别：</td>
  <td><select name="">
    <option>请假外出</option>
    <option>工作任务</option>
    <option>会议室预订</option>
    <option>公司安排</option>
  </select></td>
   </tr>
   <tr>
      <td><input type="button" value="保存"  class="bt" onclick="addTask()"/></td>
  <td><input type="button" value="取消"   class="bt" onclick="closeAddBox()"/></td>
   </tr>
</table>