sciter 文件路径操作过滤其他只剩html选择其他文件

自定义文件名输入组件

最新推荐文章于 2022-12-16 11:40:34 发布

原创最新推荐文章于 2022-12-16 11:40:34 发布 · 201 阅读

0 ·

CC 4.0 BY-SA版权

sciter 专栏收录该内容

65 篇文章

订阅专栏

本文介绍了一种自定义的文件名输入组件实现方法，通过HTML、CSS和TIScript结合，创建了一个带有文件选择按钮的输入框，支持特定文件类型的筛选。组件能够响应文件选择事件并更新显示路径。

<html>
<head>
    <title>file name input</title>
    <style>

    widget[type=file-name] {
      prototype: FileName;
      flow:horizontal;
      width:20em;
    }
    widget[type=file-name] > input { width:*; }

    </style>
    <script type="text/tiscript">

    class FileName : Behavior {
      function attached() {
        this.$append( <input|text.path><button.selector>…</button>);

        var path = this.path = this.$(.path);

        this.$(button.selector) << event click() {
          const filter = "HTML Files (*.htm,*.html)|*.htm;*.html|All Files (*.*)|*.*";
          var fn = view.selectFile(#open,filter);
          if( fn ) path.value = fn;
          (this super).postEvent(Event.EDIT_VALUE_CHANGED);
        };
      }

      property value(v) {
        get { return this.path.value; }
        set { this.path.value = v; }
      }
    }

    $(widget).onValueChanged = function() {
      stdout.println(this.value);
    };