使用外部CSS样式

TMS WEB CORE由于是纯Html+js，很容易使用外部的样式文件对网页元素进行控制。

 

这次我将演示怎么使用http://apps.bdimg.com/libs/todc-bootstrap/3.1.1-3.2.1/todc-bootstrap.min.css库

 

1、修改工程文件同名的HTML文件，增加外部CSS文件调用（本演示为Project1.html）

 

2、增加这一行后（最关键的就是这一步了），我们在Delphi IDE中就能够直接使用这些CSS元素了

 

 

3、拖入三个控件到IDE设计页面（1、WebButton1，2、WebEdit1，3、WebListBox1）

 

 

4、编写ListBox改变事件代码

procedure TForm1.WebListBox1Change(Sender: TObject);
var
  CssName: string;
begin
  CssName                     := '';
  if WebListBox1.ItemIndex <> -1 then
    CssName                   := WebListBox1.Items[WebListBox1.ItemIndex];
  WebEdit1.Text               := CssName;
  WebEdit1.ElementClassName   := CssName;
  WebButton1.ElementClassName := CssName;
end;

 

 

5、运行效果

 

 

代码Unit1.pas

unit Unit1;

interface

uses
  System.SysUtils, System.Classes, WEBLib.Graphics, WEBLib.Controls, WEBLib.Forms, WEBLib.Dialogs, Vcl.Controls, Vcl.StdCtrls, WEBLib.StdCtrls;

type
  TForm1 = class(TWebForm)
    WebButton1: TWebButton;
    WebEdit1: TWebEdit;
    WebListBox1: TWebListBox;
    procedure WebListBox1Change(Sender: TObject);
  end;

var
  Form1: TForm1;

implementation

{$R *.dfm}

procedure TForm1.WebListBox1Change(Sender: TObject);
var
  CssName: string;
begin
  CssName                     := '';
  if WebListBox1.ItemIndex <> -1 then
    CssName                   := WebListBox1.Items[WebListBox1.ItemIndex];
  WebEdit1.Text               := CssName;
  WebEdit1.ElementClassName   := CssName;
  WebButton1.ElementClassName := CssName;
end;

end.

 

窗体Unit1.dfm

object Form1: TForm1
  Left = 0
  Top = 0
  Width = 640
  Height = 480
  ElementClassName = 'btn'
  Font.Charset = DEFAULT_CHARSET
  Font.Color = clWindowText
  Font.Height = -11
  Font.Name = 'Tahoma'
  Font.Style = []
  TabOrder = 1
  object WebButton1: TWebButton
    Left = 336
    Top = 96
    Width = 273
    Height = 113
    Caption = 'WebButton1'
    ElementClassName = 'btn'
    TabOrder = 0
  end
  object WebEdit1: TWebEdit
    Left = 336
    Top = 40
    Width = 273
    Height = 21
    TabOrder = 1
    Text = 'WebEdit1'
  end
  object WebListBox1: TWebListBox
    Left = 0
    Top = 0
    Width = 313
    Height = 480
    Align = alLeft
    ItemHeight = 13
    ItemIndex = -1
    Items.Strings = (
      'alert'
      'alert-danger'
      'alert-dismissable'
      'alert-info'
      'alert-success'
      'alert-warning'
      'badge'
      'bg-primary'
      'bg-warning'
      'breadcrumb'
      'breadcrumb-inverse'
      'breadcrumb-sm'
      'btn'
      'btn-danger'
      'btn-default'
      'btn-group'
      'btn-group-vertical'
      'btn-info'
      'btn-lg'
      'btn-link'
      'btn-primary'
      'btn-success'
      'btn-toolbar'
      'btn-warning'
      'caret-left'
      'carousel'
      'carousel-caption'
      'carousel-control'
      'carousel-indicators'
      'checkbox'
      'checkbox-inline'
      'collapse-caret'
      'container'
      'dropdown-header'
      'dropdown-menu'
      'dropdown-submenu'
      'dropup'
      'form-control'
      'form-control[readonly]'
      'form-horizontal'
      'has-error'
      'has-feedback'
      'has-success'
      'has-warning'
      'help-block'
      'img-rounded'
      'img-thumbnail'
      'input-group-addon'
      'input-group-lg'
      'input-group-sm'
      'input-lg'
      'input-sm'
      'jumbotron'
      'label'
      'label-danger'
      'label-default'
      'label-info'
      'label-primary'
      'label-success'
      'label-warning'
      'list-group'
      'list-group-header'
      'list-group-item'
      'list-group-item-danger'
      'list-group-item-info'
      'list-group-item-menu'
      'list-group-item-success'
      'list-group-item-warning'
      'list-group-item-wrapper'
      'modal-backdrop'
      'modal-body'
      'modal-content'
      'modal-footer'
      'modal-header'
      'nav'
      'navbar'
      'navbar-brand'
      'navbar-btn'
      'navbar-default'
      'navbar-fixed-bottom'
      'navbar-fixed-top'
      'navbar-form'
      'navbar-inverse'
      'navbar-link'
      'navbar-masthead'
      'navbar-nav'
      'navbar-static-top'
      'navbar-text'
      'navbar-toggle'
      'navbar-toolbar'
      'nav-pills'
      'nav-tabs'
      'nav-tabs-google'
      'pager'
      'pagination'
      'pagination-lg'
      'pagination-sm'
      'panel'
      'panel-body'
      'panel-danger'
      'panel-default'
      'panel-footer'
      'panel-group'
      'panel-heading'
      'panel-info'
      'panel-primary'
      'panel-success'
      'panel-title'
      'panel-warning'
      'popover'
      'popover-content'
      'popover-footer'
      'progress'
      'progress-bar'
      'progress-bar-danger'
      'progress-bar-info'
      'progress-bar-success'
      'progress-bar-warning'
      'progress-striped'
      'radio'
      'radio-inline'
      'scrollable-shadow'
      'table'
      'table-bordered'
      'table-hover'
      'table-striped'
      'text-primary'
      'text-warning'
      'thumbnail'
      'tooltip'
      'tooltip-inner'
      'well'
      'well-lg'
      'well-sm')
    TabOrder = 2
    OnChange = WebListBox1Change
  end
end