JObj预览一个JS的框架

我的时间不多,大部分是在工作之余写的。

代码如下:

JObj.Dom.$tag("INPUT") 
  .$filter(function(o){    
   var fa = o.parentNode.parentNode.parentNode; 
   return f =(o.type == "text" && fa.id == "hollerNew") ? true : false; 
  }) 
  .$css({width:"570px",height:"18px",lineHeight:"18px"}) 
  .$attr({className:"hollerFormNormal"}) 
  .$event({ 
   onfocus:"vControl('TEXTFOCUS',this)", 
   onblur:"vControl('TEXTBLUR',this)" 
   }) 
  .$tag("TEXTAREA") 
  .$css({width:"570px",height:"100px",lineHeight:"18px"}) 
  .$attr({className:"hollerFormNormal"}) 
  .$event({ 
   onfocus:"vControl('TEXTFOCUS',this)", 
   onblur:"vControl('TEXTBLUR',this)" 
   }) 
  .$(document.hollerNew) 
    .$event({ 
     onsubmit:function(){ 
      return JObj.FormValidate.$validate(this,rules); 
     } 
    });

JObj.Dom.$(window) 
  .$event({ 
   onscroll:"vControl('FIXTOOLBAR')" 
  });

var vControl = function(pChoice){ 
 var args = arguments; 
 switch(pChoice){ 
  case "BACKER": 
   var backer = args[1]; 
   var id = args[2]; 
   break; 
  case "FLOWERS": 
   var id = args[1]; 
   break; 
  case "EGGS": 
   var id = args[1]; 
   break; 
  case "TEXTFOCUS": 
   args[1].className = "hollerFormFocus"; 
   break; 
  case "TEXTBLUR": 
   args[1].className = "hollerFormNormal"; 
   break; 
  case "SHOWTIP": 
   var o,t; 
   switch(args[3]){ 
    case "FLOWER":  
     o = "hollerTip_flower_"; 
     t = "鲜花 " + args[2] + " 朵,送他/她一朵,让她开花店!" 
     break; 
    case "EGG":  
     o = "hollerTip_egg_"; 
     t = "鸡蛋 " + args[2] + " 枚,如果你怕不够孵小鸡,你在给他/她一枚!" 
     break; 
    default :  
     return; 
   }

JObj.Dom.$(o + args[1]) 
     .$attr({innerHTML:t}) 
     .$css({display:"",position:"relative"}) 
     .$show("fast", 
      {width:0,height:0}, 
      {width:400,height:18}  
     ); 
   break; 
  case "HIDETIP": 
   var o; 
   switch(args[2]){ 
    case "FLOWER": o = "hollerTip_flower_";break; 
    case "EGG": o = "hollerTip_egg_";break; 
    default : return; 
   }

JObj.Dom.$(o + args[1]) 
     .$hide("fast"); 
   break; 
  case "FIXTOOLBAR": 
   JObj.Dom.$("toolBar") 
     .$css({opacity:0.1,filter:"Alpha(Opacity=10)"}) 
     .$moveToScrollTop("fast"); 
   break; 
 } 
}

(0)

