m.lom599.com_手机版乐白家网址_乐百家手机首页登录

js实现div在页面拖动效果,form实现图片异步上传

作者: 手机版乐白家网址  发布:2019-07-10

  jQuery Mobile 和 Kendo UI 都是流行的 JavaScript 框架,在付出中大家得以在它们的基础上保驾护航制作全体今世活动WEB应用。这四个框架都以依据使用率一级的 JavaScript 库 jQuery 所创设的。相比较 Kendo UI 和 jQuery Mobile 某个看似于相比一致枚硬币的两面。家弦户诵,jQuery Mobile 实际上并无需太多的介绍,因为它是最常用的HTML5框架之一。 Kendo UI 具有相似的心情和类似的向上进程。与 jQuery Mobile 特别周边,Kendo UI 也是依靠jQuery应用框架的定义。然则,两者之间的三个十分大分别是,Kendo UI 是八个用作全部的商业产品,而 jQuery Mobile 是一个开源框架。那并不意味着因为 Kendo UI 不开源你就活该切换来 jQuery Mobile 上,因为开源本身并不可能代表 jQuery Mobile 就比 Kendo UI 更加好,反之亦然。

本文实例陈诉了asp.net jquery.form完毕图片异步上传的艺术。分享给大家供大家仿照效法,具体如下:

本文实例陈述了js完毕div在页面拖动作效果果。分享给大家供我们参谋,具体如下:

在这篇WDJ的小说中大家会竭力更好地打听 Kendo UI 和 jQuery Mobile 在一直以来的事体领域里之内的差异。

首先大家需求做计划干活:

<style type="text/css">
body {
 margin: 0px;
}
#div1 {
 display: none;
 position: absolute;
 z-index: 1000;
 height: 100%;
 width: 100%;
 background: #000000;
 filter:Alpha(opacity=30);
}
#div2 {
 display: none;
 position: absolute;
 height: 100%;
 width: 100%;
 padding-top: 10%;
 z-index: 1001;
}
#div3 {
 display: block;
 position: absolute;
 z-index: 999;
}
</style>
<script type="text/javascript">
//定义移动对象和移动坐标
var Mouse_Obj="none",_x,_y;
//拖动对象函数(自动)
document.onmousemove=function()
{
 if(Mouse_Obj!=="none")
 {
 document.getElementById(Mouse_Obj).style.left=_x event.x;
 document.getElementById(Mouse_Obj).style.top=_y event.y;
 event.returnValue=false;
 }
}
//停止拖动函数(自动)
document.onmouseup=function()
{
 Mouse_Obj="none";
}
//确定被拖动对象函数 o为被拖动对象
function m(o)
{
 Mouse_Obj=o;
 _x=parseInt(document.getElementById(Mouse_Obj).style.left)-event.x;
 _y=parseInt(document.getElementById(Mouse_Obj).style.top)-event.y;
}
</script>
<div id="div1"></div>
<div id="div2" onmousedown="m(this.id)" style="left: 0px;top: 0px;">
<table width="50%" border="0" cellpadding="3" cellspacing="1" 
style="background: #ff7300;
position:static;filter:progid:DXImageTransform.Microsoft.DropShadow
(color=#666666,offX=4,offY=4,positives=true)" align="left">
 <tr style="cursor: move;">
  <td><font color="#FFFFFF">温馨提示:</font></td>
  <td align="right"><input type="button" value="x"
onClick="document.getElementById
('div1').style.display='none';document.getElementById
('div2').style.display='none';" style="cursor: hand;"></td>
 </tr>
 <tr>
  <td colspan="2" width="100%" bgcolor="#FFFFFF" height="150"
align="middle">欢迎访问 <a href="//www.jb51.net">//www.jb51.net</a></td>
 </tr>
</table>
</div>
<div id="div3"><input type="button" value="打开层"
onClick="document.getElementById
('div1').style.display='block';document.getElementById
('div2').style.display='block';"></div>

  jQuery Mobile 和Kendo UI 在可行性上是有好几见仁见智的。你能够精晓到Kendo UI 将它本身定位成为:"当代web和手提式有线电电话机app开荒所需的归结 HTML5/JavaScript 框架。Telerik's Kendo UI是每一位必要创立HTML5站点和手提式有线电话机apps的标准开垦职员所须要的。近期,HTML/jQuery 开垦人士的生育成效受困于将那多少个毫不相干的JavaScript 库和插件构成一个“弗兰肯Stan”(ps:贰个电影的全名)。Kendo UI 却具备全方位:丰盛的jQuery的窗体部件,轻巧并且万法归宗的程序接口,稳固靠谱的数据源,验证,国际化,MVVM框架,宗旨,模板,等等一体系...."。

jquery 点击此处本站下载.rar)。

越来越多关于JavaScript相关内容感兴趣的读者可查看本站专项论题:《JavaScript切换特效与本领总计》、《JavaScript查找算法能力计算》、《JavaScript动画特效与本领汇总》、《JavaScript错误与调度本领计算》、《JavaScript数据结构与算法技巧计算》、《JavaScript遍历算法与能力计算》及《JavaScript数学生运动算用法计算》

  然则jQuery Mobile将它本身定位为:“jQuery Mobile:智能机和机械上触摸感受最佳的Web Framework.一个统一的,以HTML5为根基的面向全部流行的无绳电话机配备平台的用户接口系统,塑造在国家长期安定可信赖的jQuery和jQuery UI 上。它的轻量级代码慢慢增进并且存有灵活自由,轻松的宗旨设计....”。

jquery.form.js 点击此处本站下载.rar)。

