Showing posts with label Accordion. Show all posts
Showing posts with label Accordion. Show all posts

Tuesday, June 2, 2015

jQueryMobile Accordion and Nested Collapsibles For Android and BlackBerry

Here we see Step by step How to create a jQueryMobile Accordion and Collapsibles For Android and BlackBerry
In this tutorial we build in 15 minutes a complete jQuery Mobile App , with Collapsible content and an Accordion, for use on all kind of Mobile screens :iPhone, Nexus , Acer , BlackBerry, Nokia,  and more...
This Mobile will look like this:
jQueryMobile Accordion and Nested Collapsibles For Android and BlackBerry

jQueryMobile Accordion and Nested Collapsibles For Android and BlackBerry 1



And this is the display on an emulator:
jQueryMobile Accordion and Nested Collapsibles For Android and BlackBerry 2



How to create a jQueryMobile Accordion and Nested Collapsibles For Android and BlackBerry



Since for this post we use the jQuery Mobile , which needs the  jQuery Frameworks,  enter http://jquerymobile.com/ and the  jQuery web site , to get the latest versions of the files on CDN  . We  will also be using a Mobile Emulator, therefore  please refer to this tutorial on installing the Ripple Emulator.
The basic   "First jQueryMobile App" explains the setup of the frameworks and emulator more in detail. Then add them at the Head of the HTML5 file:
jQueryMobile Accordion and Nested Collapsibles For Android and BlackBerry 3


Create a Page with a Header including a NavBar , using data-role="page" and data-role="header" fixed :
jQueryMobile Accordion and Nested Collapsibles For Android and BlackBerry 4



1) Collapsible Content with Nested collapsible block:


Now we create a Collapsible content using data-role="collapsible" with a nested collapsible block inside it:
jQueryMobile Accordion and Nested Collapsibles For Android and BlackBerry 5




2) Collapsible Accordion:


Now we create an Accordion using the directive data-role=collapsibleset, wrapping several collapsible block defined as we did before, as follows:


jQueryMobile Accordion and Nested Collapsibles For Android and BlackBerry 6


Just for the sake of the example, we add a Form in the second collapsible block:

jQueryMobile Accordion and Nested Collapsibles For Android

That's all. Just for completing a Mobile App, we add a Footer with a NavBar as follows:
jQueryMobile Accordion and Nested Collapsibles



We customized this Mobile using some style in a CSS3 file as follows:

jQueryMobile Accordion and Collapsibles

And this is how this jQuery Mobile App looks like:

jQueryMobile Accordion

jQueryMobile Accordion and Nested Collapsibles For Android and BlackBerry

jQueryMobile

jQueryMobile Accordion and Nested Collapsibles For Android and BlackBerry

Accordion and Nested Collapsibles For Android and BlackBerry



Hoping this article was helpful...
Happy programming.....

      by Carmel Schvartzman
כתב: כרמל שוורצמן




Posted by No comments:
Labels: , ,

Wednesday, June 18, 2014

Step by step how to use JQueryUI sortable Tabs, Sortable grid and Accordion in an Asp.Net MVC application

       By Carmel Shvartzman

In this tutorial we'll learn how to use JQueryUI sortable Tabs, Sortable grid and sortable Accordion in an Asp.Net MVC application. 
For this tutorial, we'll  need to use several open source JQueryUI Widgets : the sortable Tabs, Sortable grid and sortable Accordion .
Then, we'll create an empty MVC application, and we will use those Widgets , showing as follows:

Your application must have the jQuery scripts and styles libraries installed. We'll use some of these files. But first , we need to update the javascript jQuery files in our project, because the files which comes with Visual Studio will be obsolete. Open the NuGet utility:


Make a search for the JQuery package and install it:


Do the same for the JQuery UI package:


Now open the Theme's folder we downloaded and copy the entire theme which is inside the "development-bundle" folder:



Paste the folder inside the "themes" folder inside your project:


It will show as follows:


We'll make use of the .CSS file jquery-ui.css. Open the BundleConfig file:



Take a look at these ScriptBundles, because we'll use them inside our app:



Replace the "base" folder by the "le-frog" folder, and add the jquery-ui.css file to the script:


Next, we'll call the bundles from the _Layout file:


Locate the Render "jquery" section and cut it:


Locate the render at the <head> section:


Paste there the "jquery" section , and add the "jqueryui" bundle:



We're done with the javascript and the style we'll need.

Then, to get the Widgets, we need to browse to the jQueryUI web site, to get the widgets. Go to the "Accordion" widget, open the View Source and get the <script> and the Accordion <div> :