相关推荐

  • JObj预览一个JS的框架

    我的时间不多,大部分是在工作之余写的. 复制代码 代码如下: JObj.Dom.$tag("INPUT")    .$filter(function(o){        var fa = o.parentNode.parentNode.parentNode;     return f =(o.type == "text" && fa.id == "hollerNew") ? true : false;    })    .$cs

  • 图片上传之前检查大小、尺寸、格式并预览的js代码

    下面的代码,需要保存到本地种执行,在线看不到实际效果. validate before upload by Lance Zhang File type :gif,jpg,jpeg,png,bmp File Size limit: K Image Height Limit: Image Width Limit: Image Preview function CheckFileSize() { var limit = document.getElementById("fileSizeLimit&qu

  • JS中利用FileReader实现上传图片前本地预览功能

    引子 平时做图片上传预览时如果没有特殊的要求就直接先把图片传到后台去,成功之后拿到URL再渲染到页面上,这样做在图片比较小的时候没什么问题,大一点的话就会比较慢才能看到预览了,而且还产生了垃圾文件,所以比较好的是上传之前先在本地预览一下. 之前做项找插件的时候就知道纯前端可以实现图片本地预览,可今天面试的时候被问到时竟然一脸懵逼,然后竟然无意中就在电脑桌面发现了实现的demo,然后根据demo查了一下API,稍微总结下: 首先得拿到File对象 当用input标签上传图片时event对象中会包含

  • JavaScript代码实现txt文件的上传预览功能

    今天做项目刚好碰到这个记录一下.因为是简单的txt文件,只涉及文本,如果需要涉及图片预览就需要使用papaparse和jschardet,此处不多叙述. 表单按钮使用js的onchange="uploadfile()" 事件,function函数代码如下所示: //此处为txt文件上传预览的js代码 function uploadfile(){ var file=$("#txt")[0].files[0]; //判断上传文件是不是txt格式,判断后缀是不是.txt

  • jsoneditor二次封装实时预览json编辑器组件react版

    目录 前言 设计思路 正文 jsoneditor的使用 结合react进行二次封装 前言 做为一名前端开发人员,掌握vue/react/angular等框架已经是必不可少的技能了,我们都知道,vue或react等MVVM框架提倡组件化开发,这样一方面可以提高组件复用性和可扩展性,另一方面也带来了项目开发的灵活性和可维护,方便多人开发协作.接下来文章将介绍如何使用react,开发一个自定义json编辑器组件.我们这里使用了jsoneditor这个第三方库,官方地址: jsoneditor 通过实现

  • 微信小程序实现文件预览

    微信小程序的文件预览,供大家参考,具体内容如下 微信小程序的文件预览需要先使用wx.downloadFile下载文件,然后使用下载文件的临时路径通过wx.openDocument进行文件的 预览 wxml代码: <button bindtap='preview'>简历预览</button> js代码: //简历预览 preview: function () { var that = this; console.log("简历预览") //这里的value是先在d

  • SpringBoot实现文件在线预览功能的全过程

    目录 背景 系统设计 文件类型及方案 流程设计 系统实现 识别文件后缀 文件解析 系统效果 使用方法 项目源码地址 预览界面 总结 背景 最近公司内部oa系统升级,需要增加文件在线预览服务,最常见的文件就是office文档,一开始构思几个方案,比如office软件自带的文件转换,openoffice转换,offce365服务,aspose组件转换,最终采用了aspose转换,原因是组件功能完善,不依赖其它软件安装环境 系统设计 文件类型及方案 文件类型 预览方案 word aspsoe-word

  • Vue.js 2.0 移动端拍照压缩图片上传预览功能

    在学习和使用Vue.js 2.0 的过程中遇到不少不一样的地方,本来移动端开发H5应用,准备将mui框架和Vue.js+vue-router+vuex 全家桶结合起来使用,但是在拍照上传的实现过程中遇到了无法调用plus的H5+接口的问题,所以最后拍照上传功能还是使用input file方式里解决的.但是内心还是不甘心的,由于项目进度推进,迭代版本,所以不得不放弃,后续可能我将此功能使用调用H5+接口实现. 首先我来讲我实现这个拍照预览压缩上传的思路,准确的说应该是拍照或选择图片压缩之后预览及上

  • Vue.js 2.0 移动端拍照压缩图片预览及上传实例

    在学习和使用Vue.js 2.0 的过程中遇到不少不一样的地方,本来移动端开发H5应用,准备将mui框架和Vue.js+vue-router+vuex 全家桶结合起来使用,但是在拍照上传的实现过程中遇到了无法调用plus的H5+接口的问题,所以最后拍照上传功能还是使用input file方式里解决的.但是内心还是不甘心的,由于项目进度推进,迭代版本,所以不得不放弃,后续可能我将此功能使用调用H5+接口实现. 首先我来讲我实现这个拍照预览压缩上传的思路,准确的说应该是拍照或选择图片压缩之后预览及上

  • weui框架实现上传、预览和删除图片功能代码

    jQuery WeUI 是专为微信公众账号开发而设计的一个简洁而强大的UI库,包含全部WeUI官方的CSS组件,并且额外提供了大量的拓展组件,丰富的组件库可以极大减少前端开发时间. jQuery WeUI 的最大特点是它只提供UI组件,并不会对项目所使用的框架和其他库有任何的限制,几乎可以在任何环境下使用.无论你的项目是基于jQuery,还是 React, Angular, Vue, 你都会发现 jQuery WeUI 能非常方便的和他们结合使用.既是你的项目是一个有很悠久历史的老项目,也几乎可

随机推荐