指望本文所述对大家JavaScript程序设计具备帮衬。

  综述,很扎眼jQuery Mobile 开荒者们将jQuery Mobile定义为在市镇上同类产品中一个截然新奇的出品。在jQuery Mobile 的定义那运动生态早在其次段子就被定义了。这是贰个很首要的因素有关Kendo UI 为啥偏偏与jQuery Mobile相似,但却形成某种程度上不一致的出品。在于jQuery Mobile比较Kendo UI作为一个框架越来越多涉及移动端的使用。简单来讲,这几个注解Kendo UI是一个混合的jQuery 用户接口,而jQuery Mobile则更侧向服务器端支持。

页面JqueryFormTest.aspx:

你大概感兴趣的小说:

  • js落成悬浮窗效果(辅助拖动)
  • js 鼠标拖动对象 可让任何div完成拖动效果
  • js达成可拖动DIV的章程
  • 正如轻松的Javascript拖动作效果果函数代码
  • javascript 事件管理、鼠标拖动作效果果落成格局详解
  • 鼠标拖动动态改换表格的增长幅度的js脚本 包容ie/firefox
  • 利用javascript移动div层-javascript 拖动层
  • javascript div 弹出可拖动窗口
  • 使用ExtJS本事完结的拖动树结点
  • js完毕鼠标拖动功能

  Kendo UI

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="JqueryFormTest.aspx.cs" Inherits="JqueryFormTest" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
 <title></title>
 <script src="JS/jquery-1.8.0.js" type="text/javascript"></script>
 <script src="JS/jquery.form.js" type="text/javascript"></script>
 <script type="text/javascript">
  $(function () {
   $("#btn").click(function () {
    $("#fm1").ajaxSubmit({
     url: "img.ashx",
     type: "post",
     success: function (data) {
      alert(data);
      //IE显示图片会默认加上<PRE></PRE>,着必须要把去除掉才能在低版本ie显示
      data = data.replace("<PRE>", "").replace("</PRE>", "");
      $("#divimg").append("<img src='"   data   "' width='200px' height='200px'/>");
      //清空file控件里面的值
      var file = $("#btnfile");
      file.after(file.clone().val(""));
      file.remove();
     }
    });
   });
  })
 </script>
</head>
<body>
 <form id="fm1" method="post">
 <!--method="post"不能省略,在ie里面必不可少-->
 <input type="file" id="btnfile" name="btnfile" value="提交" />
 <br />
 <input type="button" id="btn" value="上传" />
 </form>
 <div id="divimg">
 </div>
</body>
</html>

  那框架是与jQuery Mobile相似的增加协助了具相当受招待的运动平台上的具备一级的HTML桌面浏览器。就算事实上它比jQuery Mobile逊色一些可是它建议帮助全世界大致具深受迎接的平台这一壮烈的商海战术。

img.ashx:

  jQuery Mobile

<%@ WebHandler Language="C#" Class="img" %>
using System;
using System.Web;
public class img : IHttpHandler {
 public void ProcessRequest (HttpContext context) {
  context.Response.ContentType = "text/plain";
  //获取上传的文件的对象
  HttpPostedFile img = context.Request.Files["btnfile"];
  //获取上传文件的名称
  string s = img.FileName;
  //截取获得上传文件的名称(ie上传会把绝对路径也连带上,这里只得到文件的名称)
  string str = s.Substring(s.LastIndexOf("\")   1);
  string path = "~/upload/"  str;
  //保存文件
  img.SaveAs(context.Server.MapPath(path));
  //HttpRuntime.AppDomainAppVirtualPath主要是获取应用程序虚拟路径名称,因为响应给页面时不会自动添加而导致无法显示图片
  context.Response.Write(HttpRuntime.AppDomainAppVirtualPath   path.Substring(1));//path.Substring(1)用来去除第一个~字符
 }
 public bool IsReusable {
  get {
   return false;
  }
 }
}

  那么些框架未有将本人定位到其余缓和HTML 框架的Web开荒者所急需的韬略。

更加多关于jQuery相关内容感兴趣的读者可查阅本站专项论题:《jQuery切换特效与本事总计》、《jQuery拖拽特效与手艺总括》、《jQuery扩大技能总结》、《jQuery常见卓越特效汇总》、《jQuery动画与特功能法总计》、《jquery选拔器用法总结》及《jQuery常用插件及用法总括》

  强有力的帮忙全数又有名的桌面浏览器和平运动动平台,因而有的时候会发出更加多难题。

愿意本文所述对大家jQuery程序设计有着协理。

  被半数以上运动平台和桌面浏览器所帮衬

你可能感兴趣的稿子:

  • .Net Core达成图片文件上传下载功用
  • ASP.NET MVC图片上传前预览简单达成
  • ASP.NET MVC完结图片上传、图片预览显示
  • asp.net图片文件的上传与删除方法
  • asp.net基于Web Service达成长途上传图片的法子
  • .Net 达成图片缩略图上传通用艺术

胜利者:看样子两个之间工力悉敌。

  分界面外观是值得探讨的严重性方面,多少个框架在这一派又是不行临近。若是你需求与投机的应用程序保保持平衡台一致性,那么指出接纳jQuery Mobile,因为它利用了阳台毫不相关的用户分界面。UI 中隐含了汪洋的组件,它们被高速响应,并饱受多量第三方的鼎力援助。

本文由m.lom599.com发布于手机版乐白家网址,转载请注明出处:js实现div在页面拖动效果,form实现图片异步上传

关键词: m.lom599.com

上一篇:实例代码,个人网站留言页面
下一篇:没有了