Click here to Skip to main content
15,884,738 members
Articles / Web Development / XHTML

Web App Common Tasks by jQuery

Rate me:
Please Sign up or sign in to vote.
4.96/5 (16 votes)
15 Sep 2010CDDL8 min read 64.5K   944   54  
Some client side common tasks implemented by a jQuery Plug in with demo source code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta content="en-us" http-equiv="Content-Language" />
    <meta name="robots" content="all" />
    <meta name="keywords" content="Common Browser Tasks by jQuery, Modesty (Qian) Zhang" />
    <meta name="description" content="Demo HTML that shows the functionalities of Common browser tasks" />
    <title>Web App Common Tasks by jQuery - Test Page</title>

    <link rel="stylesheet" type="text/css" href="css/layout/cbexp.layout.base.css" />
    <link rel="stylesheet" type="text/css" href="css/visual/cbexp.visual.base.css" />
    
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="js/jquery.cookie.min.js"></script>
    <script type="text/javascript" src="js/jquery.json-2.2.min.js"></script>
    <script type="text/javascript" src="js/jquery.cbexp.js"></script>
    <script type="text/javascript" src="js/cbexp.demo.js"></script>
    <script type="text/javascript">
    </script>
    
</head>
<body>
    <noscript>
        <h2>JavaScript is not enabled</h2>
        <p><em>You are receiving this message because you do not have JavaScript enabled.</em></p>
        <p>Many web pages require JavaScript to work properly. To make sure that JavaScript is enabled in your favorite internet browser, 
        <a href="http://www.bing.com/search?q=how+to+enable+javascript" target="_blank">check these settings</a>. </p>
    </noscript>
    <div id="noCookieContainer">
        <h2>Cookie is not enabled.</h2>
        <p><em>You are receiving this message because you do not have Cookie enabled.</em></p>
        <p>Many web pages require Cookie to work properly. To make sure that Cookie is enabled in your favorite internet browser, 
        <a href="http://www.bing.com/search?q=how+to+enable+cookie" target="_blank">check these settings</a>. </p>
	</div>
    <div id="pageContainer">
        <div id="pageHeader">
        </div>
        <div id="contentContainer">
            <div id="main_grid-nav">
				
            </div>

            <div id="main_grid-content">
                <div id="pageTitleSection">
                    <p class="pageTitle">Welcome to Web App Common Tasks Test Page</p>
                    <p class="pageSubTitle">Dynamically load HTML, CSS based on Query String</p>
                </div>

                <div class="userActionSection">
                    <p class="pageSubTitle">The following link will load all HTML and CSS</p>
	                <a class="pageSubTitleHint" href="cbexp_demo.html?headerfooter=both&theme=green">Load Header, Footer and Green Theme (Two Column Layout)</a>
	                <a class="pageSubTitleHint" href="cbexp_demo.html?headerfooter=both&theme=blue">Load Header, Footer and Blue Theme (Reversed Two Column Layout)</a>
                </div>

                <div class="userActionSection">
                    <div id="firstTimeUserSection">
                        <p class="pageSubTitle">Loading HTML (No Theme)</p>
                        <a class="pageSubTitleHint" href="cbexp_demo.html?headerfooter=header">Load Header Only</a>
                        <a class="pageSubTitleHint" href="cbexp_demo.html?headerfooter=footer">Load Footer Only</a>                                            
                        <a class="pageSubTitleHint" href="cbexp_demo.html?headerfooter=both">Load Header and Footer (no theme)</a>  
                    </div>

                    <div id="returingUserSection">
                        <p class="pageSubTitle">Loading CSS (No Header and Footer)</p>
                        <a class="pageSubTitleHint" href="cbexp_demo.html?theme=green">Green Theme (Two Column Layout)</a>
                        <a class="pageSubTitleHint" href="cbexp_demo.html?theme=blue">Blue Theme (Reversed Two Column Layout)</a>
                    </div>

                    <br class="clear" />
                </div>
            </div>
        </div>
        <br class="clear" />
        <div id="pageFooter">
        </div>
    </div>
</body>
</html>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Common Development and Distribution License (CDDL)


Written By
Technical Lead
United States United States
https://github.com/modesty

https://www.linkedin.com/in/modesty-zhang-9a43771

https://twitter.com/modestyqz

Comments and Discussions