Forums

I have create a glossary with Chrono Connectivity and jQuery - ListNav. And I've thought a little howto can surely
one or other help, my English is not perfect when I had serious errors in it, please edit me.

1. Create a form with Chrono Forms with a DB Connection.
<div class="form_item"> <div class="form_element cf_textbox"> <label class="cf_label" style="width: 150px;">Title</label> <input class="cf_inputbox required" maxlength="150" size="30" title="" id="text_0" name="text_0" type="text" /> </div> <div class="cfclear"> </div> </div> <div class="form_item"> <div class="form_element cf_textarea"> <label class="cf_label" style="width: 150px;"> Description</label> <textarea class="cf_inputbox required" rows="3" id="text_1" title="" cols="30" name="text_1"></textarea> </div> <div class="cfclear"> </div> </div> <div class="form_item"> <div class="form_element cf_button"> <input value="Submit" name="button_2" type="submit" /> </div> <div class="cfclear"> </div> </div>

This Howto will help you with the Chronoform DB Connection
http://www.chronoengine.com/forums/index.php?option=com_chronoforums&cont=posts&f=5&t=12324

2. In the following links you can download the files for jQuery List Nav.
http://jquery.com
[list]

jquery-1.3.2.min.js

[/list]
http://www.ihwy.com/Labs/jquery-listnav-plugin.aspx
[list]

listnav.css

jquery.listnav.pack-2.0.js

jquery.cookie.js

[/list]

3. Create a new connection with Chrono Connectivity.

General
Name: Glossary
TableName(s): Chronoform DB table
Header:
<link charset="utf-8" media="screen" type="text/css" href="/templates/<themepath>/jquery/listnav.css" rel="stylesheet"/> <script type="text/javascript" src="/templates/<themepath>/jquery/jquery-1.3.2.min.js" charset="utf-8"> </script> <script type="text/javascript" src="/templates/<themepath>/jquery/jquery.listnav.pack-2.0.js" charset="utf-8"> </script> <script type="text/javascript" src="/templates/<themepath>/jquery/jquery.cookie.js" charset="utf-8"> </script> <script type="text/javascript" charset="utf-8"> $(function(){ $('#Listnav').listnav({ includeAll: true, flagDisabled: false, noMatchText: 'Keine Einträge vorhanden', showCounts: false, cookieName: 'listnav', }); }); </script> <div id="listWrapper"> <div id="Listnav-nav" class="listNav"> </div> <ul id="Listnav" class="demo">
Changes the include path (/templates/<themepath>/jquery/)

Body:
<li> <a>{text_0} <p> {text_1} </p> </a>{edit_record}{delete_record} </li>
Footer:
</ul> </div>
Delete Link Code: delete
Edit Link Code: edit

Front Permissions

Record Edit Template:
<div class="form_item"> <div class="form_element cf_textbox"> <label class="cf_label" style="width: 150px;">Title</label> <input class="cf_inputbox required" maxlength="150" size="30" title="" id="text_0" name="text_0" type="text" /> </div> <div class="cfclear"></div> </div> <div class="form_item"> <div class="form_element cf_textarea"> <label class="cf_label" style="width: 150px;"> Description</label> <textarea class="cf_inputbox required" rows="3" id="text_1" title="" cols="30" name="text_1"></textarea> </div> <div class="cfclear"></div> </div>

Admin Config

Data View Fields Names: text_0, text_1
Data View Columns titles: text_0, text_1
Record Edit Template:
<div class="form_item"> <div class="form_element cf_textbox"> <label class="cf_label" style="width: 150px;">Title</label> <input class="cf_inputbox required" maxlength="150" size="30" title="" id="text_0" name="text_0" type="text" /> </div> <div class="cfclear"></div> </div> <div class="form_item"> <div class="form_element cf_textarea"> <label class="cf_label" style="width: 150px;"> Description</label> <textarea class="cf_inputbox required" rows="3" id="text_1" title="" cols="30" name="text_1"></textarea> </div> <div class="cfclear"></div> </div>
OnSaveJSCode:
if(0){ } else { submitform( pressbutton ); }

And finish is the Glossary

Greetings,
Zero-one