文档章节

使用 IntraWeb (35) - TIWJQueryWidget

涂孟超
 涂孟超
发布于 2014/09/26 15:35
字数 585
阅读 13
收藏 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
博文 2011
码字总数 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
解决Caused by: java.sql.SQLRecoverableException: IO Error: Connection reset相关问题

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/majian_1987/article/details/18598589 java.sql.SQLException: Io 异常: Connection reset 当数据库连接池中...

大饼卷馒头蘸米饭
2014/01/21
0
0
Intraweb 开发 的 网站 发布 部署

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

vga
2014/03/01
0
0
centos service中的环境变量问题

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

张旭0512
2015/03/30
0
0

没有更多内容

加载失败,请刷新页面

加载更多

脚本配置java开发环境

@echo off&setlocal enabledelayedexpansion cls @echo "This script is used to registe envionment variables......" @echo. @echo. @echo. set var=%~dp0 set var=%var:~,-1% @echo "regi......

默克鱼
24分钟前
1
0
c++中友元函数理解与使用

在学习c++这一块,关于友元函数和友元类,感觉还是不好理解,但是井下心来,理解,需要把我一下几点。 首先讲友元函数。 (1)友元函数: 1)C++中引入友元函数,是为在该类中提供一个对外(除...

天王盖地虎626
今天
2
0
OSChina 周一乱弹 —— 白掌柜说了卖货不卖身

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @爱漫爱 :这是一场修行分享羽肿的单曲《Moony》 手机党少年们想听歌,请使劲儿戳(这里) @clouddyy :开不开心? 开心呀, 我又不爱睡懒觉…...

小小编辑
今天
703
11
大数据教程(11.7)hadoop2.9.1平台上仓库工具hive1.2.2搭建

上一篇文章介绍了hive2.3.4的搭建,然而这个版本已经不能稳定的支持mapreduce程序。本篇博主将分享hive1.2.2工具搭建全过程。先说明:本节就直接在上一节的hadoop环境中搭建了! 一、下载apa...

em_aaron
今天
5
0
开始看《JSP&Servlet学习笔记》

1:WEB应用简介。其中1.2.1对Web容器的工作流程写得不错 2:编写Servlet。搞清楚了Java的Web目录结构,以及Web.xml的一些配置作用。特别是讲了@WebServlet标签 3:请求与响应。更细致的讲了从...

max佩恩
今天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部