Modal markup

<div class="modal hide fade" id="myModal">
    <div class="modal-header">
        <button class="close" data-dismiss="modal">×</button>
        <h3>Modal header</h3>
    </div>
    <div class="modal-body">
        <p>One fine body…</p>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn">Close</a>
        <a href="#" class="btn btn-primary">Save changes</a>
    </div>
</div>

Trigger

<a class="btn" data-toggle="modal" href="#myModal" >Launch Modal</a>

If you click now the trigger element, the modal will show. This is very useful for creating confirmation dialogs, e.g. if you want to protect delete actions against accidental clicks. Since you may need confirmation dialogs on different places on your site, it’s useful to put it into a global JavaScript file:

var MyDialogs={
    loadConfirmationModal:function(modalId, confirmURL, caption, body){
			var $modal=jQuery('#'+modalId);
			if($modal.size() === 0){

				var modalString='<div id="'+modalId+'" class="modal hide fade">'+
					'<div class="modal-header">'+
						'<button class="close" data-dismiss="modal">×</button>'+
						'<h3>'+caption+'</h3>'+
					'</div>'+
					'<div class="modal-body">'+body+
						'</div>'+
						'<div class="modal-footer">'+
							'<button id="cancel" class="btn" data-dismiss="modal" type="button" name="cancel">Cancel</button>'+
							'<a id="submit" class="btn btn-danger" href="'+confirmURL+'">Delete</a>'+
						'</div>'+
				'</div>';

				$modal=jQuery(modalString);

			}

			$modal.modal('show');
                        return false;
		}

};

Consider that you have a link on your site that is ought to delete a post or similar. The link has an URL like http://somedomain.com/post/5/delete. Without confirmation, it would look like this:

    <a class="btn" href="http://somedomain.com/post/5/delete">delete</a>

To use a confirmation dialog, you just need to add the following:

    <a class="btn" href="#" onclick="return MyDialogs.loadConfirmationModal('my_modal_id', 'http://somedomain.com/post/5/delete', 'This is the caption of the confirmation dialog', 'This is the text of the confirmation dialog');">delete</a>

Without adding the markup to each single page, you can use confirmation modal dialogs everywhere on your site.

Zend Forms create an own markup when they are rendered – and the default markup that is created by Zend Forms is not compatible with the Twitter Boostrap markup for forms. Zend Forms is using so-called decorators to define the markup of the form, finally decorators describe how the form elements are rendered. There are many standard decorators shipped with Zend – and there are plenty ways to customize them to make them more and less compatible with the Bootrap markup.

After trying around with the standard decorators, i realized that especially the nesting of elements inside forms, like error messages, descriptions and labels, create trouble. That’s why i decided to create an own decorator for Zend Form to use with Twitter Bootstrap.

1. Create a new PHP file called Bootstrap.php at /application/forms/decorator/
2. Paste the code below into the new file
3. Add the decorator to your form definition inside the Zend Form class

Bootstrap.php

