jQuery Forum

Hi Guys,

We are running a (desktop) e-commerce site which is pretty large (in terms of coding and different sections), on the Zend Framework. We are now planning a mobile-optimised website, and we are researching into Jquery Mobile.
 
We are trying two things to decide which path we should choose.
1) Using a Jquery mobile theme to build our HTML, and then customise it from there.
OR
2) Build our own theme.
 
At the moment I'm experimenting with 2) building our own theme.
 
I found issues on customizing the pages (CSS). Please could you answer my following questions. I'm following the guide on the Jquery mobile site.
 
1) Is it mandatory to inlclude default jquery css (http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css)?
 
         OR
 
2) Is it possible to update the default jquery css with our custom styles?
 
Another issue, I've created the file using the below code,
 
<!-- section A1 stars here -->
            <div data-role="collapsible" data-inset="false" data-expanded-icon="arrow-d" data-collapsed-icon="arrow-r" data-iconpos="right" data-corners="false" data-theme="inner_menu">
                <h3 class="inner_menu_heading">Section A1</h3>
       
                <div data-role="collapsible-set" data-inset="false" data-icon="arrow-r" data-iconpos="right" data-corners="false">
                    <div data-role="collapsible" data-collapsed="false">
                        <h3 class="sub_menu_heading">Section A1.1</h3>
                        <p>I'm the collapsible set content for section 1.</p>
                    </div>
                   
                    <div data-role="collapsible" data-collapsed="false">
                        <h3 class="sub_menu_heading">Section A1.2</h3>
                        <p>I'm the collapsible set content for section 2.</p>
                    </div>
                </div>
            <!-- section A1 end here-->
            </div>
 
However after the page loads, it's giving additional tags. Please see the code below.
 
<div class="ui-collapsible-content" aria-hidden="false">
    <div data-corners="false" data-iconpos="right" data-icon="arrow-r" data-inset="false" data-role="collapsible-set" class="ui-collapsible-set">
                    <div data-collapsed="false" data-role="collapsible" class="ui-collapsible ui-collapsible-collapsed">
                        <h3 class="sub_menu_heading ui-collapsible-heading ui-collapsible-heading-collapsed ui-li-heading">
                        <a class="ui-collapsible-heading-toggle ui-btn ui-btn-icon-right ui-btn-up-c" href="#" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="plus" data-iconpos="right" data-theme="c">
                        <span class="ui-btn-inner"><span class="ui-btn-text">Section A1.1<span class="ui-collapsible-heading-status"> click to expand contents</span></span>
                        <span class="ui-icon ui-icon-shadow ui-icon-plus">&nbsp;</span></span></a></h3>
                        <div class="ui-collapsible-content ui-collapsible-content-collapsed" aria-hidden="true">
                            <p class="ui-li-desc">I'm the collapsible set content for section 1.</p>
                        </div>
                    </div>
                   
                    <div data-collapsed="false" data-role="collapsible" class="ui-collapsible ui-collapsible-collapsed">
                        <h3 class="sub_menu_heading ui-collapsible-heading ui-li-heading ui-collapsible-heading-collapsed">
                        <a class="ui-collapsible-heading-toggle ui-btn ui-btn-icon-right ui-focus ui-btn-up-c" href="#" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="plus" data-iconpos="right" data-theme="c">
                        <span class="ui-btn-inner"><span class="ui-btn-text">Section A1.2<span class="ui-collapsible-heading-status"> click to expand contents</span></span>
                        <span class="ui-icon ui-icon-shadow ui-icon-plus">&nbsp;</span></span></a></h3>
                        <div class="ui-collapsible-content ui-collapsible-content-collapsed" aria-hidden="true">
                            <p class="ui-li-desc">I'm the collapsible set content for section 2.</p>
                        </div>
                    </div>
                </div>
<!-- section A1 end here-->
</div>
 
These additional tags (such as the new <a> and <span> tags after the <h3>) are causing style issues. Is it possible to remove / customize these tags in order to avoid the issues? 
 
OR
 
since I need to include the jquery.min CSS file, shall I just keep the jquery default CSS files and create an override CSS file for customization?
 
OR
 
shall I make my OWN CSS file, copy the normal jquery CSS and then change it on my own? Therefore I have one CSS file total.
 
Please Help/advise me to solve the above problem.
 
 
Thanks,
Thushanth