function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
sundhar.mks1.3962649227519546E12sundhar.mks1.3962649227519546E12 

How to use the jQuorymobile to Vf page?

Hi,

I have tried the design look like Link: http://demos.jquerymobile.com/1.3.2/ to VF page, but css,jquery styles are not suported and. how to use the jquery properly in vf page. kindly refer the following code

VF page
============
<apex:page showheader="false" sidebar="false">
 <apex:form >  
        
   <apex:includeScript value="{!URLFOR($Resource.jqerymobile, '/js/jquery-1.4.5.min.js')}" />
    <apex:includeScript value="{!URLFOR($Resource.jqerymobile, '/js/jquery.mobile-1.4.5.min.js')}" />
    <apex:includeScript value="{!URLFOR($Resource.jqerymobile, '/js/jquery.mobile-1.4.5.js')}" />
    <apex:stylesheet value="{!URLFOR($Resource.jqerymobile, '/css/ui-lightness/jquery.mobile.external-png-1.4.5.custom.css')}"  />
    <apex:stylesheet value="{!URLFOR($Resource.jqerymobile, '/css/ui-lightness/jquery.mobile.external-png-1.4.5.min.custom.css')}"  />
    <apex:stylesheet value="{!URLFOR($Resource.jqerymobile, '/css/ui-lightness/jquery.mobile.icons-1.4.5custom.css')}"  />
    <apex:stylesheet value="{!URLFOR($Resource.jqerymobile, '/css/ui-lightness/jquery.mobile.icons-1.4.5.min.custom.css')}"  />
    <apex:stylesheet value="{!URLFOR($Resource.jqerymobile, '/css/ui-lightness/jquery.mobile.inline-png-1.4.5.custom.css')}"  />
    <apex:stylesheet value="{!URLFOR($Resource.jqerymobile, '/css/ui-lightness/jquery.mobile.inline-png-1.4.5.min.custom.css')}"  />
    <apex:stylesheet value="{!URLFOR($Resource.jqerymobile, '/css/ui-lightness/jquery.mobile.inline-svg-1.4.5.custom.css')}"  />
    <apex:stylesheet value="{!URLFOR($Resource.jqerymobile, '/css/ui-lightness/jquery.mobile.inline-svg-1.4.5.min.custom.css')}"  />
    <apex:stylesheet value="{!URLFOR($Resource.jqerymobile, '/css/ui-lightness/jquery.mobile.structure-1.4.5.custom.css')}"  />
    <apex:stylesheet value="{!URLFOR($Resource.jqerymobile, '/css/ui-lightness/jquery.mobile.structure-1.4.5.min.custom.css')}"  />
    <apex:stylesheet value="{!URLFOR($Resource.jqerymobile, '/css/ui-lightness/jquery.mobile.theme-1.4.5.custom.css')}"  />
    <apex:stylesheet value="{!URLFOR($Resource.jqerymobile, '/css/ui-lightness/jquery.mobile.theme-1.4.5.min.custom.css')}"  />
    <apex:stylesheet value="{!URLFOR($Resource.jqerymobile, '/css/ui-lightness/jquery-ui-1.4.5.custom.css')}"  />
    <apex:stylesheet value="{!URLFOR($Resource.jqerymobile, '/css/ui-lightness/jquery.mobile-1.4.5.mincustom.css')}"  />
    <apex:stylesheet value="{!URLFOR($Resource.jqerymobile, '/css/ui-lightness/jquery-ui-1.4.5.custom.css')}"  /> 
    
    <apex:tabPanel >
        <apex:tab label="Button">.
                    <div data-role="collapsible-set" data-theme="c" data-content-theme="d">
                
                <input type="Button" value="Anchor"/><br/>
                <br/>
                <input type="Button" value="Input"/><br/>
                <br/>
                <input type="Button" value="Submit"/><br/>
                <br/>
                <input type="Button" value="Reset"/><br/>
                <br/>
                <input type="Button" value="Dropdown"/><br/>
             
        </div><br/><br/>
     
        </apex:tab>
    </apex:tabPanel>
    
     <apex:tabPanel >
        <apex:tab label="Grid">
               <div class="ui-grid-a">
                    <div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:60px">Block A</div></div>
                    <div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:60px">Block B</div></div>
               </div>
               <fieldset class="ui-grid-a">
                    <div class="ui-block-a"><button type="submit" data-theme="c">Cancel</button></div>
                    <div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div>
               </fieldset>
               
        </apex:tab>
    </apex:tabPanel>
    
    <apex:tabPanel >
        <apex:tab label="Checkboxes">
             <fieldset data-role="controlgroup">
                    <legend>Select Option:</legend>
                    <input type="checkbox" name="checkbox-v-2a" id="checkbox-v-2a"/>
                    <label for="checkbox-v-2a">Open</label>
                    <input type="checkbox" name="checkbox-v-2b" id="checkbox-v-2b"/>
                    <label for="checkbox-v-2b">Inprogress</label>
                    <input type="checkbox" name="checkbox-v-2c" id="checkbox-v-2c"/>
                    <label for="checkbox-v-2c">Completed</label>
             </fieldset><br/><br/>            
        </apex:tab>
    </apex:tabPanel>

</apex:form>    
</apex:page>
KaranrajKaranraj
Try setting standardStyleSheet = false in the page header. If the problem still occurrs the righ click the page in the browser and go to the Inspect element and check is there any error message in the console window of your broswer. 
sundhar.mks1.3962649227519546E12sundhar.mks1.3962649227519546E12
Hi karanraj,

Yes, i am getting below error.
Error: Failed to load resource: the server responded with a status of 404 (Not Found)
KaranrajKaranraj
Then there no static resource in your org as mentioned structure in the visualforce page. Make sure that you have mentioned correct path of static resource file in the visualforce page. Check this link for referring static resource in visualforce page. https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_resources_reference.htm