后台切图

JS:

<script src="js/jquery-1.7.1.js" type="text/javascript"></script>
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>

一。

功能描述:点右边的垃圾桶图标,左边的多行输入框内容被清空,,,支持页面中多个这样的功能

HTML:

<div class="delbox">
          <div class="shmsbox"><textarea name="" class="msk"></textarea></div>
          <div class="delpic" onclick="delwby(this);"><img src="img/del.png" /></div>
          <div class="clear"></div>
   </div>

CSS:

.delbox{ width:65.5%; height:53px; *height:50px; background-color:#3d66a5; border:solid 1px #cacaca;}
   .delbox .shmsbox{ width:95%; height:53px;*height:50px; float:left; background-color:#fff;}
  .delbox .shmsbox .msk{ width:99%; height:auto; border:0; }
  .delbox .delpic{ width:5%; height:auto; float:left; text-align:center; cursor:pointer;}
  .delbox .delpic img{ width:auto; height:auto; padding-top:16px; margin-left:1px; }

js:

function delwby(obj){
            $(obj).parent().find("textarea",".msk").first().val(‘‘);
  
    }

注: $(obj).parent().find   对象的父对象 .parent()      在父对象下寻找 .find(‘‘)

二,增加一条功能

HTML:

<div id="outplan" class="planbox">

<div>要增加(复制)的内容</div>

<div>要增加(复制)的内容</div><!--复制内容一-->

</div>

<div id="albtn">增加一条</div>

js:

$(document).ready(function(){

$("#albtn").click(function(){
      var tabtr="<div>要增加(复制)的内容</div>";
             
    $("#outplan").append(tabtr);  

});

})

注:被复制内容和要增加的内容要在同一DIV里

$("#outplan").append(“<b>Hello World!</b>”)在元素结尾插入内容
  $("<b>Hello World!</b>").appendTo("#outplan");

$("#outplan").prepend() 方法在被选元素的开头(仍位于内部)插入指定内容。

$("<b>Hello World!</b>").prependTo("#outplan");

三,点击选中行,弹出窗口,背景变灰

HTML:

<tr class="modalLink" onclick="bgs(this);">
                        <td>刘春燕</td>
                        <td>其它</td>
                        <td>2015-01-12 08:02:00</td>
                        <td>2015-01-15 06:10:00</td>
                        <td>初始化</td>
                        <td>未完结</td>
                        <td></td>
                      </tr>
                      <tr class="modalLink" onclick="bgs(this);">
                        <td>刘春燕</td>
                        <td>飞机</td>
                        <td>2015-01-12 08:02:00</td>
                        <td>2015-01-15 06:10:00</td>
                        <td>申核通过</td>
                        <td>完结</td>
                        <td>2015-01-11 08:02:00</td>
                      </tr>

JS:<script type=‘text/javascript‘ src=‘js/jquery.modal.js‘></script>
<script type=‘text/javascript‘ src=‘js/site.js‘></script>

function bgs(obj){
     //  alert("sdrase");
    
    // $(obj).find("td").attr("style","BACKGROUND-COLOR:#e6e7eb").siblings("tr").find("td").attr("style","BACKGROUND-COLOR:#fff");
    
    // $("#tcbox1").fadeIn(100)
    // $(".overlay").animate({ opacity:.6},10);

$(obj).addClass("trss").siblings("tr").removeClass("trss");
    
  }

时间: 2024-09-23 08:33:27

后台切图的相关文章

公司后台切图

一.三级菜单的切图 HTML: <div class="subNavBox">            <div class="subNav">                 <div class="mident"></div>                 <div class="mword">我的工作</div>                 &l

ps切图详解-web前端(转)

网页设计在技术层面上,第一步是美工做出网页效果图,第二步就是网页前端进行网页切图.网页切图工具常用的有fireworks.PS,这里使用PS进行网页切图. 我们通过设计稿,得到我们想要的产出物(如.png,.jpg文件),给网页提供图片素材(HTML:img,CSS:background). 一.使用PS工具 1.1 PS首选项设置 编辑->首选项->单位与标尺,选改为像素. 1.2 面板 在"窗口"菜单下开启: 工具(默认已开启) 选项(默认已开启) 图层(默认已开启)

什么是CSS网页切图

经常有人问我CSS网页切图是什么东东.在这里详细给大家解答一下 在说CSS网页切图之前,我先给大家说一下一般制作一个网站需要步骤 一.网页设计人员会根据客户要求在PS中设计出网页效果图,这个效果图一般会存储为PSD格式 二.网页前台人员需要根据设计师所出的效果图(PSD文件)进行切图. 三.程序人员会根据网页前台人员所提供网页进行程序的制作. 那也就是在网站制作第二步我们会用到CSS网页切图.其实说白了就是把一个图片转成网页的过程.因为设计人员所出网页效果图是没有链接.是不能直接供后台人员使用的

页面制作部分之PS切图

页面制作部分之PS切图 <--本标签下,通过页面制作.页面架构.javascript程序设计.DOM编程艺术.产品前端架构五部分来分享总结笔记,总结笔记会陆续分享--> 网页设计在技术层面上,第一步是美工做出网页效果图,第二步就是网页前端进行网页切图.网页切图工具常用的有fireworks.PS,这里使用PS进行网页切图. 我们通过设计稿,得到我们想要的产出物(如.png,.jpg文件),给网页提供图片素材(HTML:img,CSS:background). 一.使用PS工具 1.1 PS首选

前端技术-PS切图

页面制作部分之PS切图 <--本标签下,通过页面制作.页面架构.javascript程序设计.DOM编程艺术.产品前端架构五部分来分享总结笔记,总结笔记会陆续分享--> 网页设计在技术层面上,第一步是美工做出网页效果图,第二步就是网页前端进行网页切图.网页切图工具常用的有fireworks.PS,这里使用PS进行网页切图. 我们通过设计稿,得到我们想要的产出物(如.png,.jpg文件),给网页提供图片素材(HTML:img,CSS:background). 一.使用PS工具 1.1 PS首选

一款APP从设计稿到切图过程全方位揭秘 Mark

纯干货!一款APP从设计稿到切图过程全方位揭秘 @BAT_LCK:我本身是一名GUI设计师,所以我只站在GUI设计师的角度去把APP从项目启动到切片输出的过程写一写,相当于工作流程的介绍吧.公司不同,流程不尽相同,但是终究还是能有些帮助. 依旧声明:这里写的不是一种规范,只是一种工作方法,大家在具体工作中,一定要灵活运用.另外,技术的更新是非常快的,我写的这些可能某些东西已经和你们的工程师搭档所用的方法不一样了,所以,还是要灵活运用~ 这里我们只说IOS系统下的设计,至于Android,因为尺寸

前端切图+网页排版的注意事项和经验分享

现在在学校里面,培训机构里面都有很多课程是前端切图这一方面的,简单来说就是学习div+css网页排版.有很多人经过这一轮的学习之后就发现自己对排版这一方面非常的熟悉甚至说自己的div+css的高手.其实真正说要懂得一个网页排版需要注意的一些问题是什么呢?是不是在电脑上面看到自己排版出来的页面就真的是一个成功的网页了吗?下面我说一下我自己在网页排版上面会注意的一些事情: 一.使用样式的种类和名字的规范 id和class应该如何使用 在我们使用div+css排版的时候,每一个div我们都会给他一个样

CSS网页切图实例教程下

CSS网页切图实例教程下 7.导航的制作,是一个典型的ULLI列表.我们先写出HTML代码,而在我们导航列表之间有一个竖线隔开. <ul> <li><a href="#">divcss8.com首页</a>|</li> <li><a href="#">关于捷福</a>|</li> <li><a href="#">产品

切图崽的自我修养-优化图片加载流程

前言 优化! 又是优化! 切图崽们作为整个web应用的纽带,连接着用户行为和机器性能. 而优化的最终意义,在于在这两者之间取得一个最佳的平衡点. 对于图片资源的加载来说,更是如此. 今天我们就来简单说说,项目开发中常见的图片加载优化方式. 预加载 1.遮罩大法 我们经常用jquery, jquery中$(function){})实际上是DOMContentLoaded事件完成的回调,只是完成了DOM树的构建. 诸如Css的渲染以及页面内图片等资源的下载不一定完成了.所以如果此时呈现页面,页面会非