JS 常规应用

  http://www.holygrace.cn/  

Download Other JS File

jQuery.js：jQuery框架文件。Version 1.2.1  源码  压缩版

HG.Core.js：HG Plugins核心文件。Version 1.0  源码  压缩版

jquery.dimensions.js：页面元素定位文件。Version 1.1.2  源码  压缩版

jqjquery.easing.js：弹性动画文件。Version 1.1.1  源码  压缩版

 

 

HG Plugins基于著名的jquery框架开发，包括对话框，层的拖拽，右键菜单等常用功能。跨多种浏览器，用户只需简单配置即可实现多种酷炫效果！

• • 1

  • 层的拖拽

  • HG.Drag
  实现层的拖拽效果，可以设定拖拽助手和拖拽范围
  需要JS库：【jquery-1.2.js】、【HG.Core.js】、【HG.Drag.js】
  参数解释：
  

  $(function(){
      $("#dragObj").Drag({
          handle : ".dragHandle",
          //拖动助手(jquery 选择器，一个拖动对象可以有多个拖动助手)
          range  : "dragRange"
          //拖动范围(对象id，一个拖动对象只能遵循一个拖动范围),需要
          //注意，在IE下拖动对象和拖动范围都必须有具体高度和宽度值
      })
  })

  $(function(){ $("#dragObj").Drag({ handle : ".dragHandle", //拖动助手(jquery 选择器，一个拖动对象可以有多个拖动助手) range : "dragRange" //拖动范围(对象id，一个拖动对象只能遵循一个拖动范围),需要 //注意，在IE下拖动对象和拖动范围都必须有具体高度和宽度值 }) })

  DEMO：  无限制    有拖拽助手    有拖拽范围    关闭DEMO   其他DEMO

  DownLoad： 源码(3.13k)   压缩版(1.34k)
• • 2

  • 对话框

  • HG.Dialog
  弹出层,支持遮罩，iFrame，拖动，动画……
  需要JS库：
  必须引用:【jquery-1.2.js】【jquery.dimensions.js】【HG.Core.js】【HG.Dialog.js】
  选择引用:【jquery.easing.1.1.1.js】【HG.Drag.js】
  参数解释：
  

  $(function(){
      $("#dialog").Dialog({
          maskColor : "red", //遮罩层的颜色,默认为#000000
          maskOpacity: 30,   //遮罩层透明度,默认为5
          left :"",          //对话框弹出时距离窗体左侧的位置
          top  :"",          //对话框弹出时距离窗体顶部的位置
                             //@left @top不填是默认显示在正中央
          animate:"backin",  //对话框弹出时的过度动画，默认为无效果
          //引用:jquery.easing.1.1.1.js可以使用所有easing效果，
          //推荐"bounceout","elasout","backin"
          draggable:true,    //是否可以拖拽
          dragHandle:"#Hand",//拖拽助手,当draggable为true是有效
          dragRange:"Range", //拖拽范围,当draggable为true是有效
                             //关于拖拽祥见HG.Drag
          close:"#close"     //触发关闭事件的对象，jquery选择器
      })
  
      $("#dialog").CloseDialog()
      //关闭弹出框事件
  
      $("#Range").DialogRange()
      //快速设置弹出框范围为整个屏幕,该方法要在Dialog()之前调用
  })

  $(function(){ $("#dialog").Dialog({ maskColor : "red", //遮罩层的颜色,默认为#000000 maskOpacity: 30, //遮罩层透明度,默认为5 left :"", //对话框弹出时距离窗体左侧的位置 top :"", //对话框弹出时距离窗体顶部的位置 //@left @top不填是默认显示在正中央 animate:"backin", //对话框弹出时的过度动画，默认为无效果 //引用:jquery.easing.1.1.1.js可以使用所有easing效果， //推荐"bounceout","elasout","backin" draggable:true, //是否可以拖拽 dragHandle:"#Hand",//拖拽助手,当draggable为true是有效 dragRange:"Range", //拖拽范围,当draggable为true是有效 //关于拖拽祥见HG.Drag close:"#close" //触发关闭事件的对象，jquery选择器 }) $("#dialog").CloseDialog() //关闭弹出框事件 $("#Range").DialogRange() //快速设置弹出框范围为整个屏幕,该方法要在Dialog()之前调用 })

  DEMO：  普通    弹出特效    可拖拽   其他DEMO

  DownLoad： 源码(3.83k)   压缩版(1.42k)
• • 3

  • 右键菜单

  • HG.ContextMenu
  一个简单的右键菜单，菜单是提前写好的对象，该控件仅仅控制菜单的右键显示。
  需要JS库：【jquery-1.2.js】、【HG.Core.js】、【HG.ContextMenu.js】
  参数解释：
  

  $(function(){
      $("#body").ContextMenu({ //可以触发右键菜单的对象,jquery选择器
          menu : "cm",
          //作为右键菜单的DOM对象id
          speed  : 200
          //菜单显示速度
      })
  })

  $(function(){ $("#body").ContextMenu({ //可以触发右键菜单的对象,jquery选择器 menu : "cm", //作为右键菜单的DOM对象id speed : 200 //菜单显示速度 }) })

  DEMO：  右键点击   其他DEMO

  DownLoad： 源码(1.39k)   压缩版(698b)
• • 4

  • 星级评分

  • HG.Star