设为首页收藏本站 钱三岛支付

源码之家

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
热搜: 活动 交友 discuz
查看: 1593|回复: 1

jquery表单文本框添加文字标签

[复制链接]

4

主题

4

帖子

14

积分

新手上路

Rank: 1

积分
14
发表于 2014-8-2 19:25:08 | 显示全部楼层 |阅读模式
本帖最后由 设计者 于 2014-8-2 19:57 编辑



jquery表单文本框添加文字标签是一款基于jquery实现的表单text文本框回车添加文字标签拖动,可调顺序。

演示地址:http://jquery.downcms.com/sucai/DC0000001/demo/index.html

下载地址:
游客,如果您要查看本帖隐藏内容请回复


源代码:
  1. <div style=" width:100%; height:auto; clear:both; margin-top:18px;   ">
  2.   <div style=" width:1022px; height:auto; border:1px solid #dadada; background:#fff;     margin:0 auto;  ">
  3.     <div class="login" style=" width:780px; margin:20px auto; background:#fafafa;   border:1px solid #e0e0e0; border-bottom:6px solid #e0e0e0;    ">
  4.       <div style="width:775px;     ">
  5.         <form action="" method="get">
  6.                  
  7.                
  8.      
  9.         <table width="775" border="0" cellspacing="0" cellpadding="0" style="float:left;">
  10.          
  11.           <tr id="jq124">
  12.             <td width="219" height="52" align="right" valign="middle" ><label class="i_zt"   ><span style="color:#da4453;">*</span> 主办单位:</label></td>
  13.             <td height="52" valign="middle"><div class="i_inp"  id="paren"  style="  min-height:30px; cursor:pointer; height:auto;     "> <span    class="ui-sortable disp"  >
  14.                 <div id="dc" class="sort"  style="background:#CCC;   white-space:nowrap; float:left; display:block; width:0px; overflow:hidden;      height:22px; font-size:12px;  color:red;">
  15.                   <div  id="dart"  style="  cursor:move; height:22px; display:block; float:left;   line-height:22px; "></div>
  16.                 </div>
  17.                 </span>
  18.                 <input class="ipva"   name=""    type="text" style=" border:none; float:left; display:block; width:auto; outline:none; margin:5px; width:auto; min-width:10px; max-width:200px; background:none; height:22px; line-height:22px; font-size:12px; font-family:微软雅黑;" />
  19.                 <div style="clear:both;"></div>
  20.               </div></td>
  21.             <td width="284"><table   border="0" cellspacing="0" cellpadding="0" class="did">
  22.                 <tr>
  23.                   <td height="3"><img src="images/eeee_03.png" alt="" /></td>
  24.                   <td height="3" style="background:url(images/eeee_05.png) repeat-x #f9f9f9"></td>
  25.                   <td height="3"><img src="images/eeee_06.png" alt="" /></td>
  26.                 </tr>
  27.                 <tr>
  28.                   <td width="30" valign="top"  style="background:url(images/err_11.png) repeat-y #f9f9f9"><img src="images/eeee_08.png" alt="" /></td>
  29.                   <td style="background:#f9f9f9; line-height:16px; padding:5px 3px; font-size:12px; font-family:宋体;">输入学科后<span style="color:#da4453;">回车</span>即可添加更多单位
  30.                     </td>
  31.                   <td style="background:url(images/eeee_10.jpg) repeat-y #f9f9f9"></td>
  32.                 </tr>
  33.                 <tr>
  34.                   <td><img src="images/eeee_11.png" alt="" /></td>
  35.                   <td style="background:url(images/eeee_12.png) repeat-x #f9f9f9"></td>
  36.                   <td><img src="images/eeee_13.png" alt="" /></td>
  37.                 </tr>
  38.               </table></td>
  39.           </tr>
  40.           <tr id="jq124">
  41.             <td width="219" height="52" align="right" valign="middle"  ><label class="i_zt"   >协办单位:</label></td>
  42.             <td height="52" valign="middle"><div class="i_inp"  id="paren"  style="  min-height:30px; cursor:pointer; height:auto;     "> <span    class="ui-sortable disp"  >
  43.                 <div id="dc" class="sort"  style="background:#CCC;   white-space:nowrap; float:left; display:block; width:0px; overflow:hidden;      height:22px; font-size:12px;  color:red;">
  44.                   <div  id="dart"  style="  cursor:move; height:22px; display:block; float:left;   line-height:22px; "></div>
  45.                 </div>
  46.                 </span>
  47.                 <input class="ipva"   name=""    type="text" style=" border:none; float:left; display:block; width:auto; outline:none; margin:5px; width:auto; min-width:10px; max-width:200px; background:none; height:22px; line-height:22px; font-size:12px; font-family:微软雅黑;" />
  48.                 <div style="clear:both;"></div>
  49.               </div></td>
  50.             <td width="284"><table   border="0" cellspacing="0" cellpadding="0" class="did">
  51.                 <tr>
  52.                   <td height="3"><img src="images/eeee_03.png" alt="" /></td>
  53.                   <td height="3" style="background:url(images/eeee_05.png) repeat-x #f9f9f9"></td>
  54.                   <td height="3"><img src="images/eeee_06.png" alt="" /></td>
  55.                 </tr>
  56.                 <tr>
  57.                   <td width="30" valign="top"  style="background:url(images/err_11.png) repeat-y #f9f9f9"><img src="images/eeee_08.png" alt="" /></td>
  58.                   <td style="background:#f9f9f9; line-height:16px; padding:5px 3px; font-size:12px; font-family:宋体;">回车即可添加<span style=" color:#F00;"></span>更多语言</td>
  59.                   <td style="background:url(images/eeee_10.jpg) repeat-y #f9f9f9"></td>
  60.                 </tr>
  61.                 <tr>
  62.                   <td><img src="images/eeee_11.png" alt="" /></td>
  63.                   <td style="background:url(images/eeee_12.png) repeat-x #f9f9f9"></td>
  64.                   <td><img src="images/eeee_13.png" alt="" /></td>
  65.                 </tr>
  66.               </table></td>
  67.           </tr>
  68.           <tr  >
  69.             <td width="219" height="52" align="right" valign="middle"  ><label class="i_zt"   >联办单位:</label></td>
  70.             <td height="52" valign="middle"><div class="i_inp"  id="paren"  style="  min-height:30px; cursor:pointer; height:auto;     "> <span    class="ui-sortable disp"  >
  71.                 <div id="dc" class="sort"  style="background:#CCC;   white-space:nowrap; float:left; display:block; width:0px; overflow:hidden;      height:22px; font-size:12px;  color:red;">
  72.                   <div  id="dart"  style="  cursor:move; height:22px; display:block; float:left;   line-height:22px; "></div>
  73.                 </div>
  74.                 </span>
  75.                 <input class="ipva"   name=""    type="text" style=" border:none; float:left; display:block; width:auto; outline:none; margin:5px; width:auto; min-width:10px; max-width:200px; background:none; height:22px; line-height:22px; font-size:12px; font-family:微软雅黑;" />
  76.                 <div style="clear:both;"></div>
  77.               </div></td>
  78.             <td width="284"><table   border="0" cellspacing="0" cellpadding="0" class="did">
  79.                 <tr>
  80.                   <td height="3"><img src="images/eeee_03.png" alt="" /></td>
  81.                   <td height="3" style="background:url(images/eeee_05.png) repeat-x #f9f9f9"></td>
  82.                   <td height="3"><img src="images/eeee_06.png" alt="" /></td>
  83.                 </tr>
  84.                 <tr>
  85.                   <td width="30" valign="top"  style="background:url(images/err_11.png) repeat-y #f9f9f9"><img src="images/eeee_08.png" alt="" /></td>
  86.                   <td style="background:#f9f9f9; line-height:16px; padding:5px 3px; font-size:12px; font-family:宋体;">回车即可添加<span style=" color:#F00;"></span>更多单位</td>
  87.                   <td style="background:url(images/eeee_10.jpg) repeat-y #f9f9f9"></td>
  88.                 </tr>
  89.                 <tr>
  90.                   <td><img src="images/eeee_11.png" alt="" /></td>
  91.                   <td style="background:url(images/eeee_12.png) repeat-x #f9f9f9"></td>
  92.                   <td><img src="images/eeee_13.png" alt="" /></td>
  93.                 </tr>
  94.               </table></td>
  95. </body>
复制代码





本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复

使用道具 举报

0

主题

184

帖子

525

积分

高级会员

Rank: 4

积分
525
发表于 2017-2-5 23:06:27 | 显示全部楼层
杨彪 建鸿。在那强大的龙族与凤族之中,真龙与真凤乃是最为强大的存在,具有着匹敌天至尊级别的超级存在的可怕实力
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|( 鲁ICP备13018729号-5 )   

GMT+8, 2024-3-29 10:07 , Processed in 0.074552 second(s), 28 queries .

www.downcms.com

CopyRight Downcms

快速回复 返回顶部 返回列表