窗口小部件 > TinyFramework窗口小部件

TinyFramework 窗口小部件 v 2.0
强力提升用户体验!

全新开发的革命性的窗口小部件,允许你比常规的小部件拥有更多的特性。你现在可以用实时的 AJAX载入技术进行自动刷新。 在窗口部件标题栏上添加 无限多的按钮和控件. 所有的窗口小部件

默认 窗口小组件

Change title to update and save instantly!

窗口小部件默认有10个像素的内边框,它可以通过添加样式.no-padding.widget-body样式来移除,默认的窗口小部件拥有5个窗口小部件按钮,显示在窗口小部件标题栏的右上方。

按钮

修改标题

修改标题并保存可立即生效!

激活操作按钮

data-widget-editbutton

屏幕

使小组件全屏

data-widget-fullscreenbutton

当在显示图像,画廊,表格或大数据或地图时非常有用。有许多有用的应用利用这个方法

删除

通过删除窗口小部件,将从页面中删除这个窗口小部件,应该通过OnEvent事件处理来在后台从数据库中删除。
data-widget-deletebutton

窗口小部件 颜色

修改保存 窗口小部件颜色
data-widget-colorbutton

可以随意更换部件的标题背景颜色和框架会永久记住你所选择的部件的标题背景颜色。在任意页面的任意窗口小部件都可以这么做!!

widget colorpicker

标签和标记

2.35%
99
小标记
我是一个大标签

在窗口小部件的页脚或工具栏上添加标签

标签 Widget

在窗口小部件的标题栏可以添加TAB页

某电视片播映引起轰动,演员均为业余人士,角色把握都很到位而且自然。 记者问:“那个店小二是谁演的? 任劳任怨,随叫随到,加班还不给钱,从没怨言。” 答:“嗯,是很到位,以前干IT的”

查看 普通元素来获取更多选项

据说有一位软件工程师,一位硬件工程师和一位项目经理同坐车参加研讨会。不幸在从盘山公路下山时坏在半路上了。于是两位工程师和一位经理就如何修车的问题展开了讨论。   硬件工程师说:“我可以用随身携带的瑞士军刀把车坏的部分拆下来,找出原因,排除故障。”   项目经理说:“根据经营管理学,应该召开会议,根据问题现状写出需求报告,制订计划,编写日程安排,逐步逼近,alpha测试,beta1测试和beta2测试解决问题。”   软件工程说:“咱们还是应该把车推回山顶再开下来,看看问题是否重复发生。”

刷新 部件

这些内容将被Ajax方式加载的内容替换...

折叠 窗口小部件

这个小组件默认是展开的

data-widget-togglebutton

请注意,标题文字的大小比其他小部件的头略大

可折叠 窗口小部件

This widget is collapsed by default

data-widget-collapsed

进度

55 %

窗口小组件 按钮

可以手动或动态的给标题栏增加按钮

拥有 翻页

警告没有内边框...

请注意这个小工具的内部没有内边框!

窗口小部件 拥有 下拉列表

可以非常容易的在窗口小部件标题栏中添加下拉操作,需要给下拉按钮添加btn-xs样式.

控件 开关

点击开关开关,切换风格

锁定 窗口小部件

锁定部件锁定小工具到网格(您将无法拖动这个小工具)。也可以让你在窗口小部件标题栏添加和使用输入文本框。

data-widget-sortable="false"

固定 高度

修改标题可立即保存!
授权码 用户名 ! 日期
C87E48EF-605A-B4FF erat@montesnasceturridiculus.org 10/03/13
5DDA79E7-890F-064D Nunc.lectus@ipsum.co.uk 28/12/13
468459AA-7933-C017 vitae.mauris.sit@tempordiamdictum.net 25/02/14
C3006C18-4677-D2CE nec.urna.suscipit@acrisusMorbi.edu 06/07/14
E535C188-FDF4-90CB lobortis@pedeacurna.com 28/12/12
95489E95-9602-18B7 egestas.lacinia.Sed@In.ca 17/07/14
D34E6661-D81A-9328 arcu@lectus.ca 14/10/14
C72D2C04-458F-EBD0 ut.pharetra.sed@vulputatevelit.net 30/04/14
10CAFA5C-AB4B-8B45 arcu.eu.odio@Duis.co.uk 14/02/13
AA4F5CBA-1CE8-85B7 nec@rutrum.net 06/02/14
2D816071-8F99-B315 Praesent.luctus.Curabitur@elementum.ca 27/09/13
41BDB60C-C6EA-54EB Nunc.sed.orci@sitamet.org 18/11/13
43F3D48B-FEF3-776E eu.erat@nequevitaesemper.com 23/04/13
2521899F-79B9-B309 mattis.velit@risusQuisque.ca 04/07/13
D08994C9-DCB1-948B Proin@metusAliquam.net 27/07/13
7AD2C774-36BA-0B2B tincidunt@Lorem.com 01/07/14
162C0373-FF3B-2469 ante.dictum.cursus@ultrices.org 10/02/13
05641987-3D48-DD72 lorem.ut.aliquam@Sednecmetus.org 16/08/14
3A173E5A-192A-0D5D nunc.risus@vitae.org 04/04/13
67081066-E0B5-9E37 lectus@sed.org 10/12/14
C677C05F-7D98-C3E9 auctor.quis@Morbi.org 30/03/13

基础用法

注意: 如果你想让属性data-attribute的值为true的话,你必须删除该属性,如果仅仅将该属性的值修改为false的话,比如, data-widget-togglebutton="true",它仍将显示为true的效果。
HTML5 data 属性 / CSS / HTML 追加都后面的属性值 示例 描述
data-widget-sortable header false 小部件不做排序(只有设置为false时才起作用).
data-widget-icon .jarviswidget fa fa-trash 在部件的头部使用一个图标(要查看所有的图表,请浏览图表章节).
data-widget-togglebutton .jarviswidget false 防止部件出现一个切换按钮(只有设置为false时才起作用).
data-widget-deletebutton .jarviswidget false 防止部件出现一个删除按钮(只有设置为false时才起作用).
data-widget-editbutton .jarviswidget false 防止部件出现一个编辑按钮(只有设置为false时才起作用).
data-widget-fullscreenbutton .jarviswidget false 防止部件出现一个全屏按钮(只有设置为false时才起作用).
data-widget-load .jarviswidget widget-ajax.php 通过ajax加载的文件。
data-widget-refresh .jarviswidget 10 快速刷新一个ajax文件(请查看 'data-widget-load').
data-widget-refreshbutton .jarviswidget false 显示刷新按钮时,防止出现一个ajax小部件(只有设置为false时才起作用).
data-widget-hidden .jarviswidget true 在加载时,隐藏该部件(只有设置为true时才起作用).
data-widget-colorbutton .jarviswidget false 默认是激活状态,设置为false时,隐藏。
data-widget-collapsed .jarviswidget false 加载时,小部件是折叠的。(只有设置为true时才起作用). 当加载任何页面时,总是处于折叠状态。
data-widget-grid article false 你可以将可排序或者可删除从这个网格中排除,意思是在这个区域的所有widget都可以正常工作,但不能删除,也不能做排序。 将该属性(只有设置为false时才起作用)添加到grid元素中。
.no-padding .widget-body n/a 移除所有的内部控件填充体
.well .jarviswidget n/a 将一个控件转化为一个容器
这些HTML5属性可以在widget选项中单独使用。 主要选项可以在widgets插件中自动改变。 注意: data属性只能有一个boolean值(请参照上面)!