jQuery 一

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script type="text/javascript" src="js/jquery-3.2.1.min.js" > </script>

<script type="text/javascript"  src="jquery-easyui-1.5.1/jquery.easyui.min.js" > </script>

<link type="text/css" rel="stylesheet" href="jquery-easyui-1.5.1/themes/icon.css"></link>

<link type="text/css" rel="stylesheet" href="jquery-easyui-1.5.1/themes/default/easyui.css"></link>

<script type="text/javascript" src="jquery-easyui-1.5.1/locale/easyui-lang-zh_CN.js"></script>
<title>Insert title here</title>

<script type="text/javascript">
   $(function(){
      //$.messager.alert("提示","这是一个提示","info");
/*       $.messager.confirm("提示","你想退出该系统么",function(r){
           if(r){
               alert("退出 ");
           }
       }); */
/*       $.messager.show({
           title:‘我的消息‘,
           msg:‘消息将在5秒后关闭‘,
           timout:5000,
           showtype:‘slide‘
       }); */
/*       $.messager.prompt(‘提示‘,‘请输入你的姓名‘,function(r){
           if(r){
               alert(‘你的姓名是:‘+r);
           }
       }); */
/*       $("#dd").draggable({
           handle:‘#title‘
       }) */
/*       $(‘.dragitem‘).draggable({
           proxy:function(source){
               var p=$("<div style=‘border:1px solid #ccc;width:80px‘>拖动</div>");
               p.html($(source).html()).appendTo(‘body‘);
               return p;
           }
       }); */

       //放置
/*       $("#dd").droppable({
           accept:‘#d1,#d3‘
       }); */

/*       $("#rr").resizable({
           maxWidth:800,
           maxHeight:800
       });*/

       //分页
/*       $("#ff").pagination({
           total:2000,
           pagaSize:100
       }); */

       //搜索框
/*       $("#ss").searchbox({
          searcher:function(value,name){
            alert(value+","+name)
          },
          menu:"#mm",
          prompt:"请输入值:"
       }); */

       //进度条
/*       $("#p").progressbar({
           value:60
       });

       var value=$(‘#p‘).progressbar(‘getValue‘);
       if(value<100){
           value+= Math.floor(Math.random()*10);
           $(‘#p‘).progressbar("setValue",value);
       }
       $(‘#p‘).progressbar({
           onChange:function(value){
               alert(value)
           }
       });   

       $("#dd").tooltip({
           position:‘right‘,
           content:‘<span style="color:#fff">This is the tooltip message</span>‘,
           onShow:function(){
               $(this).tooltip(‘tip‘).css({
                   backgroundColor:‘#666‘,
                   borderColor:‘#666‘
               })
           }
       });  

       //按钮
       $(function(){
          $(‘#btn‘).bind(‘click‘,function(){
              alert(‘easyui‘);
          });
       });   

       //菜单
       $(‘#mm‘).menu(‘show‘, {
           left: 200,
           top: 100
         }); 

         //创建窗口
         $("#win2").window({
             width:600,
             height:400,
             modal:true
         });  

         //创建对话框窗口
       $(‘#dd‘).dialog({
            title: ‘My Dialog‘,
            width: 400,
            height: 200,
            closed: false,
            cache: false,
            href: ‘get_content.php‘,
            modal: true
        });
        $(‘#dd‘).dialog(‘refresh‘, ‘new_content.php‘);  

        //创建面板右上角工具
        $(‘#p‘).panel({
            width:500,
            height:150,
            title: ‘My Panel‘,
            tools: [{
              iconCls:‘icon-add‘,
              handler:function(){alert(‘new‘)}
            },{
              iconCls:‘icon-save‘,
              handler:function(){alert(‘save‘)}
            }]
          }); 

         $(‘#p‘).panel({
             href:‘content_url.php‘,
              onLoad:function(){
                  alert(‘loaded successfully‘);
             }
          }); */

   })
</script>

</head>
<body>
<!-- <a id="but" class="easyui-linkbutton" href="otherpage.php" data-options="iconCls:‘icons-ok‘">打开</a> -->
<!-- <a id="but" class="easyui-linkbutton" href="#" data-options="iconCls:‘icons-on‘">关闭</a> -->
<!--  <div id="dd" style="width:300px;height:600px" >
          <div id="title" style="background:#ccc;">title</div>
      </div>-->
<!-- <div id="dd" style="width:100px;height:100px;border:1px solid #ccc;"></div>

<div id="rr" style="width:100px;height:100px;border:1px solid #ccc;"></div> 

<div id="ff" style="background:#efefe;border:1px solid #ccc;"></div>

<input id="ss"></input>
<div id="mm" style="width:120px">
   <div data-options="name:‘all‘,iconCls:‘icon-ok‘">All News</div>
   <div data-options="name:‘sports‘">Sports News</div>
</div>  -->

<!-- 进度条 -->
<!-- <div id="p" style="width:400px;"></div>   -->

<!-- 提示框 -->
<!-- <a href="#" class="eaasyui-tooltip" title="This is the tooltip message">Hover me</a>
<a id="dd" href="javascript:void(0)">Click here</a>   --> 

