分享jQuery图形设计工具介绍文章，适合美工或者初学者 - IxEdit

最新推荐文章于 2019-06-28 18:22:41 发布
最新推荐文章于 2019-06-28 18:22:41 发布
阅读量108 收藏
点赞数
文章标签： jQuery 设计模式 Chrome Safari CSS ViewUI
作者：Terry li - GBin1.com

偶然发现了一个图形化的jQuery互动设计开发工具 IxEdit， 这里和大家分享一下。
介绍

IxEdit 是基于javascript的图形化设计工具，使用这个工具可以使用它提供的图形化设计界面来设计和开发jQuery，而不用自己手工添加来编写 jQuery代码，比较适合用来快速实现功能的原型，当然复杂的代码还是得自己手工编写，毕竟自动生成的代码有它的局限性，比如，编写风格及其代码质量。
简单安装

要求：

* 开发环境Safari 3.1+, Chrome, Firefox 3+, or Internet Explorer 7+
* 安装Gears （firefox和IE需要）来使用本地数据库服务。对于FF你可以直接下载插件。如果使用Safari或者chorome就无需安装
* HTML文件必须使用UTF-8的编码格式，并且使用标准模式（standard），不能使用Quirks Mode

兼容性：

* Internet Explorer 6+
* Firefox 2+
* Safari 3+
* Opera 9+
* Chrome

配置：

