Twitter Bootstrap和Jsf - 如何集成Fuel UX wizard.js

时间:2013-04-12 22:30:32

标签: html css jsf twitter-bootstrap fuelux

我想将fuelUx wizard包含到我的jsf / java项目中。但是,我很难将组件转换为jsf:

<!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"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.prime.com.tr/ui">

<h:head>
    <title>Title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="" />
    <meta name="author" content="" />

    <!-- Le styles -->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
    <link href="css/bootstrap-responsive.css" rel="stylesheet"
        type="text/css" />
    <link href="css/override.css" rel="stylesheet" type="text/css" />
    <link href="dist/css/fuelux.css" rel="stylesheet" type="text/css" />
    <link href="dist/css/fuelux-responsive.css" rel="stylesheet"
        type="text/css" />
    <link href="dist/css/fuelux.min.css" rel="stylesheet" type="text/css" />
    <link href="dist/css/fuelux-responsive.min.css" rel="stylesheet"
        type="text/css" />
    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

    <!-- Le fav and touch icons
<link rel="shortcut icon" href="../assets/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
-->

    <h:outputScript name="js/require.js" />
    <script>
//<![CDATA[
        requirejs.config({
            paths: {
                'jquery': 'lib/jquery',
                'underscore': 'http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min',
                'bootstrap': 'lib/bootstrap/js',
                'fuelux': 'src'
            }
        });

        require(['jquery', 'sample/data', 'sample/datasource', 'sample/datasourceTree', 'fuelux/all'], function ($, sampleData, StaticDataSource, DataSourceTree) {

            // WIZARD
            $('#MyWizard').on('change', function(e, data) {
                console.log('change');
                if(data.step===3 && data.direction==='next') {
                    // return e.preventDefault();
                }
            });
            $('#MyWizard').on('changed', function(e, data) {
                console.log('changed');
            });
            $('#MyWizard').on('finished', function(e, data) {
                console.log('finished');
            });
            $('#btnWizardPrev').on('click', function() {
                $('#MyWizard').wizard('previous');
            });
            $('#btnWizardNext').on('click', function() {
                $('#MyWizard').wizard('next','foo');
            });
            $('#btnWizardStep').on('click', function() {
                var item = $('#MyWizard').wizard('selectedItem');
                console.log(item.step);
            });
            $('#MyWizard').on('stepclick', function(e, data) {
                console.log('step' + data.step + ' clicked');
                if(data.step===1) {
                    // return e.preventDefault();
                }
            });

        });
        //]]>
    </script>

</h:head>
<h:body>

    <div class="container">

        <!-- WIZARD -->
        <div>
            <div id="MyWizard" class="wizard">
                <ul class="steps">
                    <li data-target="#step1" class="active"><span
                        class="badge badge-info">1</span>Step 1<span class="chevron"></span></li>
                    <li data-target="#step2"><span class="badge">2</span>Step 2<span
                        class="chevron"></span></li>
                    <li data-target="#step3"><span class="badge">3</span>Step 3<span
                        class="chevron"></span></li>
                    <li data-target="#step4"><span class="badge">4</span>Step 4<span
                        class="chevron"></span></li>
                    <li data-target="#step5"><span class="badge">5</span>Step 5<span
                        class="chevron"></span></li>
                </ul>
                <div class="actions">
                    <button class="btn btn-mini btn-prev">
                        <i class="icon-arrow-left"></i>Prev
                    </button>
                    <button class="btn btn-mini btn-next" data-last="Finish">
                        Next<i class="icon-arrow-right"></i>
                    </button>
                </div>
            </div>
            <div class="step-content">
                <div class="step-pane active" id="step1">This is step 1</div>
                <div class="step-pane" id="step2">This is step 2</div>
                <div class="step-pane" id="step3">This is step 3</div>
                <div class="step-pane" id="step4">This is step 4</div>
                <div class="step-pane" id="step5">This is step 5</div>
            </div>

            <h:button type="button" class="btn btn-mini" id="btnWizardPrev"
                value="prev" />
            <h:button type="button" class="btn btn-mini" id="btnWizardNext"
                value="next" />
            <h:button type="button" class="btn btn-mini" id="btnWizardStep"
                value="current step" />
        </div>

    </div>

    <!--/.fluid-container-->

    <!-- Le javascript
================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <h:outputScript name="js/jquery-1.7.2.min.js" />
    <h:outputScript name="js/bootstrap.min.js" />
    <h:outputScript name="js/jquery.dataTables.min.js" />
    <h:outputScript name="js/bootstrap.js" />


</h:body>
</html>

当我在一个清晰的html页面上测试组件时,没有jsf,我看到我必须包含它才能使它工作:

<html  lang="en" class="fuelux">

但是,我认为这在jsf中是不可能的。那么,如何在jsf中实现组件呢?感谢您的回答!

1 个答案:

答案 0 :(得分:1)

如果您无法在标记中包含该类,可以尝试使用jQuery执行以下操作:

$('html').addClass('fuelux');