<!-- 按钮 -->
<!-- <a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:‘icon-search‘">easyui</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:‘icon-search‘" onclick="javascript:alert(‘easyui‘)">easyui</a>
<a href="otherpage.php" class="easyui-linkbutton" data-options="iconCls:‘icon-search‘">easyui</a>  -->

<!-- 创建菜单 -->
<!--
<div id="mm" class="easyui-menu" style="width:120px;">
   <div>New</div>
   <div>
      <span>Open</span>
      <div style="width:150px">
          <div><b>Word</b></div>
          <div>Excel</div>
          <div>PowerPoint</div>
      </div>
   </div>
   <div data-options="iconCls:‘icon-save‘">Save</div>
   <div class="menu-sep"></div>
   <div>Exit</div>
</div>
-->
<!-- 菜单按钮 -->
<!--
<a href="javascript:void(0)" id="mb" class="easyui-menubutton"
        data-options="menu:‘#mm‘,iconCls:‘icon-edit‘">Edit</a>
<div id="mm" style="width:150px;">
    <div data-options="iconCls:‘icon-undo‘">Undo</div>
    <div data-options="iconCls:‘icon-redo‘">Redo</div>
    <div class="menu-sep"></div>
    <div>Cut</div>
    <div>Copy</div>
    <div>Paste</div>
    <div class="menu-sep"></div>
    <div data-options="iconCls:‘icon-remove‘">Delete</div>
    <div>Select All</div>
</div>
-->

<!-- 分割按钮 -->
<!--
<a href="javascript:void(0)" id="sb" class="easyui-splitbutton"
        data-options="menu:‘#mm‘,iconCls:‘icon-ok‘" onclick="javascript:alert(‘ok‘)">Ok</a>
<div id="mm" style="width:100px;">
    <div data-options="iconCls:‘icon-ok‘">Ok</div>
    <div data-options="iconCls:‘icon-cancel‘">Cancel</div>
</div>
-->

<!-- 开关按钮 -->
<!--
 <input class="easyui-switchbutton" checked>
 <input class="easyui-switchbutton" data-options="onText:‘Yes‘,offText:‘No‘">
-->

<!-- 创建窗口 -->
<!--
<div id="win" class="easyui-window" title="My Window" style="width:600px;height:400px"
 data-options="iconCls:‘icon-save‘,modal:true">Window Content</div>
<div id="win2"></div>  -->

<!-- 创建复合布局窗口 -->
<!--
<div id="win" class="easyui-window" title="My Window" style="width:600px;height:400px"
 data-options="iconCls:‘icon-save‘,modal:true">
    <div class="easyui-layout" data-options="fit:true">
       <div data-options="region:‘north‘,split:true" style="height:100px"></div>
       <div data-options="region:‘center‘"> The Content </div>
    </div>
</div>
-->

<!-- 对话框窗口 -->
<!--
<div id="dia" class="easyui-dialog" title="My Dialog" style="width:400px;height:200px"
 data-options="iconCls:‘icon-sava‘,resizable:true,modal:true">Dialog Content</div>

<div id="dd">Dialog Content.</div>   -->

<!-- 创建面板 -->
<!--
<div id="p" class="easyui-panel" title="My Panel"
        style="width:500px;height:150px;padding:10px;background:#fafafa;"
        data-options="iconCls:‘icon-save‘,closable:true,
                collapsible:true,minimizable:true,maximizable:true">
    <p>panel content.</p>
    <p>panel content.</p>
</div>
-->
<!-- 创建面板右上角工具-->
<!--
<div id="p" style="padding:10px;">
    <p>panel content.</p>
    <p>panel content.</p>
</div>
-->
<!-- 创建选项卡-->
<!--
<div id="tt" class="easyui-tabs" style="width:500px;height:250px;">
    <div title="Tab1" style="padding:20px;display:none;">
        tab1
    </div>
    <div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">
        tab2
    </div>
    <div title="Tab3" data-options="iconCls:‘icon-reload‘,closable:true" style="padding:20px;display:none;">
        tab3
    </div>
</div>
-->

<!-- 分类-->
<!--
<div id="aa" class="easyui-accordion" style="width:300px;height:200px;">
    <div title="Title1" data-options="iconCls:‘icon-save‘" style="overflow:auto;padding:10px;">
        <h3 style="color:#0099FF;">Accordion for jQuery</h3>
        <p>Accordion is a part of easyui framework for jQuery.
        It lets you define your accordion component on web page more easily.</p>
    </div>
    <div title="Title2" data-options="iconCls:‘icon-reload‘,selected:true" style="padding:10px;">
        content2
    </div>
    <div title="Title3">
        content3
    </div>
</div>
-->

<!-- 完整页面创建布局-->
<!--
<body class="easyui-layout">
    <div data-options="region:‘north‘,title:‘North Title‘,split:true" style="height:100px;"></div>
    <div data-options="region:‘south‘,title:‘South Title‘,split:true" style="height:100px;"></div>
    <div data-options="region:‘east‘,iconCls:‘icon-reload‘,title:‘East‘,split:true" style="width:100px;"></div>
    <div data-options="region:‘west‘,title:‘West‘,split:true" style="width:100px;"></div>
    <div data-options="region:‘center‘,title:‘center title‘" style="padding:5px;background:#eee;"></div>
