个人中心
gpt4 book ai didi

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

转载 作者：太空宇宙 更新时间：2023-11-04 15:05:05 24 4
gpt4 key购买 nike

我想包括 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>

当我在没有 jsf 的清晰 html 页面上测试该组件时，我发现我必须包含才能使其工作:

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

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

最佳答案

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

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

关于html - Twitter Bootstrap 和 Jsf - 如何集成 Fuel UX wizard.js，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15981882/

24 4 0
文章推荐： html - 将子元素停靠在父元素的所有 Angular 落
文章推荐： html - 如何在页面上居中温泉 ui 按钮栏
文章推荐： html - 垂直和水平居中div中的图像
文章推荐： css - 带显示的中心固定宽度/液体 css 布局 : table attribute and min/max widths
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com