Ext 与 Jquery 的结合应用

最新推荐文章于 2024-05-27 16:09:40 发布

weixin_30298497

最新推荐文章于 2024-05-27 16:09:40 发布

阅读量250

点赞数

文章标签： xhtml ui javascript ViewUI

原文链接：http://www.cnblogs.com/China-Dragon/archive/2010/05/03/1726305.html

版权

废话：

我一直主张各司其职，页面的UI就应该由专门的人去做（flash，css等）而不应该交给js来完成，不过最近在周围朋友的影响下对ext也充满了好奇，毕竟ext的UI表现还是很优美的（本人是个大老粗对审美就这点品味了），于是开始决定学习ext并将其记录下来，希望对他人有用。

说明：

本人是jquery的的fans，好在ext与jquery并不冲突，在写演示代码时我将主要使用jquery+ext

正题：

今天刚开始学习ext于是从最简单的对话框开始。

首先搭建好ext环境（HTML中引入对应的js文件）

Js代码

<style>
@import "../resources/css/ext-all.css";
</style>
<script src="../adapter/jquery/jquery.js"></script>
<script src="../adapter/jquery/ext-jquery-adapter.js"></script>
<script src="../ext-all.js"></script>

    <style>
        @import  "../resources/css/-all.css";       
    </style>
    <script src="..///.js"></script>
    <script src="..///--.js"></script>
    <script src="../-all.js"></script>

其中css为ext的样式，如果没有这个文件那ext的界面会奇丑无比。

由于我喜欢用jquery于是我导入了jquery.js与ext-jquery-adapter.js文件

这里可以根据个人喜欢进行修改在ext的adapter文件夹下有prototype，yui，ext，jquery四种可以选择。

ext-all.js是ext主要功能的合集

搭建好环境后就可以开始写代码啦。

在ext中所有对话框都有Ext.MessageBox进行管理，可以缩写成Ext.Msg。

一个简单的alert我们可以调用Msg中的alert方法

Js代码

<body>
<button id="generalBtn">普通对话框</button><br/>
$("#generalBtn").click(function(){
Ext.Msg.alert("title", "hello word",function(btn){alert(btn)});
});
</body>

<body>
<button id="generalBtn">普通对话框</button><br/>
 $("#generalBtn").click(function(){
                .Msg.alert("title", "hello word",function(btn){alert(btn)});
 });
</body>

alert共有4个参数前2个是必填的，第三个是回调函数当对话框关闭时将调用该函数，第四个参数是回调函数的作用域（这个参数具体什么用我目前不清楚，有清楚的朋友还望指点一二）。

Msg还包括了一些常用的对话框比如confirm,prompt基本用法与alert相同

Java代码

<button id="confirmBtn">确认对话框</button><br/>
<button id="promptBtn">输入对话框</button><br/>
$("#confirmBtn").click(function(){
Ext.MessageBox.confirm("title", "hello word",function(btn){
alert(btn);
});
});
$("#promptBtn").click(function(){
Ext.MessageBox.prompt("title", "输入内容", function(btn,text){alert("用户按下的按钮是:"+btn+"用户输入的内容是"+text)},null, true, 'value');
});

 <button id="confirmBtn">确认对话框</button><br/>
 <button id="promptBtn">输入对话框</button><br/>
$("#confirmBtn").click(function(){
                .MessageBox.confirm("title", "hello word",function(btn){
                    alert(btn);
                });     
});
$("#promptBtn").click(function(){
                .MessageBox.prompt("title", "输入内容", function(btn,text){alert("用户按下的按钮是:"+btn+"用户输入的内容是"+text)},null, true, 'value');           
});

Msg还包括progress与wait对话框，用法也比较简单

Js代码

<button id="progressBtn">progressBtn</button><br/>
<button id="waitBtn">wait</button><br/>
function time (i, messageBox){
messageBox.updateProgress(i,"progressText", "进程");
if(i>=1){
messageBox.hide();
return;
}else{
setTimeout(time, 500, i+0.1,messageBox);
}
}
$("#progressBtn").click(function(){
var pro = Ext.MessageBox.progress("title", "进程", "progressText");
time(0.1,pro);
});
$("#waitBtn").click(function(){
Ext.MessageBox.wait("等待中...", "title");
});