</body>
 -->

 <!--  创建嵌套布局-->
 <body class="easyui-layout">
    <div data-options="region:‘north‘" style="height:100px"></div>
    <div data-options="region:‘center‘">
        <div class="easyui-layout" data-options="fit:true">
            <div data-options="region:‘west‘,collapsed:true" style="width:180px"></div>
            <div data-options="region:‘center‘"></div>
        </div>
    </div>
</body>
</body>
</html>
时间: 2024-10-24 01:13:46

jQuery 一的相关文章

基于jquery开发的UI框架整理分析

根据调查得知,现在市场中的UI框架差不多40个左右,不知大家都习惯性的用哪个框架,现在市场中有几款UI框架稍微的成熟一些,也是大家比较喜欢的一种UI框架,那应该是jQuery,有部分UI框架都是根据jQuery研发出来的产品,现在也很常见了. 国产jQuery UI框架 (jUI) DWZ DWZ富客户端框架(jQuery RIA framework), 是中国人自己开发的基于jQuery实现的Ajax RIA开源框架.设计目标是简单实用,快速开发,降低ajax开发成本. jQuery 部件布局

微信生成二维码 只需一个网址即刻 还有jquery生成二维码

<div class="orderDetails-info"> <img src="http://qr.topscan.com/api.php?text=http://123.net/index.php?s=/Home/Index/yanzheng/mai/{$dange.id}" style="width: 5rem; margin-bottom: 1rem;" > </div> http://qr.tops

Jquery基础总结

jquery获取元素索引值index()方法: jquery的index()方法 搜索匹配的元素,并返回相应元素的索引值,从0开始计数. 如果不给 .index() 方法传递参数,那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的位置. 如果参数是一组DOM元素或者jQuery对象,那么返回值就是传递的元素相对于原先集合的位置. 如果参数是一个选择器,那么返回值就是原先元素相对于选择器匹配元素中的位置.如果找不到匹配的元素,则返回-1. <ul> <li id=&quo

初识jQuery

jQuery简介 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是"write Less,Do More",即倡导写更少的代码,做更多的事情.它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作.事件处理.动画设计和Ajax交互. jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口:

zepto与jquery冲突的解决

问题出现的背景: 在light7框架下搭建的触屏版项目中,要拓展一个投票系统,其中投票系统有一个比较完善的上传组件,但是此组件是依赖zepto的,而原来的项目是依赖jQuery的,所以就会遇到冲突的问题: 解决方法1: jquery有一个方法叫noConflict() ,可以把jquery的$改掉. var jq=$.noConflict(); 这个时候用jq来代替jquery的$吧. 解决方法2: zepto的符号改掉 window.zp=window.Zepto = Zepto 在zepto

jQuery父级以及同级元素查找的实例

父级以及同级元素的查找在使用过程中还是蛮频繁的,下面为大家介绍下jQuery是如何实现的,感兴趣的朋友可以参考下 jQuery.parent(expr) 找父亲节点,可以传入expr进行过滤,比如$("span").parent()或者$("span").parent(".class") jQuery.parents(expr),类似于jQuery.parents(expr),但是是查找所有祖先元素,不限于父元素 jQuery.children(

jQuery EasyUI---DataGrid

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>DataGrid</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="../jquery-1.4.2.min.js" ty

jQuery学习(五)——使用JQ完成复选框的全选和全不选

1.在系统后台进行人员管理时,进行批量删除,使用jq完成全选和全不选 步骤分析: 第一步:引入jquery文件 第二步:书写页面加载函数 第三步:为上面的复选框绑定单击事件 第四步:将下面所有的复选框的选中状态设置成跟上面的一致! 2.具体代码实现: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>使用jQuery完成复选框的全选和全不

jQuery $.ajax传递数组的traditional参数传递必须true

出自:http://blog.csdn.net/ojackhao/article/details/24580437 起初我认为traditional:true,可有可无,但是后来不用traditional的时候,发现后台无法获取selectUsers的值,那么可以肯定的是traditional默认值是false.当提交的参数是数组( {selectUsers:[value,value,value]} ),如果是false的话,则提交时会是"selectUsers[]=value&sele

页面滚动图片等元素动态加载插件jquery.scrollLoading.js

如果一个网页很长,那么该页面的加载时间也会相应的较长.而这里给大家介绍的这个jQuery插件scrollLoading的作用则是,对页面元素进行动态加载,通俗的说就是滚到哪就加载到哪,屏幕以下看不见的就不用加载了.这样还可以在一定程度上节省服务器资源.该插件作者的网页将该插件的功能和使用方法描述的非常详细,这里把最一般最普遍的使用情况给大家展现一下. 插件作者:http://www.zhangxinxu.com/ 首先我们需要加载jQuery库和本插件js文件. (jquery.scrollLo