~~~
**样式一:编辑框+按钮**
**用途:打开文件 与 浏览目录**
<div class="input-group">
<input type="text" class="form-control" placeholder="提示文本" name="组件名称">
<span class="input-group-btn">
<button class="btn btn-default" type="button" data-name="组件名称" data-action="file" >浏览</button>
</span>
</div>
~~~
![](https://box.kancloud.cn/2016-01-19_569e214a9b3dc.png)
* * * * *
~~~
**样式二**
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">编译到指定目录:</span>
<input type="text" class="form-control" placeholder="如:C:\易编译\" name="指定编译目录">
<span class="input-group-btn">
<button class="btn btn-default" type="button" data-name="指定编译目录" data-action="folder" >浏览</button>
</span>
</div>
~~~
![](https://box.kancloud.cn/2016-01-20_569ef44d86b1f.png)
* * * * *
**参数说明**
~~~
> input(编辑框) 组件里的name必须跟按钮(button)里的data-name一致,这个编辑框主要用于【打开文件】和【浏览目录】返回的文件或目录路径
> 按钮(button) data-action为动作,file=打开文件,folder=浏览目录
> input(编辑框) Value默认值里如果带有@,将会被替换为“易语言根目录\lib\eTools\”
~~~