<?php
    class Application_Form_Decorator_Bootstrap extends Zend_Form_Decorator_Abstract
    {
    public function buildLabel()
    {
        $element = $this->getElement();
        $label = $element->getLabel();
        if ($translator = $element->getTranslator()) {
            $label = $translator->translate($label);
        }
        if ($element->isRequired()) {
       //     $label .= '*';
        }
       // $label .= ':';
        return $element->getView()
                       ->formLabel($element->getName(), $label, array('class'=>'control-label'));
    }

    public function buildInput()
    {
        $element = $this->getElement();
        $helper  = $element->helper;
        return $element->getView()->$helper(
            $element->getName(),
            $element->getValue(),
            $element->getAttribs(),
            $element->options
        );
    }

    public function buildErrors()
    {
        $element  = $this->getElement();
        $messages = $element->getMessages();
        if (empty($messages)) {
            return '';
        }var_dump($messages);
        return '<div class="help-block">' .
               $element->getView()->formErrors($messages) . '</div>';
    }

    public function buildDescription()
    {
        $element = $this->getElement();
        $desc    = $element->getDescription();
        if (empty($desc)) {
            return '';
        }
        return '<div class="help-block">' . $desc . '</div>';
    }

    	public function render($content)
        {
        	$element  = $this->getElement();

        	if (!$element instanceof Zend_Form_Element) {
	            return $content;
	        }
	        if (null === $element->getView()) {
	            return $content;
	        }

	        $separator = $this->getSeparator();
	        $placement = $this->getPlacement();
	        $label     = $this->buildLabel();
	        $input     = $this->buildInput();
	        $errors    = $this->buildErrors();
	        $desc      = $this->buildDescription(); 

        	$messages = $element->getMessages();

        	$elementClasses='control-group';
	        if(!empty($messages)){
	        	$elementClasses.=' error';
	        }
        	return '<div class="'.$elementClasses.'">'.$label.'<div class="controls">'.$input.$desc.$errors.'</div></div>';
        }
    }
 ?>

Using the custom decorator inside a Zend form could look like this:

MyForm.php

<?php
class Application_Form_MyForm extends Zend_Form
{
    public function init()
    {
    	$this->setAttrib('class', 'form-inline');
$this->addElement('text', 'username', array(
            'filters'    => array('StringTrim', 'StringToLower'),
            'validators' => array(
                'Alpha',
                array('StringLength', false, array(3, 20)),
            ),
            'required'   => true,
            'placeholder'=> 'Username',
            'decorators' => array( new Application_Form_Decorator_Bootstrap() ),
        ));

        $this->addElement('password', 'password', array(
            'filters'    => array('StringTrim'),
            'validators' => array(
                'Alnum',
                array('StringLength', false, array(6, 20)),
            ),
            'required'   => true,
            'placeholder'=> 'Password',
            'decorators' => array( new Application_Form_Decorator_Bootstrap() ),
        ));

        //Submit Button
        $submit = new Zend_Form_Element_Button('submit');
		$submit ->setlabel('Anmelden')
         		->setAttrib('type', 'submit')
         		->setAttrib('class', 'btn btn-primary');
		// buttons do not need labels
		$submit->setDecorators(array(
   			array('ViewHelper'),
   			array('Description'),
   			array('HtmlTag', array('tag' => 'div', 'class'=>'control-group')),
		));

		$this->addElement($submit);

		$this->addDisplayGroup(array('username', 'password', 'submit'), 'groups',
								array("legend" => "LOGIN",

								"decorators" => array('FormElements',  'Fieldset')

								));

        // We want to display a 'failed authentication' message if necessary;
        // we'll do that with the form 'description', so we need to add that
        // decorator.
        $this->setDecorators(array(
            'FormElements',
             array('Description', array('placement' => 'prepend')),

            'Form'
        ));

    }
}

First add the requireds scripts to your document:

<script src="jquery-1.4.2.min.js"></script>
<script src="Three.js"></script>
<script src="helvetiker_regular.typeface.js"></script>

var texts = null;
var container;

var camera, scene, renderer;

var text, plane;

textOffsetY=-190;
var maxLineLength = 32;

var canvasWidth = window.innerWidth;
var canvasHeight = window.innerHeight;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
var textMaterial;
var nr = 0;

jQuery.ajax({
    url: 'text.txt',
    success: function(result){
       texts = loadText(result);
       init();
       animate();
    }
});

