• Demo学习: Basic jQuery


    UniGUI是一套基于ExtJS的Delphi的WEB框架,它是使用ExtPascal来转化到ExtJS,ExtJS是一个跨浏览器的JavaScript库,
    因此UniGUI发布出来的程序可以在各种浏览器上运行。支持多种部署方式:独立EXE、Apache、ISAPI .

    由于工作需要使用UniGUI开发了一些小项目,UniGUI有较好的开发效率和扩展性。

    目前已经很少试用UniGUI了, 在这把自己以前的学习笔记整理分享到博客上。

    Basic jQuery

    学习了TUniHTMLFrame的基本用法以及引用外部JS控件库的方法;

    一、 使用第三方JS库

    要在uniGUI里引用第三方JS库需要首选在ServerModule单元的” CustomFiles”属性添加JS库文件路径,然后在界面里面执行代码。

    这个例子引用了第三方jquery库来显示时钟界面。

    引用库:ServerModule -> ” CustomFiles”

    files/jdigiclock/css/jquery.jdigiclock.css

    files/jdigiclock/lib/jquery-1.3.2.min.js

    files/jdigiclock/lib/jquery.jdigiclock.js

    files/clockdemo/styles.css

    files/clockdemo/jquery.tzineClock/jquery.tzineClock.css

    files/clockdemo/jquery.tzineClock/jquery.tzineClock.js

     

    二、 TUniHTMLFrame

    TUniHTMLFrame是个比较灵活的控件,在这个组件里可以嵌入需要的JS代码来扩展控件,项目中使用到的ZTree、HideChart都在这个控件上扩展的。

    “AfterScript”、“HTML”是TUniHTMLFrame的2个主要属性,时钟的显示就用到了这两个属性。

    1. TUniHTMLFrame控件的“AfterScript”属性添加了初始化代码:

    $('#digiclock').jdigiclock({
    clockImagesPath: "files/jdigiclock/images/clock/",
    weatherImagesPath: "files/jdigiclock/images/weather/",
    });

    DOM对象被加载完成后执行以上代码,他调用了jquery.jdigiclock.js里面的jdigiclock函数来初始化时钟;

    2. TUniHTMLFrame控件的“HTML”属性添加显示时钟的div容器 

    <div id="digiclock"></div>

    “digiclock”是div的ID,是用来显示时钟的容器。

  • 相关阅读:
    LeetCode——Generate Parentheses
    LeetCode——Best Time to Buy and Sell Stock IV
    LeetCode——Best Time to Buy and Sell Stock III
    LeetCode——Best Time to Buy and Sell Stock
    LeetCode——Find Minimum in Rotated Sorted Array
    Mahout实现基于用户的协同过滤算法
    使用Java对文件进行解压缩
    LeetCode——Convert Sorted Array to Binary Search Tree
    LeetCode——Missing Number
    LeetCode——Integer to Roman
  • 原文地址:https://www.cnblogs.com/fengxb/p/2844218.html
Copyright © 2020-2023  润新知