自定义控件UI样式

Axure生成的HTML里单选框、复选框一直都是默认的样式，看久了实在是有点疲劳。最近研究了一下，改了点东西，让生成的网页文件更好看一点。

Axure导出HTML文件时，都会引用其安装目录下的css文件，如果要修改样式，只需要搞明白引用了哪些css文件、哪部分css控制哪些控件的，进行相应的修改即可。

经过一翻查找，发现页面引用的CSS的位置，在Axure安装目录下的\DefaultSettings\Prototype_Files\resources\css下，以Windows系统为例，一般是：

C:\Program Files (x86)\Axure\Axure RP 8\DefaultSettings\Prototype_Files\resources\css

可以看到在这个文件夹下有这几个文件：

其中的axure_rp_pages.css就是控制每个页面的样式表文件，也就是我们要修改CSS代码的文件。直接在里面加入控制单选框显示样式的css代码：

修改之后再次生成HTML文件，效果如下：

接下来只用从网上找一些好看的css代码，加起去就可以让生成的网页变漂亮了！不只局限于单选框、复选框，其他所有控件的UI样式都可以像这样自定义。

直接使用JS语句控制交互效果

虽然Axure本身提供的交互功能还是很强的，但是对于懂一点代码的人设计来说，遇到明明一行代码可以搞定却要设置很多参数的情况真是很烦。

同样是一番源码和资料研究，Axure生成的网页交互功能是基于jQuery以及它自己写的axutil完成的。随便拿一个网页的源码来看：

也就是说我们可以直接用jQuery语句来做事情，这比直接用js语句要方便不少了。

使用JS语句的方式，很简单，就是利用javascript伪协议，给任意一个事件添加用例，这里以OnClick为例，依次选择OpenLink -> Link to an external url or file，在输入框中使用javascript伪协议输入JS语句即可。

比如说要弹出警告框，直接写上：

javascript:void(alert('请至少选择一项！'))

想要让某个控件隐藏，正常用Axure的话要用鼠标点点点点点：创建onclick的use case、选择hide动作、在很多控件里找到要隐藏的控件、选中、确定。而直接使用jQuery语句的话，只需要给这个控件命个名，比如说叫”form”，然后把下面的语句加进去就好：

javascript:void(

$('[data-label=form]').fadeOut('slow')

)

当然复杂的语句，还是在外部编辑器中完成再复制过去比较好。

在使用过程中发现某些jQuery语句如fadeOut()对成组的元素不起作用。解决办法是用动态面板代替编组。

到了这一步，在网上能找到的交互效果，只要有js代码，就可以在Axure中实现了。

这里推荐一个网站CodePen，有各种各样的样式和动效实现，都是有CSS和JS源码的，拿来抄一抄，Axure原型立马与众不同。点击阅读原文即可查看。

应用：列表项淡隐效果

如下图，将一条资讯创建为动态面板，并命名为news_item。这个名称在html代码中就是data-label属性的值，可以通过代码$('[data-label=news_item]')来操作。

添加一个按钮，按钮文案改为"Get Out!"，添加用例onclick：在当前窗口打开外部链接：

javascript:eval($('[data-label=js]').text());void(0);

添加一个区域文本控件，并命名为”js”，添加用例onload：隐藏自身。这样页面载入时就会隐藏区域文本控件了。

在区域文本控件中写入以下代码：

if(confirm('确定要隐藏该新闻？')){

$('[data-label=news_item]').fadeOut('slow');

}

本文原创，未经作者允许不可转载！

更多内容，欢迎关注作者微信公众号：产品研究笔记！