<button id="progressBtn">progressBtn</button><br/>
<button id="waitBtn">wait</button><br/>
function time (i, messageBox){
            messageBox.updateProgress(i,"progressText", "进程");
            if(i>=1){
                messageBox.hide();
                return;
            }else{
              setTimeout(time, 500, i+0.1,messageBox);  
            }
        }
$("#progressBtn").click(function(){
                 var pro = .MessageBox.progress("title", "进程", "progressText");
                 time(0.1,pro);
            });
            $("#waitBtn").click(function(){
                .MessageBox.wait("等待中...", "title");
            });

Msg中其实最核心的show方法，他可以根据配置对象定义一个自定义的对话框，其实刚才所见的所有对话框都是ext帮我们事先定义好的而已，其内部都是调用show方法

show方法很简单只有一个参数就是配置对象，但这个对象的属性很多，具体内容可以参考API

调用方法如下

Js代码

<BUTTON ID="showBtn">自定义对话框</BUTTON>
<button id="testRBtn" style="float:right">右边的按钮</button>
$("#showBtn").click(function(){
Ext.MessageBox.show({
animEl:"testRBtn",
buttons:Ext.MessageBox.YESNOCANCEL,
title:"自定义对话框",
// fn:callback,
icon:Ext.MessageBox.WARNING,
msg:"o(∩_∩)o...哈哈"
});
});

<BUTTON ID="showBtn">自定义对话框</BUTTON>
      <button id="testRBtn" style="float:right">右边的按钮</button>
$("#showBtn").click(function(){
                .MessageBox.show({
                    animEl:"testRBtn",
                    buttons:.MessageBox.YESNOCANCEL,
                    title:"自定义对话框",
               //     fn:callback,
                    icon:.MessageBox.WARNING,
                    msg:"o(∩_∩)o...哈哈"
                });
            });

最后把项目的一个页面实例贴附到这里供大家参考:

代码

1 <% @ Page Language = " C# " AutoEventWireup = " true " CodeBehind = " BackStateManage.aspx.cs " Inherits = " zsWeb.admin.BackStateManage " %>
2
3 <! DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Transitional//EN " " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >
4
5 < html xmlns = " http://www.w3.org/1999/xhtml " >
6 < head runat = " server " >
7      < title ></ title >
8
9      
10      < link href = " ../CSS/cupertino/jquery-ui-1.8.custom.css " rel = " stylesheet " type = " text/css " />
11      < script src = " ../JS/jquery-1.4.1-vsdoc.js " type = " text/javascript " ></ script >
12      < script src = " ../JS/jquery-ui-1.8.custom.min.js " type = " text/javascript " ></ script >
13      < script src = " ../JS/jquery-ui-1.8.custom.min-vsdoc.js " type = " text/javascript " ></ script >
14
15      
16      < link href = " ../Plusins/resources/css/ext-all.css " rel = " stylesheet " type = " text/css " />
17      < script src = " ../Plusins/ExtJS/ext-jquery-adapter.js " type = " text/javascript " ></ script >
18      < script src = " ../Plusins/ExtJS/ext-all.js " type = " text/javascript " ></ script >
19
20 </ head >
21 < body >
22      < form id = " form1 " runat = " server " >
23      < div >
24 < input type = " button " id = " showBtn " value = " showBtn " />
25 < input type = " button " id = " waitBtn " value = " waitBtn " />
26
27      < script type = " text/javascript " language = " javascript " >
28         $( " #showBtn " ).click(function() {
29             Ext.MessageBox.show({
30                 animEl: " testRBtn " ,
31                 buttons: Ext.MessageBox.YESNOCANCEL,
32                 title: " 自定义对话框 " ,
33                  //      fn:callback,
34                 icon: Ext.MessageBox.WARNING,
35                 msg: " o(∩_∩)o...哈哈 "
36             });
37         });
38      </ script >
39      </ div >
40      </ form >
41 </ body >
42 </ html >
43

转载于:https://www.cnblogs.com/China-Dragon/archive/2010/05/03/1726305.html

weixin_30298497

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ext 与 Jquery 的结合应用

废话：我一直主张各司其职，页面的UI就应该由专门的人去做（flash，css等）而不应该交给js来完成，不过最近在周围朋友的影响下对ext也充满了好奇，毕竟ext的UI表现还是很优美的（本人是个大老粗对审美就这点品味了），于是开始决定学习ext并将其记录下来，希望对他人有用。说明：本人是jquery的的fans，好在ext与jquery并不冲突，在写...
复制链接

扫一扫