Coolite Cool Study 2 同时更新多个Tab

 
 

当时用Coolite做测试遇到两个问题：

1. 传递给Tab的Url参数会莫名其妙的被添加上其他字符（到Coolite论坛上问了一下估计是bug）。正常情况下，google搜索url是这个样子：http://www.google.com/search?q=Hello   但因为Coolite在Tab的Url后面添加了某些字符，结果变成这样：http://www.google.com/search?q=Hellosfkjsdkfjskdf,  解决办法是把搜索Url设成这样形式：http://www.google.com/search?q=Hello&End=Y ，呵呵！！

2. 多个Tab同时加载页面引起冲突，导致后面加载的Tab页面有javascript错误。解决办法很简单，TabPanel的属性 DeferredRender="false" 就OK了。

完整代码：

<%@ Page Language="C#" %>


<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<script runat="server">


protected void Page_Load(object sender, EventArgs e)

  {

  }


protected void UpdatePage(object sender, AjaxEventArgs e)

  {

    string keyWord = txtS.Text;

    string url;

    url = "http://www.google.com/search?q=" + keyWord + "&End=Y";

    tabDtlInfo.Load(new LoadConfig { Mode = LoadMode.IFrame, Url = url, NoCache = true, ShowMask = true });

    url = "http://cnweb.search.live.com/results.aspx?q=" + keyWord + "&End=Y";

    tabChgInfo.Load(new LoadConfig { Mode = LoadMode.IFrame, Url = url, NoCache = true, ShowMask = true });

    url = "http://www.flickr.com/search/?q=" + keyWord + "&End=Y";

    tabSmyInfo.Load(new LoadConfig { Mode = LoadMode.IFrame, Url = url, NoCache = true, ShowMask = true });

  }


</script>


<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

  <title>Update 3 Pages</title>

</head>

<body style="padding:15px,5px,5px,15px;">

  <form id="form1" runat="server">

  <ext:ScriptManager ID="ScriptManager1" runat="server" AjaxViewStateMode="Include">

  </ext:ScriptManager>

  <table  >

    <tr>

      <td  style="padding:15px,5px,5px,15px;">

        Search:

      </td>

      <td style="padding:15px,5px,5px,15px;">

        <ext:TextField runat="server" ID="txtS" Width="300">

        </ext:TextField>

      </td>

      <td style="padding:15px,5px,5px,15px;">

        <ext:Button ID="btnTest" runat="server" Text="Search By Multi-Engine" Icon="Accept">

          <AjaxEvents>

            <Click OnEvent="UpdatePage">

              <EventMask ShowMask="true" MinDelay="500" Msg="Updating Page..." />

            </Click>

          </AjaxEvents>

        </ext:Button>

      </td>

    </tr>

  </table>

  <ext:TabPanel runat="server" ActiveTabIndex="0" Border="true" Height="500" DeferredRender="false" >

    <Tabs>

      <ext:Tab ID="tabDtlInfo" runat="server" Title="Google" Height="500" Frame="true"  >

      </ext:Tab>

      <ext:Tab ID="tabChgInfo" runat="server" Title="Live" Height="500" Frame="true">

      </ext:Tab>

      <ext:Tab ID="tabSmyInfo" runat="server" Title="Filckr" Height="500">

      </ext:Tab>

      <ext:Tab ID="tab1" runat="server" Title="AutoLoad_Google" Height="500" Frame="true">

        <AutoLoad NoCache="true" Mode="IFrame" ShowMask="true" Url="http://www.google.com/search?q=Hello&End=Y">

        </AutoLoad>

      </ext:Tab>

      <ext:Tab ID="tab2" runat="server" Title="AutoLoad_Live" Height="500" Frame="true">

        <AutoLoad NoCache="true" Mode="IFrame" Url="http://cnweb.search.live.com/results.aspx?q=Hello&End=Y">

        </AutoLoad>

      </ext:Tab>

    </Tabs>

  </ext:TabPanel>

  </form>

</body>

</html>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

PS: 这篇文章是用Windows Live Writer来写的，感觉效率高了很多，排版也好了，Cool， I like it！( – 。- !) 感觉有点卖广告味道～

赞 (0)

