文档章节

使用 IntraWeb (35) - TIWJQueryWidget

涂孟超
 涂孟超
发布于 2014/09/26 15:35
字数 585
阅读 13
收藏 0
点赞 0
评论 0

可有可无的东西, 因为没有它也可以方便达成其目的, 使用它貌似更形象一些; 也可以通过它调用其他 js 库.

利用类似手段, 有人推出了 CGDevTools; 它主要是利用 JQuery 扩展而成, 而 TMS For IW 是通过传统的继承体系.

下面示例主要参考了: http://jqueryui.com

TIWJQueryWidget 所在单元及继承链:
IWCompJQueryWidget.TIWJQueryWidget < TComponent < TPersistent < TObject

主要成员:
property ContentFiles: TStringList //链接需要的 js 和 css 文件(远程或本地); 可用当前窗体的 ContentFiles; 如果全站使用可从 ServerController 单元 ContentFiles
property OnReady: TStringList      //调用; 可用 AddToInitProc() 代替


示例( http://jqueryui.com/datepicker/):

{在窗体上添加两个 IWEdit 和一个 IWJQueryWidget}
procedure TIWForm1.IWAppFormCreate(Sender: TObject);
begin
  IWJQueryWidget1.ContentFiles.Add('//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css');
  IWJQueryWidget1.ContentFiles.Add('//code.jquery.com/jquery-1.10.2.js');
  IWJQueryWidget1.ContentFiles.Add('//code.jquery.com/ui/1.10.4/jquery-ui.js');
//  IWJQueryWidget1.ContentFiles.Add('//jqueryui.com/resources/demos/style.css');

  IWJQueryWidget1.OnReady.Add('$(".MyEditClass").datepicker();'); //.MyEditClass

  IWEdit1.Css := 'MyEditClass';
  IWEdit2.Css := 'MyEditClass';
end;

{抛开 IWJQueryWidget, 换种写法:}
procedure TIWForm1.IWAppFormCreate(Sender: TObject);
begin
  ContentFiles.Add('//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css');
  ContentFiles.Add('//code.jquery.com/jquery-1.10.2.js');
  ContentFiles.Add('//code.jquery.com/ui/1.10.4/jquery-ui.js');

  AddToInitProc('$(".MyEditClass").datepicker();');

  IWEdit1.Css := 'MyEditClass';
  IWEdit2.Css := 'MyEditClass';
end;

效果图:


示例( http://jqueryui.com/accordion/):

{在窗体上放 IWJQueryWidget 和 IWText 各一个}
procedure TIWForm1.IWAppFormCreate(Sender: TObject);
begin
  ContentFiles.Add('http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css');
  ContentFiles.Add('http://code.jquery.com/jquery-1.10.2.js');
  ContentFiles.Add('http://code.jquery.com/ui/1.10.4/jquery-ui.js');

  IWJQueryWidget1.OnReady.Add('$("#accordion").accordion();');

  IWText1.RawText := True;
  {下面测试文本复制于原网页, 这样写不如在设计时贴进去}
  IWText1.Lines.Text := '<div id="accordion">' +
    '  <h3>Section 1</h3>' +
    '  <div>' +
    '    <p>' +
    '    Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer' +
    '    ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit' +
    '    amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut' +
    '    odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.' +
    '    </p>' +
    '  </div>' +
    '  <h3>Section 2</h3>' +
    '  <div>' +
    '    <p>' +
    '    Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet' +
    '    purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor' +
    '    velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In' +
    '    suscipit faucibus urna.' +
    '    </p>' +
    '  </div>' +
    '  <h3>Section 3</h3>' +
    '  <div>' +
    '    <p>' +
    '    Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.' +
    '    Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero' +
    '    ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis' +
    '    lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.' +
    '    </p>' +
    '    <ul>' +
    '      <li>List item one</li>' +
    '      <li>List item two</li>' +
    '      <li>List item three</li>' +
    '    </ul>' +
    '  </div>' +
    '  <h3>Section 4</h3>' +
    '  <div>' +
    '    <p>' +
    '    Cras dictum. Pellentesque habitant morbi tristique senectus et netus' +
    '    et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in' +
    '    faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia' +
    '    mauris vel est.' +
    '    </p>' +
    '    <p>' +
    '    Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.' +
    '    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per' +
    '    inceptos himenaeos.' +
    '    </p>' +
    '  </div>' +
    '</div>';
end;

效果图:


本文转载自:http://www.cnblogs.com/del/p/3807675.html

共有 人打赏支持
涂孟超
粉丝 12
博文 2004
码字总数 14107
作品 0
深圳
程序员
界面控件包TMS IntraWeb Component Pack Pro Script Edition发布v5.8.8.1

TMS IntraWeb Component Pack Pro Script Edition允许从Delphi IDE直接在IntraWeb表格上编辑设计期间的网页。IntraWeb的TMS控件允许以RAD方法用Delphi进行网页应用程序的开发。这使得网页开发...

Harriet666
2017/10/20
0
0
使用delphi 开发 web(一) webbroke 简介

从delphi 3 开始,就可以支持使用webbroke 技术开发基于web 服务器。当时主要是支持CGI和ISAPI. CGI 其实就是一个类似控制台的可执行程序,将其放入web 服务器的可执行目录,每次web 服务器调...

xalion
2012/01/04
0
0
Intraweb 开发 的 网站 发布 部署

将Stand Alone App变为ISAPI Dll只需两步,一是将工程文件中的program改成library,二是将uses里的IWInitStandAlone改成IWInitISAPI,没有该文件就自己加上。 然后将dll文件考入你的默认web站...

vga
2014/03/01
0
0
WebSphere MQ v6 Windows平台故障跟踪

跟踪 如何为 WebSphere MQ 产生跟踪。 跟踪 WebSphere MQ Windows 版 在 WebSphere MQ Windows 版中,您使用strmqtrc 控制命令启用或修改跟踪。要停止跟踪,使用endmqtrc 控制命令。 对于 We...

晨曦之光
2012/03/09
0
0
centos service中的环境变量问题

问题描述:在之前的测试intel media server studio的硬编,并将应用写成service脚本放入/etc/init.d/目录下。 不过测试发现使用service和/etc/init.d/启动的效果不一样。 使用service启动时,...

张旭0512
2015/03/30
0
0
Linux Sir转行 Wince 过渡期工具cygwin的安装与配置

安装cygwin cygwin的安装方法在互联网上很多,我参考http://www.linuxidc.com/Linux/2011-02/32324.htm的文章, 并做了一定的内容补充,直接运行setup.exe,注意接下来几个步骤: 为了保证C...

中华大吉
2011/04/07
0
0
python使用virtualenvwrapper

virtualenv可以隔离python环境,比如我们A项目使用python2.7,B项目使用python3.4,C项目使用python3.6,而且各个项目之间依赖的包也各不相同,如果不能把它们隔离,很难运行在同一台服务器上,...

weidedong
2016/11/04
28
0
网络测试——iperf

Iperf是一个网络性能测试工具。可以测试TCP和UDP带宽质量,可以测量最大TCP带宽,具有多种参数和UDP特性,可以报告带宽,延迟抖动和数据包丢失。Iperf在linux和windows平台均有版本供自由使用...

jesse-lin
2016/11/06
14
0
网络性能测试工具--Iperf

Iperf 是一个网络性能测试工具。Iperf可以测试TCP和UDP带宽质量。Iperf可以测量最大TCP带宽,具有多种参数和UDP特性。Iperf可以报告带宽,延迟抖动和数据包丢失。 Iperf使用方法与参数说明 ...

匿名
2008/11/15
18.4K
0
ls: unparsable value for LS_COLORS environment ...

好久没碰我的服务器了,今天远程上去一看 出现了一个问题 ls: unparsable value for LS_COLORS environment variable ls: unrecognized prefix: rs 网上一搜索,使用 echo $LS_COLORS 得到结...

胡晅晖
2010/07/23
0
3

没有更多内容

加载失败,请刷新页面

加载更多

下一页

TextView设置行间距、字体间距

一、设置行间距 1、设置行间距:android:lineSpacingExtra,取值范围:正数、负数和0,正数表示增加相应的大小,负数表示减少相应的大小,0表示无变化 2、设置行间距的倍数:android:lineSpa...

王先森oO
10分钟前
0
0
适配器模式

适配器模式(Adapter):将一个类的接口转换成客户端希望的另外一个接口,适配器模式使得原本由于接口不兼容而不能一起工作的那些类可以一起工作。 适配器用于连接两种不同种类的对象,使其毫...

阿元
10分钟前
0
0
CoreText进阶(四)-文字行数限制和显示更多

CoreText进阶(四)-文字行数限制和显示更多 用例和效果 Demo:CoreTextDemo 效果图: 默认的截断标识和自定义的截断标识符效果图  点击查看更多之后的效果图  为了可以设置显示的行数以...

aron1992
12分钟前
0
0
nginx的五种负载算法

nginx的五种负载算法 2017年04月26日 15:01:11 阅读数:1297 1.round robin(默认) 轮询方式,依次将请求分配到各个后台服务器中,默认的负载均衡方式。 适用于后台机器性能一致的情况。 挂...

linjin200
14分钟前
0
0
Android RecyclerView快速上手

RecyclerView mainMenu = findViewById(R.id.fragmentMain); mainMenu.setLayoutManager(new GridLayoutManager(getActivity(),4)); mainMenu.setAdapter(new MainAdapter......

燕归南
17分钟前
0
0
RabbitMQ实战:理解消息通信 

应用RabbitMQ的5种队列 一、简单队列 P:消息的生产者 C:消息的消费者 红色:队列 简单队列的生产者和消费者关系一对一 但有时我们的需求,需要一个生产者,对应多个消费者,那就可以采用第...

spinachgit
17分钟前
0
0
Linux的使用技巧:到底要不要会用?[图]

Linux的使用技巧:到底要不要会用?[图] 最近有个项目接近了尾声,要进入到调试测试阶段。这是一个使用Springboot框架为后台程序,mpvue构建的小程序项目。服务器我最终仍旧选择了Linux操作系...

原创小博客
19分钟前
0
0
记elasticdump 备份数据导出导入

版本: elasticsearch 5.5.2 elasticdump 2.2 系统 CentOS7.3 因项目需求 从生产导出一份索引到测试 帮助文档 https://github.com/taskrabbit/elasticsearch-dump?utm_source=dbweekly&utm_m......

雁南飞丶
20分钟前
0
0
saltstack配置目录管理

1.服务端配置 -接着编辑之前的 top.sls 文件 #vim /srv/salt/top.sls //修改为如下 base: 'slaver.test.com': - filedir -新建 filedir.sls 文件 # vim /srv/salt/filedir.sls file-dir: fi......

硅谷课堂
20分钟前
0
0
python日期时间

日期和时间 Python内建的datetime模块提供了datetime、date和time类型。datetime类型结合了date和time,是最常使用的: In [102]: from datetime import datetime, date, timeIn [103]:...

火力全開
27分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部