* jquery-plus-jquery-ui.js
jQuery和jQueryUI类库代码(http://jquery.com/ and http://jqueryui.com/) ，你可以自己下载，使用最新类库但可能有版本问题
* ixedit.js
IxEdit的调试工具
* ixedit.css
IxEdit的调试工具CSS文件
* ui-sui.css
IxEdit的用户界面的生成CSS，如果你有的话，可以不需要

更多代码和Demo演示请查看这里：http://www.gbin1.com/technology/jquery/jquerydebuggerixeidt/index.html
jjfatjjfat
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ixedit:IxEdit是用于Web的基于JavaScript的交互设计和Javascript（jQuery）代码生成工具
04-29
这是来自分支 ixedit IxEdit是用于Web的基于JavaScript的交互设计工具。 使用IxEdit，设计人员可以练习DOM脚本，而无需编写代码来动态更改，添加，移动或转换网页上的元素。 尤其是，在Web应用程序的原型设计阶段中，IxEdit必须非常有用，以便快速尝试各种交互。 对于研究jQuery和jQuery-UI非常有用。 该项目与那些浏览器兼容。 Firefox 12.0+ IE8 + Chrome19.0.1084.46+ Safari 6.0.3+ 安装 用法 在网络浏览器中打开index.html文件。 如果您安装了python，请运行 克隆后 > python server.py 并使用Chrome或Safari访问http://127.0.0.1:8000 基本操作流程 单击列表视图中的“新建”按钮以打开编辑视图以进行新的交互。 在动作编辑区域
JQuery图形开发工具ixedit
11-26
本工具可以大大简化 JQuery的开发，而且简单易学，非常适合应用大量js代码的环境，能够有效的减少代码的编写量.
IxEdit傻瓜式JavaScript开发工具(附下载、汉化版、视频教程)
weixin_30247781的博客
11-18 157
从昨天看到IxEdit以后，我就被它深深的迷住了。试用、研究、汉化，整整忙活了一天。现在就将现阶段使用的感受给大家汇报一下，也希望更多的人可以喜欢上这个超级牛B的JavaScript开发工具。 前言 IxEdit：傻瓜式JavaScript开发工具 实在没有什么语言，能表达我看到这个IxEdit JavaScript开发工具时的兴奋。举个例子来说就是：你已经在...
IxEdit
技术服务生活
02-06 618
今天发现一个很强大的ｊｓ编辑器，所见即所得，虽然是基于ｊｑｕｅｒｙ的，但是感觉还是很不错的。继续学习一下。打开ｉｘｅｄｉｔ高级模式：   ixedit.advancedMode=true;  
基于JQUERY的WEB在线流程图设计器GOOFLOW 0.7版
sdlddr
08-16 711
 跨浏览器，可兼容IE7--IE10， FireFox， Chrome， Opera等几大内核的浏览器，且不需要浏览器再加装任何控件。 （IE7-IE8时，使用VML；IE9以上，FF，OPERA，CHROME，SAFARI上使用SVG）  多系统兼容性、可移植性:由于只包括前台UI,因此二次开发者可很方便将本插件用在任何一种需要流程图的B/S系统应用上，流程图的详细实现逻辑完全交于后台程...
JS开发利器-IxEdit傻瓜式JavaScript开发工具(附下载、汉化版、视频教程)
weixin_34152820的博客
06-28 302
从昨天看到IxEdit以后，我就被它深深的迷住了。试用、研究、汉化，整整忙活了一天。现在就将现阶段使用的感受给大家汇报一下，也希望更多的人可以喜欢上这个超级牛B的JavaScript开发工具。 转载于:https://www.cnblogs.com/alterhu/archive/2012/04/06/2435451.html...
jquery可视化开发工具ixedit-1.0pb6
12-25
"jQuery可视化开发工具ixedit-1.0pb6"是一个基于JavaScript库jQuery的高级开发工具，主要用于简化网页内容的编辑和管理。这个版本是1.0预览版6（Preview Build 6），它提供了一种直观、用户友好的界面，让开发者能够...
jquery 可视化开发工具 ixedit
10-19
ixEdit适合于快速原型设计、小型网站的开发以及教学演示，尤其对于初学者来说，能够快速理解网页布局和交互的实现过程。对于专业开发者，ixEdit可以作为快速搭建页面布局和测试交互效果的辅助工具。 总的来说，...
基于JQUERY的WEB在线流程图设计器GOOflow
12-07
插件描述：跨浏览器，可兼容IE7--IE10， FireFox， Chrome， Opera等几大内核的浏览器，且不需要浏览器再加装任何控件。 参考示例：http://www.jq22.com/jquery-info5015
基于JQUERY的WEB在线流程图设计器GOOFLOW
01-09
基于JQUERY的WEB在线流程图设计器GOOFLOW 0.5版 (2013-11-23) [特点]  跨浏览器，可兼容IE7--IE10， FireFox， Chrome， Opera等几大内核的浏览器，且不需要浏览器再加装任何控件。  多系统兼容性、可移植性:由于只包括前台UI,因此二次开发者可很方便将本插件用在任何一种需要流程图的B/S系统应用上，流程图的详细实现逻辑完全交于后台程序开发者自己实现;对于后台,只要能返回/接收能被本插件解析的JSON格式数据即可.所以本插件可用于不同的服务器语言建立的后台上.  跨领域:流程图设计器不止用在电信领域,在其它需要IT进行技术支持的领域中都有重大作用.  以下从纯技术实现层面具体描述:  页面顶部栏、左边侧边栏均可自定义；  当左边的侧边栏设为不显示时，为只读状态，此时的视图区可当作是一个查看器而非编辑器。  侧边工具栏除了基本和一些流程节点按钮外，还自定义新的节点按钮，自定义节点都可以有自有的图标、类型名称，定义后在使用可可在工作区内增加这些自定义节点。  顶部栏可显示流程图数据组的标题，也可提供一些常用操作按钮。  顶部栏的按钮，除了撤销、重做按钮外，其余按钮均可自定义点击事件。  可画直线、折线；折线还可以左右/上下移动其中段。  具有区域划分功能，能让用户更直观地了解哪些节点及其相互间的转换，是属于何种自定义区域内的。  具有标注功能，用橙红色标注某个结点或者转换线，一般用在展示流程进度时。  能直接双击结点、连线、分组区域中的文字进行编辑  在对结点、连线、分组区域的各种编辑操作，如新增/删除/修改名称/重设样式或大小/移动/标注时，均可捕捉到事件，并触发自定义事件，如果自定义事件执行的方法返回FALSE，则会阻止操作。  具有操作事务序列控制功能，在工作区内的各种有效操作都能记录到一个栈中，然后可以进行撤销（undo()）或重做（redo()），像典型的C/S软件一样。  0.4版中，加入了只导出在初始载入后被编辑的流程图中,只作了增删改等变更的元素，这样可用于用户快速存储，只保存本次变更过的内容，不用重新保存整个流程。  0.5版中，结点的样式不再受到原有程序的限制，所有样式均默认为淡蓝色长方形；如果要指定为圆形，可在初始化时定义结点类型为”原有类型”+” round”；如果要指定为复合结点，则可在初始化时定义结点类型为”原有类型”+” mix”。”原有类型”+” myType”:myType可为自己写的一种特殊样式类.
工作流/图形设计器 （ext/easyui/jqueryui）
05-27
工作流/图形 设计器，含有ext,easyui,jqueryui的实现
图形jquery.gvChart-1.0.1.min.js
01-10
/* @license * jQuery.print, version 1.3.2 * (c) Sathvik Ponangi, Doers' Guild * Licence: CC-By (http://creativecommons.org/licenses/by/3.0/) *--------------------------------------------------------------------------*/ (function ($) { "use strict"; // A nice closure for our definitions function getjQueryObject(string) { // Make string a vaild jQuery thing var jqObj = $(""); try { jqObj = $(string) .clone(); } catch (e) { jqObj = $("<span />") .html(string); } return jqObj; } function printFrame(frameWindow) { // Print the selected window/iframe var def = $.Deferred(); try { setTimeout(function () { // Fix for IE : Allow it to render the iframe frameWindow.focus(); try { // Fix for IE11 - printng the whole page instead of the iframe content if (!frameWindow.document.execCommand('print', false, null)) { // document.execCommand returns false if it failed -http://stackoverflow.com/a/21336448/937891 frameWindow.print(); } } catch (e) { frameWindow.print(); } frameWindow.close(); def.resolve(); }, 250); } catch (err) { def.reject(err); } return def; } function printContentInNewWindow(content) { // Open a new window and print selected content var w = window.open(); w.[removed](content); w.document.close(); return printFrame(w); } function isNode(o) { /* http://stackoverflow.com/a/384380/937891 */ return !!(typeof Node === "object" ? o instanceof Node : o && typeof o === "object" && typeof o.nodeType === "number" && typeof o.nodeName === "string"); } $.print = $.fn.print = function () { // Print a given set of elements var options, $this, self = this; // console.log("Printing", this, arguments); if (self instanceof $) { // Get the node if it is a jQuery object self = self.get(0); } if (isNode(self)) { // If `this` is a HTML element, i.e. for // $(selector).print() $this = $(self); if (arguments.length > 0) { options = arguments[0]; } } else { if (arguments.length > 0) { // $.print(selector,options) $this = $(arguments[0]); if (isNode($this[0])) { if (arguments.length > 1) { options = arguments[1]; } } else { // $.print(options) options = arguments[0]; $this = $("html"); } } else { // $.print() $this = $("html"); } } // Default options var defaults = { globalStyles: true, mediaPrint: false, stylesheet: null, noPrintSelector: ".no-print", iframe: true, append: null, prepend: null, manuallyCopyFormValues: true, deferred: $.Deferred() }; // Merge with user-options options = $.extend({}, defaults, (options || {})); var $styles = $(""); if (options.globalStyles) { // Apply the stlyes from the current sheet to the printed page $styles = $("style, link, meta, title"); } else if (options.mediaPrint) { // Apply the media-print stylesheet $styles = $("link[media=print]"); } if (options.stylesheet) { // Add a custom stylesheet if given $styles = $.merge($styles, $('<link rel="stylesheet" href="' + options.stylesheet + '">')); } // Create a copy of the element to print var copy = $this.clone(); // Wrap it in a span to get the HTML markup string copy = $("<span/>") .append(copy); // Remove unwanted elements copy.find(options.noPrintSelector) .remove(); // Add in the styles copy.append($styles.clone()); // Appedned content copy.append(getjQueryObject(options.append)); // Prepended content copy.prepend(getjQueryObject(options.prepend)); if (options.manuallyCopyFormValues) { // Manually copy form values into the HTML for printing user-modified input fields // http://stackoverflow.com/a/26707753 copy.find("input") .each(function () { var $field = $(this); if ($field.is("[type='radio']") || $field.is("[type='checkbox']")) { if ($field.prop("checked")) { $field.attr("checked", "checked"); } } else { $field.attr("value", $field.val()); } }); copy.find("select").each(function () { var $field = $(this); $field.find(":selected").attr("selected", "selected"); }); copy.find("textarea").each(function () { // Fix for https://github.com/DoersGuild/jQuery.print/issues/18#issuecomment-96451589 var $field = $(this); $field.text($field.val()); }); } // Get the HTML markup string var content = copy.html(); // Notify with generated markup & cloned elements - useful for logging, etc try { options.deferred.notify('generated_markup', content, copy); } catch (err) { console.warn('Error notifying deferred', err); } // Destroy the copy copy.remove(); if (options.iframe) { // Use an iframe for printing try { var $iframe = $(options.iframe + ""); var iframeCount = $iframe.length; if (iframeCount === 0) { // Create a new iFrame if none is given $iframe = $('<iframe height="0" width="0" border="0" wmode="Opaque"/>') .prependTo('body') .css({ "position": "absolute", "top": -999, "left": -999 }); } var w, wdoc; w = $iframe.get(0); w = w.contentWindow || w.contentDocument || w; wdoc = w.document || w.contentDocument || w; wdoc.open(); wdoc.write(content); wdoc.close(); printFrame(w) .done(function () { // Success setTimeout(function () { // Wait for IE if (iframeCount === 0) { // Destroy the iframe if created here $iframe.remove(); } }, 100); }) .fail(function (err) { // Use the pop-up method if iframe fails for some reason console.error("Failed to print from iframe", err); printContentInNewWindow(content); }) .always(function () { try { options.deferred.resolve(); } catch (err) { console.warn('Error notifying deferred', err); } }); } catch (e) { // Use the pop-up method if iframe fails for some reason console.error("Failed to print from iframe", e.stack, e.message); printContentInNewWindow(content) .always(function () { try { options.deferred.resolve(); } catch (err) { console.warn('Error notifying deferred', err); } }); } } else { // Use a new window for printing printContentInNewWindow(content) .always(function () { try { options.deferred.resolve(); } catch (err) { console.warn('Error notifying deferred', err); } }); } return this; }; })(jQuery);
IxEdit中文版 IxEdit_pack_cn jquery+jqueryUI可视化工具
04-20
IxEdit是一款基于jQuery和jQuery UI的可视化编辑工具，专为前端开发者和设计师打造，用于创建交互式的网页元素和用户界面。这款中文版本的IxEdit_pack_cn提供了更友好的语言环境，便于中国用户理解和使用。 首先，...
IxEdit试用感受
江湖
11-20 146
今天终于有了点时间，几天前在网上闲逛的时候看到了IxEdit，今天顺便拿来试一下 IxEdit不是一个什么IDE类的工具，而是一个基于jQuery的集成到页面里的开发工具。 使用时你只需要在页面里加入如下代码 &lt;!-- Load jQuery and jQuery UI ( This line is still needed after deploying. ) --&gt; ...
IxEdit傻瓜式JavaScript开发工具(附下载、汉化版、视频教程)收藏 function change_alt1(btn,style){var btn=document.getElementB...
saybody
11-18 232
从昨天看到IxEdit以后，我就被它深深的迷住了。试用、研究、汉化，整整忙活了一天。现在就将现阶段使用的感受给大家汇报一下，也希望更多的人可以喜欢上这个超级牛B的JavaScript开发工具。 前言 IxEdit：傻瓜式JavaScript开发工具 实在没有什么语言，能表达我看到这个IxEdit JavaScript开发工具时的兴奋。举个例子来说就是：你已经在沙漠...
ixedit-1.0pb6.packed + 使用说明
09-15
ixedit 使用说明 jquery可视开发
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值