function init(){
                container = document.createElement('div');
                document.getElementById('canvas_container').appendChild(container);

                camera = new THREE.PerspectiveCamera(32, canvasWidth / canvasHeight, 0.1, 1500);
                camera.position.y = 0;
                camera.position.z = 550;

                scene = new THREE.Scene();

                textMaterial = new THREE.MeshBasicMaterial({
                    color: 0x8A6F17,
                    overdraw: true
                });

                var worldImage=     new THREE.MeshLambertMaterial({
                       map: THREE.ImageUtils.loadTexture("./symbol.png")
                });

                var cube = new THREE.Mesh(new THREE.CubeGeometry(120, 120, 0.1), worldImage);
                cube.overdraw = true;

                parent = new THREE.Object3D();
                for (var i = 0; i < texts.length; i++) {
                    addTextLine(parent, texts[i], textOffsetY);
                }
                cube.position.y = textOffsetY - nr * 24 - 60
                parent.add(cube);

                parent.rotation.x = -Math.PI / 3;
                parent.position.y = 0;
                scene.add(parent);
                var ambientLight = new THREE.AmbientLight(0x555555);
                scene.add(ambientLight);

                // add directional light source
                var directionalLight = new THREE.DirectionalLight(0xffffff);
                directionalLight.position.set(1, 1, 1).normalize();
                scene.add(directionalLight);
                renderer = new THREE.WebGLRenderer({
                    antialias: true
                });
                renderer.setSize(canvasWidth, canvasHeight);

                container.appendChild(renderer.domElement);
            }

            function loadText(source){
                var texts = new Array();
                source = source.replace("n", " n ");
                var words = source.split(' ');
                var i = 0;
                var currentLine = '';

                while (words.length > 0) {
                    if (currentLine.length < maxLineLength) {
                        var theWord = words.shift();
                        if (theWord == "n") {
                            if (currentLine != '')
                                texts.push(currentLine);
                            currentLine = '';
                            texts.push('');
                        }
                        else
                            currentLine += ('' !== currentLine ? ' ' : '') + theWord.trim();
                    }
                    else {
                        texts.push(currentLine);
                        currentLine = '';
                    }
                }
                if (currentLine != '')
                    texts.push(currentLine);
                return texts;
            }

            function addTextLine(parent, textLine, offset){
                if (textLine == '') {
                    nr++;
                    return;
                }
                var text3d = new THREE.TextGeometry(textLine, {

                    size: 12,
                    height: 1,
                    curveSegments: 2,
                    font: "helvetiker"

                });

                text3d.computeBoundingBox();
                var centerOffset = -0.5 * (text3d.boundingBox.max.x - text3d.boundingBox.min.x);

                var text = new THREE.Mesh(text3d, textMaterial);

                text.doubleSided = false;

                text.position.x = centerOffset;
                text.position.y = offset - nr * 24;
                text.position.z = 0;

                text.rotation.x = 0; //0;
                text.rotation.y = Math.PI * 2;
                text.rotation.z = 0; //Math.PI / 2;
                parent.add(text);
                nr++;
            }

            function animate(){
                requestAnimationFrame(animate);
                render();
            }

            function render(){
                parent.position.y += 0.073;
                parent.position.z -= 0.125;
                renderer.render(scene, camera);
            }

Now include JQuery 1.4.2+ and the mf__multifader JavaScript and CSS to the <head>
section of your HTML page.

<script type="text/JavaScript" src="jquery-1.4.2.min.js"></script>
<script type="text/JavaScript" src="mf__multifader_1_0.js"></script>
<link rel="stylesheet" href="mf__multifader.css" type="text/css" />

Add some faders to the <body> section of your HTML page. Each fader
must be a div of the CSS class mf__fader and must contain at least one
div of CSS class mf__frame. Finally add a div of class mf__controls if you
want to use controls in the fader instance.

<div id="any_fader_id_1" class="mf__fader">
    <div class="mf__frame frame_1"><div>Fader 1 Frame 1</div></div>
    <div class="mf__frame frame_2"><div>Fader 1 Frame 2</div></div>
    <div class="mf__frame frame_3"><div>Fader 1 Frame 3</div></div>
    <div class="mf__frame frame_4"><div>Fader 1 Frame 4</div></div>
    <div class="mf__controls"></div>
</div>

........

