分类： 技术

JQuery+JQuery ui实现的弹出窗口+遮罩层+拖动+更改大小～！ 

 

DOM是一种API（应用编程接口）。简单地说，API就是一组已经得到有关各方共同认可的基本约定。在现实世界中，相当于API的例

子包括：摩尔斯码 国际时区 化学元素周期表

DOM定义：一个与系统平台和编程语言无关的接口，程序和脚本可以通过这个接口动态地对文档的内帖、结构和样式进行访问和修改

。

解释性程序设计语言不需要编译器。
函数：函数的作用是定义一次但却可以调用多次或执行任意多次的代码。
需要重复执行的东西我们就可以把它写成函数。

1<div class="txt">
      <label for="name">表名:</label>
      <input class="easyui-validatebox" type="text" disabled="true" name="table" >
      </input>
    </div> 禁止修改
2、
<script type="text/javascript">
var task_id = request("task_id");
if(task_id){
    $('#ff').form('load','http://admin.php/Topwords/taskinfo?task_id='+task_id);
}
</script>
修改页面 加载原有数据

修改页面，里面的状态
<div class="txt">
      <label for="language">状态:</label>
      <select class="easyui-combobox" name="status" style="width: 140px;"  editable="false" required="true">
        <option value="1">开启</option>
        <option value="0">关闭</option>
      </select>
    </div>

3、状态修改，把数据里面的1 0 变成 关闭和开启

================================================
formatter:function (value) {
if(value == 1){
return '开启';
} else {return '关闭';
}
}

单元格的格式化函数，需要三个参数： 
value： 字段的值。
rowData： 行的记录数据。
rowIndex： 行的索引。
=====================================================
var status = ['关闭','开启'];
var types = ['定时', '实时'];

columns: [[
                    { field: 'task_id', title: '任务id', width: 80 },
                    { field: 'detail', title: '描述', width: 350 },
                    { field: 'type', title: '类型', width: 150 ,
                        formatter:function (value) {
                            return types[value];
                        }
                    },
                    { field: 'status', title: '状态', width: 60,align:'center',
                        formatter:function (value) {
                            return status[value];
                        }
                    },
                    { field: 'lastrun', title: '上次执行时间', width: 250 },
                    { field: 'nextrun', title: '下次执行时间', width: 250 },
                    { field: 'url', title: '抓取页面的url', width: 150 }

                ]],
=======================================
/搜索/
function qq(value,name){
            alert(value+":"+name)
        };

<input id="ss" class="easyui-searchbox"
            searcher="qq"
            prompt="请输入查询类型" menu="#mm" style="width:300px"></input>
            
    <div id="mm" style="width:120px">
        <div name="all" iconCls="icon-ok">全部数据</div>
        <div name="keywords">关键词</div>
        <div name="tag_name">标签</div>
        <div name="topwords">热词</div>
    </div>
    
================================================
确认领取
function receive(){
    var rows = grid.datagrid('getSelections');
    var num = rows.length;
    if (num == 0) {
        Msgslide('请选择一条记录进行操作!'); //$.messager.alert('提示', '请选择一条记录进行操作!', 'info');
        return;
    }
    else if (num &
gt; 1) {
        Msgfade('您选择了多条记录,只能选择一条记录进行修改!'); //$.messager.alert('提示', '您选择了多条记录,只能选

择一条记录进行修改!', 'info');
        return;
    }
    else {
        receiveWin.dialog('open');
        $("#userId").val(rows[0].empid);
        $("#oids").val(rows[0].oid);
        receiveForm.url = '/controler/Order.ashx';
    }
}
 =======================================
分页
pageNumber:1
 number
 当设置了 pagination 特性时，初始化页码。第一页
 1
 
pageSize:30
 number
 当设置了 pagination 特性时，初始化页码尺寸。每页30条
pageSize:20,

 10
                pageSize:20,
                pageNumber:1,
                fit:true,
                fitColumns: true,
                pagination: true,
                    rownumbers: true,
 ===============================
遗留问题：综合条件组合条件的查询

http://www.jz123.cn/text/0718524.html

多个参数传值
================================================
var params = "param1=value1&param2=values";
或者是var params ={param1:value1,param2:value2};