相关推荐

  • Coolite Cool Study 2 同时更新多个Tab

    Coolite Cool Study 2 同时更新多个Tab

       当时用Coolite做测试遇到两个问题: 1. 传递给Tab的Url参数会莫名其妙的被添加上其他字符(到Coolite论坛上问了一下估计是bug).正常情况下,google搜索url是这个样子:http://www.google.com/search?q=Hello   但因为Coolite在Tab的Url后面添加了某些字符,结果变成这样:http://www.google.com/search?q=Hellosfkjsdkfjskdf,  解决办法是把搜索Url设成这样形式:http:/

  • Coolite Cool Study 1 在Grid中用ComboBox 来编辑数据

    Coolite Cool Study 1 在Grid中用ComboBox 来编辑数据

    官方有一个关于Grid CURD 的例子:http://examples.coolite.com/Examples/GridPanel/WebService_Connections/HandlerUsing/   我在其基础上稍微修改一下, 用ComboBox作为Grid的Editor: 先show一下效果给大家坚持看下去的动力: 关键代码: 复制代码 代码如下: <ext:Column ColumnID="ContactName" DataIndex="Contact

  • Coolite Cool Study 3 MVC + Coolite 的实现代码

    Coolite Cool Study 3 MVC + Coolite 的实现代码

    因为默认的 MVC 的样式文件里对于的 table 和 其他相关样式(h1-h6) 与Coolite有冲突,会导致GridPanel走样,大家记得先把那个table 和  h1-h6的样式清除掉才看到GridPanel的帅脸面 - 项目文件分布: 关于Coolite在MVC中的配置文件跟一般webform是一样的. 但在MVC的Global.asax中,需要在 RegisterRoutes 方法里加上这一句: routes.IgnoreRoute("{exclude}/{coolite}/coo

  • jQuery EasyUI API 中文文档 - Tabs标签页/选项卡

    jQuery EasyUI API 中文文档 - Tabs标签页/选项卡

    Tabs 标签页/选项卡 用$.fn.tabs.defaults重写defaults. 依赖 panel linkbutton 用法示例 创建tabs 1. 经由标记创建Tabs 从标记创建Tabs更容易,我们不需要写任何JavaScript代码.记住把 'easyui-tabs' 类添加到<div/>标记,每个tab panel 经由子<div/>标记被创建,其用法与Panel一样. 复制代码 代码如下: <div id="tt" class="

  • 如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)

    Bootstrap是网上最流行的前端开发框架. 除了用它,我不知道还有其他更快的方法去构建一个响应式的网站. 但是自从我向网页添加动态功能的工具变成vue.js后.适应bootstrap变得困难起来.因为这带来了一些技术包袱.没错.我说的就是jquery. 这并不是在抨击jquery,我只是意识到,当你已经在项目里使用一些像Vue的框架后,再引入jQuery就会出现一些显著的缺点: 增加开销.jQuery将会使你的网页增加30KB. 在使用诸如webpack一类的打包工具时,jquery也会很难

  • PHP 批量更新网页内容实现代码

    复制代码 代码如下: <?php $path=$DOCUMENT_ROOT; $path=str_replace("/","\\",$path); //指定文件夹 $path=$path."\\web\\study\\"; //得到所有文件 $s=explode("\n",trim(`dir/b/o:gn $path`)); //得到文件夹下的所有HTML文件名 $num=count($s); for($i=0;$i&l

  • asp.net Coolite 学习交流

    Coolite Toolkit 简介 Coolite Toolkit 是一个支持ASP.NET AJAX的Web控件. Coolite Toolkit是基于跨浏览器的ExtJS 库开发而来的,并且简化了开发步骤,并且包含有丰富的Ajax运用. Coolite Toolkit和ExtJS 都是开源的. 官方主页:http://coolite.com下载地址:http://coolite.com/downloadSamples: http://examples.coolite.com 而且我在cnb

  • mybatis3.4.6 批量更新 foreach 遍历map 的正确姿势详解

    好久没编码了!最近开始编码遇到一个问题 !一个批量修改的问题,就是mybatis foreach 的使用. 当时使用的场景 ,前端 传逗号拼接的字符串id, 修改id对应数据的数据顺序 ,顺序 就是id 的顺序. 就是一个条件(单个id值) 修改一个值(传入的id的顺序) , 1. 把条件作为Map 的key 修改值是value,用map入参 2.用List<Object> 或者数组 ,把条件和值封装成对象放进list集合或者array数组 3.代码使用for循环调用mapper方法 穿两个参

  • Vue异步更新机制及$nextTick原理的深入讲解

    Vue异步更新机制及$nextTick原理的深入讲解

    目录 前言 Vue的异步更新 DOM更新是异步的 DOM更新还是批量的 事件循环 执行过程 源码深入 异步更新队列 nextTick $nextTick 总结 一般更新DOM是同步的 既然更新DOM是个同步的过程,那为什么Vue却需要借用$nextTick来处理呢? 为什么优先使用微任务? 总结 前言 相信很多人会好奇Vue内部的更新机制,或者平时工作中遇到的一些奇怪的问题需要使用$nextTick来解决,今天我们就来聊一聊Vue中的异步更新机制以及$nextTick原理 Vue的异步更新 可能

  • 使用python+Flask实现日志在web网页实时更新显示

    使用python+Flask实现日志在web网页实时更新显示

    目录 一.日志输出到文件 二.生成日志和读取日志 三.Flask创建一个web服务 四.启动服务 总结 一.日志输出到文件 使用模块:logging 可以生成自定义等级日志,可以输出日志到指定路径日志等级:debug(调试日志) < info(重要信息日志) < warning(警告日志) < error(异常日志) < critical(严重错误) 1.封装日志输出方法() import logging as lg import os class logging_(): def

随机推荐