BT

New Early adopter or innovator? InfoQ has been working on some new features for you. Learn more

Fluqi Makes JQuery Simpler

| by Roopesh Shenoy on Feb 14, 2012. Estimated reading time: 1 minute |

Fluqi provides a generic Widget builder for JQuery that allows you to visually create and customize JQuery UI widgets and then use the generated markup and JavaScript in your own application. It also provides a .NET API, in form of a fluent interface to use and configure JQuery UI controls in your server side code.

The Fluqi widget builder shows you a preview of your configured widget and generates the corresponding C# and HTML+JavaScript code. You can use either if you are using ASP.NET, or you can just use the latter if you are using a different stack. 

A sample of how the ASP.NET code would look with the markup –

<%
var ac = Html.CreateAccordion("ac")
    .Options
        .SetCollapsible(true)
    .Finish()
    .Events
        .SetCreateEvent("return createEvent(event, ui);")
        .SetChangeEvent("return changeEvent(event, ui);")
        .SetChangeStartEvent("return changeStartEvent(event, ui);")
    .Finish()
    .Panels
        .Add("My Panel 1")
        .Add("My Panel 2", true)
        .Add("My Panel 3")
    .Finish()
;
%>
 
<%using (ac.RenderContainer()) {%>
    <%using (ac.Panels.RenderNextPane()) {%>
        <p>Proin ...</p>
    <%}%>
    <%using (ac.Panels.RenderNextPane()) {%>
        <p>Morbi ...</p>
    <%}%>
    <%using (ac.Panels.RenderNextPane()) {%>
        <p>Mauris ...</p>
    <%}%>
<%}%>

The server side code generates the HTML and JavaScript at run-time, with an added bonus that Developers can also bunch together the generated JavaScript for all the widgets created in a single file download (using another open source library called SquishIt).

At its core, Fluqi is an open source library built on .NET, with C# classes corresponding to JQuery widgets – Accordion, AutoComplete, DatePicker, Dialog, ProgressBar, PushButton, Slider and Tab – along with rendering classes to generate markup and JavaScript for the corresponding JQuery widget. These classes are used by the Fluqi website (used to visually configure JQuery widgets) and also exposed as the .NET API.

Fluqi is available as a Nuget Package for usage with both ASP.NET MVC and Web Forms.

Rate this Article

Adoption Stage
Style

Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Tell us what you think

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

confusion by Georgii D-v

Please correct: should be 'jQuery UI widgets', not 'jQuery widgets'. jQuery UI is a separate project.

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

1 Discuss

Login to InfoQ to interact with what matters most to you.


Recover your password...

Follow

Follow your favorite topics and editors

Quick overview of most important highlights in the industry and on the site.

Like

More signal, less noise

Build your own feed by choosing topics you want to read about and editors you want to hear from.

Notifications

Stay up-to-date

Set up your notifications and don't miss out on content that matters to you

BT