====================================================
会话超时 登录验证 禁止访问内页
$(function(){
    $.ajax({
        type: "get",
        dataType: "json",
        url: "http://Public/checkLogin",
        data: "action=profile",
        complete :function(){
        },
        success: function(dat){
            result = $.parseJSON(dat);
            if(result.error == '1000'){
                $.cookie('uid', '');
                $.cookie('username', '');
                alert("请先登录！");
                location = '/login.html';
            }else{
                if(result.error == "1000"){
                    $.cookie('uid', '');
                    $.cookie('username', '');
                    alert("会话超时，请先登录！");
                    location = '/login.html';
                }else{
                    $.cookie('uid',result.uid);
                    $.cookie('username',result.username);
                }    
            }
        }
    });
});

————————-
function loaddata1(){//登陆
    $('#login').form('submit',{
        ,
        onSubmit:function(){
            return $(this).form('validate');
        },
        success:function(dat){
            result = $.parseJSON(dat);
            if(result.error == "1"){
                alert("欢迎"+result.username+"回来，登陆成功！");
                location = 'User/index.html';
            }else if(result.error == "1000"){
                alert("没有登录!");
            }else if(result.error == "1001"){
                alert("用户名不能为空!");
            }else if(result.error == "1002"){
                alert("密码不能为空!");
            }else if(result.error == "1003"){
                alert("验证码不能为空!");
            }else if(result.error == "1004"){
                alert("验证码错误!");
            }else if(result.error&n
bsp;== "1005"){
                alert("用户名或密码错误!");
            }
        }
    });
}
=========================================================
var task_id = request("task_id");
function addProduct(){
    $('#ff').form('submit', {
        ,
        onSubmit: function(){
            if(task_id){
                $("#key").val("update");
                $("#task_id").val(task_id);
            }else{
                $("#key").val("add");
            }
            return $(this).form('validate');
        },
        success:function(data){
            eval('data=' + data);
            if (data.error=="1") {
                $.messager.confirm('提示信息', '完成');
            }else{
                $.messager.alert('错误', '修改失败', 'error');
            }
        }
    });
}
===================================
传输值
alert(rows[0].key_words);
        addTab("编辑窗口 – "+rows[0].key_words, "SearchDataTop1.html?task_id="+task_id+'&key_words='+rows

[0].key_words);

取得值
var task_id = request("task_id");
var topwords= request("topwords");

=============================================
function getLocalTime(nS) {
    return new Date(parseInt(nS) * 1000).toLocaleString().replace(/年|月/g, "-").replace(/日/g, " "); 
}

时间格式转换
{field:'add_time',title:'时间',width:120,
                        formatter:function (value) {
                            return getLocalTime(value);
                        }
                    }
                    
==========================================
var receiveWin;
var receiveForm;