<div id="any_fader_id_6" class="mf__fader">
    <div class="mf__frame frame_1"><div>Fader 4 Frame 1</div></div>
    <div class="mf__frame frame_2"><div>Fader 4 Frame 2</div></div>
    <div class="mf__frame frame_3"><div>Fader 4 Frame 3</div></div>
    <div class="mf__frame frame_4"><div>Fader 4 Frame 4</div></div>
    <div class="mf__controls"></div>
</div>

Initialise the faders:

jQuery(document).ready(function() {
    var fader1=mf__create_fader('any_fader_id_1', 8500, 500, true, true);
    fader1.init();
    fader1.startStop();
    mf__create_fader('any_fader_id_2', 2500, 600, true, true).init();
    mf__create_fader('any_fader_id_3', 6500, 350, false, false).init();
    mf__create_fader('any_fader_id_4', 3000, 900, false, false).init();
    mf__create_fader('any_fader_id_5', 500, 200, true, false).init();
    mf__create_fader('any_fader_id_6', 1000, 100, false, false).init();
});

This is how it looks:

Im folgenden Beispiel gehe ich davon aus, dass das Archiv in einen Ordner namens three_js extrahiert wurde.

Für das einfache Beispiel müssen nur 2 JavaScript Dateien in den <head> Bereich der HTML Datei einbgebunden werden:

<script src="three_js/build/Three.js"></script>
<script src="three_js/examples/js/RequestAnimationFrame.js"></script>

Das eigentliche Script zum Erzeugen der 3d Szene muss in den <body> Bereich der HTML Datei eingefügt werden. Wir springen nun direkt in das Skript:

<script>
    //Variablen inititalisieren
    var camera, scene, renderer,
    geometry, material, mesh;

    //Daten initialisieren und Animation starten
    init();
    animate();

    function init() {
        //Erzeugen einer Szene. Die Szene ist sozusagen die Bühne die
        //alle dargestellten Elemente enthält
        scene = new THREE.Scene();

        //Erzeugen einer Kamera. Die Kamera sorgt für die perspektivische
        //Darstellung der Szene. Man benötigt mindestens eine Kamera.
        camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
        camera.position.z = 1000;

        //Hinzufügen der Kamera zur Szene
        scene.add( camera );

        //Erzeugung der Gemotrie des Würfels
        geometry = new THREE.CubeGeometry( 200, 200, 200 );
        //Erzeugung des Materials/Oberfläche des Würfels
        material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );

        //Erzeugung des Würfels aus Geometrie und Material
        mesh = new THREE.Mesh( geometry, material );
        //Hinzufügen des Würfels zur Szene
        scene.add( mesh );

        //Erzeugung eines Renderers. Der Renderer produziert letztendlich alles
        //sichtbare. Hier wird ein CanvasRenderer verwendet, der ein canvas element
        //zur Darstellung verwendet.
        renderer = new THREE.CanvasRenderer();
        //Grösse des Renderers auf die Fenstergrösse des Browsers setzen
        renderer.setSize( window.innerWidth, window.innerHeight );

        //Erzeugtes Canvas Element in den body einfügen.
        document.body.appendChild( renderer.domElement );

    }

    function animate() {

        // Include examples/js/RequestAnimationFrame.js for cross-browser compatibility.

        //Wir wollen einen Loop erzeugen, daher rufen wir die Funktion
        //requestAnimationFrame auf. Dadurch wird für jedes Frame erneut die Funktion
        //animate aufgerufen, die dann die Funktion render aufruft.
        requestAnimationFrame( animate );
        render();

    }

    function render() {
        //Wir ändern für jedes Frame die Drehung des Würfels ein wenig
        mesh.rotation.x += 0.01;
        mesh.rotation.y += 0.02;
        //Aktuelle Frame berechnen
        renderer.render( scene, camera );

    }

</script>

Das Script erzeugt einen 3 dimensionalen, sich drehenden Würfel. Wenn Sie diesen Artikel in einem WebGL fähigen browser betrachten, sollten Sie den Würfel in dem blauen Kasten sehen können: