Добавление вкладок в форму с помощью jQuery (cakephp 2.1)

Я отлично использую cakephp 2.1; Я хочу использовать jquery, чтобы моя форма была разделена на вкладки. Уже использовал jquery вне торта и заработал демо с вкладками. http://jqueryui.com/demos/tabs/
Я также сделал jquery доступным в cakephp из папки webroot и

ProjectsController.php

public $helpers = array('Js' => array('Jquery'));

add.ctp (в самой последней строке)

echo $this->Js->writeBuffer(); // Write cached scripts

Где и как я должен вызывать jquery, на мой взгляд? Я знаю, что должен использовать что-то похожее на демо:

<script>
        $(function() {
            $( "#tabs" ).tabs();
        });
    </script>

Но не знаю, где, на мой взгляд, это сделать и синтаксис.

Кто-нибудь может помочь?

Большое спасибо !

Это если мой полный add.ctp

<div class="projects form">
<?php echo $this->Form->create('Project');?>

<fieldset>
    <legend><?php echo __('Add Project'); ?></legend>
<?php
            $arr_pr_subject = Configure::read('AR_SUBJECT'); 
            $arr_pr_status = Configure::read('AR_STATUS'); 
            $arr_pr_payment = Configure::read('AR_PAYMENT'); 
            $arr_pr_country = Configure::read('AR_COUNTRY'); 
            echo $this->Form->input('name', array('label' => 'Name:'));
            echo $this->Form->input('pr_subject', array('label' => 'Subject:', 'options' => $arr_pr_subject));
            echo $this->Form->input('pr_country', array('label' => 'Country:', 'options' => $arr_pr_country));
            echo $this->Form->input('pr_number', array('label' => 'ASC Project Number:'));
            echo $this->Form->input('pr_status', array('label' => 'Status:', 'options' => $arr_pr_status));
            echo $this->Form->input('client_id', array('label' => 'Client:', 'options' => $clients));
            echo $this->Form->input('pr_client_number', array('label' => 'Client Project Number:'));
            echo $this->Form->input('exec_id', array('label' => 'Sales Executive:', 'options' => $execs));
            echo $this->Form->input('pr_start', array('label' => 'Est. Start Date:'));
            echo $this->Form->input('pr_end', array('label' => 'Est. End Date:'));
            echo $this->Form->input('pr_notes', array('label' => 'Notes:'));
            echo $this->Form->input('pr_payment', array('label' => 'Payment options:', 'options' => $arr_pr_payment));
?>
</fieldset>
<?php echo $this->Form->end(__('Submit'));?>
</div>
<?php
echo $this->Js->writeBuffer(); // Write cached scripts
?>

php jquery cakephp-2.1
person Carlos Garcia    schedule 09.05.2012    source источник

Ответы (1)


arrow_upward
2
arrow_downward

В вашем <head> включите jquery и jqueryui:

<script src="/js/path/to/jquery.js" type="text/javascript"></script>
<script src="/js/path/to/jqueryui.js" type="text/javascript"></script>

Затем прямо под ним включите отдельный файл js, чтобы сохранить весь код.

<script src="/js/myscripts.js" type="text/javascript"></script>

В этом файле (myscripts.js) введите свой код jQuery:

$(function() {
  $( "#tabs" ).tabs();
});

Затем структурируйте ввод формы в соответствии с синтаксисом вкладок jQuery.

<form action="...">
<div id="tabs">
  <ul>
    <li><a href="#tab1">Tab 1</a></li>
    <li><a href="#tab2">Tab 2</a></li>
  </ul>
  <div id="tab1">
    <!-- Tab 1 inputs in here -->
  </div>
  <div id="tab2">
    <!-- Tab 2 inputs here -->
  </div>
</div>
</form>
person Kyle Macey    schedule 09.05.2012
comment
Спасибо Кайл! Однако ваш пример, похоже, не имеет отношения к cakephp. Я уже сделал вкладки jquery вне торта, как вы и предлагаете. Моя проблема в том, что я не знаю, как это сделать в моей форме cakehpp. Поможешь положить это на торт? Я следую инструкциям, чтобы подготовить cakephp к использованию jquery, просто не знаю, как на самом деле реализовать вкладки для моей формы. Большое спасибо Пожалуйста, помогите. Карлос - person Carlos Garcia; 10.05.2012
comment
Ах да, пожалуйста, прости меня. Я оставил PHP некоторое время назад и дал универсальный ответ. - person Kyle Macey; 10.05.2012
comment
Я думаю, что ответ очевиден даже без примера кода CakePHP. Просто разделите форму на разделы ‹div id=tabN›‹/div‹ (где N — число). Тогда все будет работать на вас. о, и не забудьте оставить кнопку «Отправить» вне вкладок. :) - person Borislav Sabev; 10.05.2012
comment
Спасибо Борислав; ты абсолютно прав. Вчера рано утром я не знал, как объединить это решение с моей формой cakephp. Затем он щелкнул меня, чтобы удалить весь контент из моего представления .ctp и создать форму из решения здесь, так же, как jqueryui .com/demos/tabs, и это отлично сработало, и, что очень важно, я лучше понял, как интегрировать вещи. Сегодня первым делом нужно было выбрать ответ Кайла с примечанием об интеграции для новичка в торте, как я. С уважением и благодарностью за большую помощь. - person Carlos Garcia; 10.05.2012