function getSelectedArr() {
    var ids = [];
    var rows = grid.datagrid('getSelections');
    for (var i = 0; i < rows.length; i++) {
        ids.push(rows[i].task_id);
    }
    return ids;
}
function getSelectedID() {
    var ids = getSelectedArr();
    return ids.join(',');
}
function arr2str(arr) {
    return arr.join(',');
}
function OrderView() {
    var rows = grid.datagrid('getSelections');
    var num = rows.length;
    if (num == 0) {
        Msgslide('请选择一条记录进行操作!');
                return;
    }
    else if (num > 1) {
        Msgfade('您选择了多条记录,只能选择一条记录进行修改!');
        return;
    }
=====================================================
<input class="easyui-combobox" 
   id="cc" 
   name="mallId" 
   url="${ctx}/record/mallin!getMall.action" 
   valueField="id" 
   textField="name" 
   multiple="true"  
   panelHeight="auto" 
   /></td> 

name：用来和后台绑定， 

url：异步json从后台的方法中获得json数据， 

valueField：选取文字后对应的值 

textField：显示的文字 

multiple="true"：允许在下拉列表里多选 

提交到后台会变成一个名字为mallId的Long型数组， 

多选提交值
$('#多选selectid').combotree('getText')

$('#tag_id').combobox('getValues');
==============================================

jquery easyUI combobox赋值

Js代码  1. <input class="easyui-combobox"   
2.   id="cc"  
3.   name="mallId"  
4.   url="${ctx}/record/mallin!getMall.action"   
5.   valueField="id"   
6.   textField="name"   
7.   multiple="true"    
8.   panelHeight="auto"  
9.   /></td>  
 <input class="easyui-combobox" 
   id="cc"
   name="mallId"
   url="${ctx}/record/mallin!getMall.action" 
   valueField="id" 
   textField="name" 
   multiple="true"  
   panelHeight="auto
"
   /></td>
 

name：用来和后台绑定，

url：异步json从后台的方法中获得json数据，

valueField：选取文字后对应的值

textField：显示的文字

multiple="true"：允许在下拉列表里多选

 

多选提交到后台会变成一个名字为mallId的Long型数组，

后台返回到前台时，给combobox赋值，代码如下：

导入c标签：<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

 

Js代码  1.var i = 0;  
2.var t = [];  
3.<c:forEach items="${mallId}" var="u">  
4.  t[i] = ${u};  
5.  i++;   
6. </c:forEach>  
7.$(&apos;#cc&apos;).combobox(&apos;setValues&apos;,t);  
              var i = 0;
    var t = [];
    <c:forEach items="${mallId}" var="u">
      t[i] = ${u};
      i++; 
     </c:forEach>
    $(&apos;#cc&apos;).combobox(&apos;setValues&apos;,t); 这是给combobox赋很多值，

 赋单个值是用：$(&apos;#cc&apos;).combobox(&apos;setValue&apos;,‘1’);

==================================================================
调试总结
出现在所有js反应里面。
出现的是返回的页面，不是data页面get

主要是因为tag_id 写错成了task_id的原因
var tag_id = request("tag_id")

删除
function del() {
    var arr = getSelectedArr();
    if (arr.length > 0) {
        $.messager.confirm('提示信息', '您确认要删除吗?', function (data) {
            if (data) {
                $.ajax({
                    url: 'http://weibo.ayohome.com/admin.php/Data/tagDelete?tag_id='+arr2str(arr),
                    type: 'GET',
                    timeout: 1000,
                    error: function () {
                        $.messager.alert('错误', '删除失败!', 'error');
                    },
                    success: function (data) {
                        eval('data=' + data);
                        if (data.error == "1") {
                            grid.datagrid('reload');
                            grid.datagrid('clearSelections');
                        } else {
                            $.messager.alert('错误', '删除失败!', 'error');
                        }
                    }
                });
            }
        });
    } else {
        Msgshow('请先选择要删除的记录。');
    }
}

function getSelectedArr() {
    var ids = [];
    var rows = grid.datagrid('getSelections');
    for (var i = 0; i < rows.length; i++) {
        ids.push(rows[i].tag_id);
    }
    return ids;
}

function arr2str(arr) {
    return arr.join(',');
}
============================

双击弹出窗口

双击跳出tab窗口
onDblClickRow:function(rowIndex, rowData){
     var task_id = request("task_id");
     addTab("查看窗口 – "+rowData.weibo_username,"SearchDataInfo.html?

task_id="+task_id+"&keywords_id="+rowData.keywords_id,"icon-nav");},

=====================================

/**  

  * 指定位置显示$.messager.show  

  * options $.messager.show的options  

  * param = {left,top,right,bottom}  

  */ 

 $.extend($.messager, {  

     showBySite : function(options,param) {  

         var site = $.extend( {  

             left : "",  

             top : "",  

             right : 0,  

             bottom : -document.body.scrollTop  

                     – document.documentEl
ement.scrollTop  

         }, param || {});  

         var win = $("body > div .messager-body");  

         if(win.length<=0)  

             $.messager.show(options);  

         win = $("body > div .messager-body");  

         win.window("window").css( {  

             left : site.left,  

             top : site.top,  

             right : site.right,  

             zIndex : $.fn.window.defaults.zIndex++,  

             bottom : site.bottom  

         });  

     }  

 }); 
 

使用示例：

view sourceprint?
 <a href="#" class="easyui-linkbutton" onclick="showBySite(event)">help</a> 
view sourceprint?01 function showBySite(event){  

     var element = document.elementFromPoint(event.x,event.y);//获取点击对象  

     $.messager.showBySite({  

         title:'My Title',  

         msg:'Message.',  

        showType:'show' 

     },{  

         top : $(element).position().top+$(element).height(),//将$.messager.show的top设置为点击对象之下  

         left : $(element).position().left,//将$.messager.show的left设置为与点击对象对齐  

         bottom : "" 

     });  

 }

在easyui中的1496行
.window-shadow{
 position:absolute;
 background:#ddd;
 border-radius:5px;
 -moz-border-radius:5px;
 -webkit-border-radius: 5px;
 -moz-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2);
 -webkit-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2);
 filter: progid:DXImageTransform.Microsoft.Blur(pixelRadius=2,MakeShadow=false,ShadowOpacity=0.2);
}
修改样式

 

 =======================

已存在标签选择

<label for="language">类型:</label>
            <input class="easyui-combobox"style="width:220px"  
            name="task_id" 
            id="task_id" 
            url="/admin.php/Topwords/taskList?group=key&way=select" 
            valueField="task_id" 
            textField="detail" 
            mode="remote" 
            panelHeight="auto"/>

 

http://yulimeander.blog.sohu.com/104279384.html

 

 

window对象有两个主要的定时方法，分别是settimeout 和 setinteval　 他们的语法基本上相同，但是完成的功能取有区别。 

　　settimeout方法是定时程序，也就是在什么时间以后干什么。干完了就拉倒。 

　　setinterval方法则是表示间隔一定时间反复执行某操作。 

　　如果用settimeout实现setinerval的功能，就需要在执行的程序中再定时调用自己才行。如果要清除计数器需要 根据使用的方法不同，调用不同的清除方法： 

 

http://www.nowamagic.net/librarys/veda/detail/399

var day1 = parseInt(new Date().valueOf()/1000);
var day2 = new Date(day1 * 1000);

 

function getLocalTime(nS) {  
    return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:d{1,2}$/,' ');  
}

 

function getLocalFormatTime(nS) {  
 return new Date(parseInt(nS) * 1000).toLocaleString().replace(/年|月/g, "-").replace(/日/g, " ");   
}

 

document.getElementById("btn5").onclick = function(){
 alert(day2.getFullYear()+"-"+(day2.getMonth()+1)+"-"+day2.getDate()+" "+day2.getHours()+":"+day2.getMinutes()+":"+day2.getSeconds());
}

 

 

<script type="text/javascript">
var day1 = parseInt(new Date().valueOf()/1000);
var day2 = new Date(day1 * 1000);

function getLocalTime(nS) {  
    return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:d{1,2}$/,' ');  
} 

/* 同上面函数 */
function getLocalTimes(nS) {  
    return new Date(parseInt(nS) * 1000).toLocaleString().substr(0,17);
}  

function getLocalFormatTime(nS) {  
 return new Date(parseInt(nS) * 1000).toLocaleString().replace(/年|月/g, "-").replace(/日/g, " ");   
}
    
document.getElementById("btn1").onclick = function(){
 alert(day1);
}

document.getElementById("btn2").onclick = function(){
 alert(day2.toLocaleString());
}

document.getElementById("btn3").onclick = function(){
 alert( getLocalTime(day1) );
}

document.getElementById("btn4").onclick = function(){
 alert( getLocalFormatTime(day1) );
}

document.getElementById("btn5").onclick = function(){
 alert(day2.getFullYear()+"-"+(day2.getMonth()+1)+"-"+day2.getDate()+" "+day2.getHours()+":"+day2.getMinutes()+":"+day2.getSeconds());
}
</script>

 

 

可是怎么能居中显示呢，现在的都是右下角出现显示框

===========================================

 

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>小三角</title>
<style type="text/css">
.tip{
    border:1px solid #ccc;
    background:#ccc;
    height:50px;
    width:300px;
    color:#fff;
    overflow:hidden;
    zoom:1;
    position:relative;
    }
.box{
    height:0;
    width:0;
    border:1px solid #ccc;
    border-width:10px 10px  0 10px; border-color:#ccc #fff;
    position:relative;
    left:40px;
    }
em{
    display:block;
    position:absolute;
    top:20px;
    left:500px;
    width:24px;
    height:17px;
    line-height:17px;
    background:#000;
    color:#fff;
    font-style:normal;
    text-align:center;
    z-index:2;
    -moz-border-radius:2px;/*低版本Firefox浏览器 圆角*/
    -webkit-border-radius:2px;/*低版本Chorme和Safari浏览器 圆角*/
    border-radius:2px;/*其他浏览器 圆角*/
    behavior:url(tool_iecss3.htc);/*IE浏览器 圆角*/
    }
em{    background: none repeat scroll 0 0 #000000;
    border-radius: 2px 2px 2px 2px;
    color: #FFFFFF;
    display: block;
    font-style: normal;
    height: 47px;
    line-height:22px;
    line-height: 17px;
    position: absolute;
    right: 20px;
    text-align:center;
    top:20px;
    width:60px;
    font-size:12px;
    z-index: 2;}
em i {
    border-right: 8px solid transparent;
    border-top: 6px solid #000000;
    height: 0;
    left: 6px;
    position: absolute;
    top: 47px;
    width: 0;

</style>
</head>

<body>
<div class="tip">你好~我是提示框</div>
<div class="box"></div>

<em>
我是提示框你好~我是提示框
<i></i>
</em>
</body>
</html>

=======================================

第一个不兼容ie6 ie7 第二个ok

感谢东鳞西爪、Sevencity、Homelink、LeXRus。

需求：要求所有文本中，汉字使用微软雅黑，数字和英语使用Arial。（文本中有好多的编号数字和部分英语）

 

解决方式有两个。css方法和js方法

一、css方法：

先定义一个英文字体再定义中文字体，这是因为英文字体中一般不含有中文，执行的时候英文和阿拉伯数字选用“Arial”,中文的字体使用第二个字体“微软雅黑”。比如，可以这样来定义WordPress中的中英文字体：

*需要注意的是，这样的做法对符合网页规范的浏览器比如Firefox虽然有效，但对IE6、IE7会导致中文字体设定无效，也就是说，这样的办法对于微软的IE系列来说等于不设置中文字体，而只是采用系统默认的“宋体”来显示网页内容。

也可以指定两个class分别分配给中文和英文内容，这样就可以对IE也实现如上的字体效果，并可以为中英文的显示进行更详细的定制（比如字号等属性），但缺点是这样的做法比较繁杂，使用上不太方便，特别是对博客这样的中英文混编的文章内容来说更是麻烦。

二、使用js实现

当然也能用JavaScript+Css来实现这个效果，实现方式可以参考经典论坛上的相关帖子:

<style>

.cn{font-size:12px;font-family:宋体;}

body{font-size:9px;font-family:verdana;}

</style>

<script >

function xsize(xstr){
return xstr.replace(/([u0391-uFFE5]+)/ig,"<font class="cn">$1</font>");}

</script>

<body onload="bb.innerHTML=xsize(bb.innerHTML)" id="bb">

–Qui est ce? –C'est LeXRus. –Est ce que c'est LeXRus? –Que, c'est LeXRus..<br/>
–这是谁? –这是来克斯露斯~ –这是来克斯露斯? –是的, 这是来克斯露斯~

</body>

如下效果

*需要注意的是，若文本中有图片，图片不能写width、height、alt，不然也会在js下把其中的数字汉字执行转换，变成乱码。只要图片的长宽合适，不用定义，在各浏览器中也没问题。

先上图

CSS z-index 属性

参考资料：

                http://joeist.com/2012/06/what-is-the-highest-possible-z-index-value/

                http://hi.baidu.com/runner/item/a10faee0511d39266cabb8ea

                http://blog.sina.com.cn/s/blog_53d3c24a0100mpny.html

.bg{ width:100%; height:500px;

 background-image:url(image/parallax_octocat.png), url(image/ProfileIconDouban.png), url(image/caomei_02.jpg); 

background-position:center center,  50px center,top;
background-repeat:no-repeat, no-repeat, repeat-x; background-clip:padding;}