一个小项目需要用到窗口提示, 并且能在提示窗口中进行一些简单操作, 在网上找了找jquery的tooltip和popup, wow! 一大堆, 看的有点头晕眼花, 索性自己写了一个简单的, 代码很简单, 有需要的可以适当的再扩展一下, 比如对提示窗口进行CSS设计一下.还是那句老话, 适合自己用的就是最好的.
本脚本需要jquery1.2.6+以上版本支持.
/*
* Popup/Tooltip script
* powered by jQuery (http://www.jquery.com)
*
* written by flywolf (http://www.suiyuan.org)
* 04/07/2009 16:22
*/
/*
* 弹出窗口/提示脚本
* @param css 要弹出窗口的HTML元素CSS样式名
* @param delay 弹出窗口是否可以点击
*/
this.popup = function(css, delay) {
// 首先创建提示窗口
$('body').append('<div id="PopWin">My Popup Window</div>');
$('#PopWin').css({
'position': 'absolute',
'display': 'none',
'width': '200px',
'height': '100px',
'border': '1px solid #333'
})
// 鼠标进入时提示窗口是否需要停留
if (delay) {
$('#PopWin').mouseover(function() {
$(this).show();
}).mouseout(function() {
$(this).hide();
})
}
// 对于所有css样式为popcss的a连接添加鼠标动作
// 显示/隐藏提示窗口
$('a.' + css).mouseover(function() {
$('#PopWin').css({
'left': $(this).offset().left + $(this).width(),
'top': $(this).offset().top
}).show();
}).mouseout(function() {
$('#PopWin').hide();
});
} 阅读全文…
admin Javascript jquery
今天来说说jquery的json插件, json(javascript object notation)是一种轻量级的数据交换格式, 易于阅读和编写, 同时也易于机器解析和生成. 关于更多json的知识可以查看这里. jquery的json插件查看这里
这里以前几天写的一个程序为例来说明一下.
首页现在HTML页面中引用2个JS文件
<script type="text/javascript" src="/js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="/js/jquery.json.js"></script>
假设我们现在有一个全局文字对象变量
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
| // 全局文字对象变量
gts = { "p":[],
"imgsrc":"",
"avatar":{"show":"0", "width":"73", "height":"85", "x":"0", "y":"0"},
"shantu":{"make":"0", "type":"1", "val":""}
};
// 默认文字对象
dt = function(_txtid, _cnname) {
this.txtid = _txtid;
this.cnname = _cnname;
this.fontface = "fzzhiyi.ttf";
this.fontsize = "14";
this.fontcolor = "#FF0099";
this.altercolor = "#ffffff";
this.x = "0";
this.y = "0";
this.wordlimit = "10";
this.textdirection = "0";
this.effect = "0";
this.jump = "0";
this.txt = "示范文字";
this.isstroke = "0";
this.strokecolor = "#ff0000";
this.borderx = "1";
this.bordery = "1";
this.angle = "0"
}
// 文字对象数组中添加一个默认文字对象
gts.p.push(new dt('txt1', '文字1')); |
阅读全文…
admin Javascript jquery, json
使用jquery实现ajax无刷新上传是个老话题了, 网上也有很多针对jquery发布的插件, 下载了几个试用了试用, 推荐一下这个
Ajax Upload,方便快捷. 把原文简单的翻译了一下, 希望能对这方面感兴趣的朋友有所帮助.
使用方法:
建立uploader
使用如下语句建立上传按钮.
<div id="upload_button">Upload</div>
建立Ajax Uploader实例
使用如下代码
// You must create it only after the DOM is ready for manipulations
// Use $(document).ready for jquery
// document.observe("dom:loaded" for prototype
new AjaxUpload('upload_button_id', {action: 'upload.php'});
// 注: 如果我们使用的jquery框架, 我们可以这样加载Uploader
$(function(){
new AjaxUpload('upload_button_id', {action: 'upload.php'});
}) 阅读全文…
admin Javascript jquery
Recent Comments