Controls Form Editor

已关闭 已发布的 Jul 3, 2011 货到付款
已关闭 货到付款

This project aims to duplicate the functionality of form editor within Visual Studio. It features selection of multiple elements which can then be moved across and laid out using the toolbar. It also features editing of elements (both image and text) via aid from TinyMCE.

## Deliverables

## Requirements

Project will use latest jQuery and jQueryUI as well as other plugins to minimize development time and efforts. Plugins, however, must be kept to a minimum and only added if code that is required for desired functionality cannot be created in reasonable time.

Project will use Eclipse and Open Office icons in place of Visual Studio icons from [url removed, login to view]

Each element is an HTML "div" that will contain either text("span") or an image("img") inside. Javascript configuration file will be used to remove static configuration embedded into HTML or other Javascript files.

## Functional Requirements

### General

When user double-clicks on an element, a TinyMCE editor will appear below editor container with HTML of the element.

Only add CSS styles that are absolutely necessary, use those provided by jQueryUI.

### Selection

Individual elements can be selected by holding button of choice (shift or control, specified in configuration file) and left clicked on. They can also be selected using "rubberband" (see jQuery Selectable). If user clicks on empty area that is not within any of element bounds, all elements are deselected.

### Movement

After element(s) are selected, they can be moved by holding down the mouse over selected element and moved across editor container. They can also be moved by pressing one of the direction keys (left, right, up or down) on the keyboard and moved in increments of X when Ctrl is held and direction key is pressed.

Selected element(s) movement will be constrained to editor container if any one of them will attempt to go outside of editor container boundaries:

### Movement Constraint

? When dropdown is attempted to move upwards or left, movement is denied (i.e. selected elements remain where they are, button1 cannot move up or left any further).

? When dropdown is attempted to move right or down, movement is allowed.

? When button1 is attempted to move left, movement is denied (dropdown cannot move left any further)

In general, all selected elements form a boundary box that will not move beyond editor container. This is provided by default through jQuery' Draggable functionality.

### Deletion

Selected element(s) will be deleted by pressing button of choice (Delete or Backspace, specified in configuration file).

### Alignment

Selected element(s) position will be changed in EXACT SAME MANNER it changes in Visual Studio when one of Layout toolbar buttons is clicked.

### Layout toolbar

Toolbar icons will be disabled and enabled every time selection changes in EXACT SAME MANNER as toolbar in Visual Studio. (Example: [url removed, login to view])

Duplicate behavior of:

Align Horizontal (3 buttons)

Align Vertical (3 buttons)

Width, Height & Size (3 buttons)

Horizontal Spacing (4 buttons)

Vertical Spacing (4 buttons)

Center Vertically & Horizontally (2 buttons)

Bring Front & Back (2 buttons)

### Elements toolbar

Elements toolbar will contain five icons -Add Text, Add Image, Copy, Paste and Delete; icons for those are to be taken from [url removed, login to view] When either of first two is clicked, a corresponding element is created in the center of editor container and made selected if no elements are already selected. Copy and paste behaves in EXACT SAME WAY when copy/pasting controls in Visual Studio form editor, i.e. new elements appear slightly to the right and down of original one. (Offsets are to be stored in configuration file). Clicking Delete button removes all selected elements.

PHP 软件构架 软件测试 网络主机 网站管理 网站测试 XML

项目ID: #2664925

关于项目

1个方案 远程项目 活跃的Aug 18, 2011

1 威客就此工作平均出价 $170

deltatechnologix

See private message.

$170 USD 在21天内
(24条评论)
5.3