Do the same with the Tabs: locate the <script> and the <div> :



Same thing with the "Sortable"


Now that you located all widgets, let's create a Controller and a View to hold the markup :





Then add the widgets to your View, in some way in which you encapsulate one inside the other:


Now create a .js file to hold the scripts (again, COPY-PASTE all scripts from the jQueryUI web site) :


You could need a CSS stylesheet file to keep the style :

Build and run the app, and check the Sortable:



Then you could check the Accordion :


And also the Tabs widget :


That's all!! 
In this tutorial we've learn how to use JQueryUI sortable Tabs, Sortable grid and sortable Accordion in an Asp.Net MVC application. 

Happy programming.....
כתב: כרמל שוורצמן



Posted by No comments:
Labels: , , ,

Thursday, June 5, 2014

Step by Step how to create a WebGrid with Grouping functionality

In this tutorial we'll learn how to create a WebGrid with Grouping support and JQuery UI Accordion enhancement. The Grid will expose data dynamically loaded from database and sent by the Action method from the web server, and will offer Grouping functionality in the shape of a JQueryUI Accordion.
We'll want to create a webgrid with Grouping functionality , showing as follows:



Let's say you have two related tables, connected by a ONE-TO-MANY relationship as follows:

For the sake of Grouping, we'll create an "Intersection Entity" that represents an INNER JOIN between the tables:
As you see, the new Entity just joins the records of the 2 tables. After you built that class in the Model's folder, create a new Controller:




Inside the Controller, code an Action method which JOINS the two tables in an anonymous class:

Then, for each record you fetch, create an Intersection Entity record as well:

public ActionResult Index()
        {
            List<PostComments> comments = new List<PostComments>();
            using (BlogEntities ctx = new BlogEntities())
            {
                var list = (from p in ctx.Blogs
                            join c in ctx.Comments
                            on p.BlogID equals c.BlogID
                            select new
                            {
                                p.BlogID,
                                PostTitle = p.Title,
                                p.MainPicture,
                                c.CommentID,
                                CommentTitle = c.Title,
                                c.Text
                            }
                        ).ToList();
                foreach (var item in list)
                {
                    comments.Add(new PostComments(item.BlogID, item.PostTitle,
                        item.MainPicture, item.CommentID, item.CommentTitle, item.Text));
                }
            }
            return View(comments);
        }
Next, add a View to display the List<>:



Inside the View, add a <div> and an FOREACH clause which runs over a GROUP BY some relevant DISTINCT field, such as the Title :

As you can see, for EACH different Post, we create a <TABLE> with the Title and the Picture of it. And then, we add ANOTHER bucle which appends a new row to the table, for each Comment the Post has:

The whole Grid markup should appears as follows:

<div id="divPosts">
    @{
        foreach (var post in Model.GroupBy(p => p.PostTitle).Select(p => p))
        {
        <h1>@post.Key </h1>
        <div>
            <table>
                <tr>
                    <th>Title </th>
                    <th>Comment </th>
                    <th><img src="Images/@post.First().Image" /></th>
                   
                </tr>
                @foreach (var comment in @post)
                {
                    <tr>
                        <td>
                            @Html.DisplayFor(modelItem => comment.CommentTitle)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => comment.CommentText)
                        </td>                      
                        <td>
                            @Html.ActionLink("Edit", "Edit" )
                            @Html.ActionLink("Details", "Details" )
                            @Html.ActionLink("Delete", "Delete" )
                        </td>
                    </tr>
                }
            </table>
        </div>
        }
    }
</div>

 Now, as you can see, we put each GROUP inside a new <div> nested inside an outer <div>. This is for using the Accordion: add the following <script>:


<style>
    th {
        text-align: center;
    }
    td img, th img {
        width:100px;height:100px;
    }
</style>
<script>
    $(function () {
        $("#divPosts").accordion({
            heightStyle: "content"
        });
    });
</script>

Also, we'll need some CSS to properly display the data. We added an JQuery UI Theme to the bundles in the App_Start BundleConfig.cs file:


Of course, we load those CSS files and JQUERY scripts in our _Layout file:


Build and launch the web app, to see the following display:



The user can see the different Posts with its respective Comments, clicking the Accordion titles:





That's all!! 
In this tutorial we've learn how to create a WebGrid with Grouping functionality and JQuery UI Accordion enhancements.  

Happy programming.....
        By Carmel Schvartzman
כתב: כרמל שוורצמן

Posted by No comments:
Labels: , , , , , ,
Subscribe to: Posts (Atom)